Add Ellipses to Text on the Backend (for Adalo & more)

Have you ever found yourself in a situation where you need to display long texts on your front-end application, but your UI/UX editor doesn't provide the necessary tools to trim or truncate the text? Don't worry, Xano has got you covered! In this blog post, we'll guide you through two methods to manipulate text on the backend, ensuring a clean and consistent display across your application.

Method 1: The Quick and Painless Approach

If you're looking for a quick and easy solution to apply text manipulation across all your descriptions, this method is for you. Follow these simple steps:

1. Navigate to your product endpoint, where you're querying all the products from your product data table.
2. In the "Output" section, replace the current output with the following code:

This code will take the first 10 characters of each description and append three dots (`...`) to indicate that the text has been truncated.

1. Run the endpoint, and voila! All your descriptions will now be trimmed to 10 characters, followed by ellipses.

While this method is fast and effective, it applies the same transformation to all descriptions, regardless of their actual length. If you need more control over the trimming process, move on to the next method.

Method 2: The Function Stack Approach

If you prefer a more granular approach to text manipulation, the Function Stack method is for you. This method allows you to fine-tune the trimming process based on specific conditions, such as the length of the description. Follow these steps:

1. Start by removing any existing text manipulation code from your endpoint.
2. Under "Data Manipulation," click on the "Loop" button and select "For Each."
3. In the loop, you'll loop through each product item.
4. Next, add a condition under "Data Manipulation" by clicking on the "Condition" button.
5. In the condition, check if the length of the product description is greater than 10 characters using the following code:

1. If the condition is true (i.e., the description is longer than 10 characters), you'll want to update the product description. Under "Data Manipulation," click on the "Update Variable" button.
2. Update the `product.description` variable with the following code:

This code will take the first 10 characters of the description, remove any trailing whitespace (`rtrem()`), and append three dots (`...`) to indicate that the text has been truncated.

1. Run the endpoint, and you'll see that all descriptions longer than 10 characters have been trimmed and appended with ellipses.

By using the Function Stack approach, you have more control over the trimming process. You can adjust the character limit, modify the truncation indicator (e.g., use `...` or `[Read More]`), or even add an `else` condition to handle descriptions that are shorter than the specified limit.

Wrapping Up

Whether you choose the quick and painless approach or the more granular Function Stack method, Xano provides you with the tools to manipulate text on the backend, ensuring a clean and consistent display across your application. This feature is especially useful for non-technical users, citizen developers, and traditional developers who want to prototype ideas quickly or offload backend development tasks.

Remember, these text manipulation techniques can be applied not only to product descriptions but also to any text field in your application, such as blog post excerpts, user bios, or even tweets. With Xano, you can take control of your application's UX and present information in a polished and organized manner.

If you have any questions or need further assistance, feel free to reach out to our support team within the Xano platform or engage with our vibrant community. Happy coding (or no-coding)!