The introduction of scrollable elements makes it possible to design content that scrolls, either horizontally or vertically. The user can either design the scrollable content themselves with fixed elements or can also append a dynamic list of data from the api.
How to create a scrollable element
- Choose the Scrollable Element from the element picker and drag it onto the canvas.
- For editing a scrollable element, you should double click on it. Now, you can see the scrollable content area. You can resize this area horizontally or vertically by dragging as per the use case. To make it scrollable, make the area bigger than the scrollable element.
Fixed vs. Dynamic Content
When designing scrollable content, there are two primary approaches based on whether the contents are fixed or dynamic.
Fixed contents are a static set of elements that you add manually to a scrollable area. For example, you might want to show long user agreement text inside small in-page window.
Dynamic contents allows you to visualize list of data from data that could be retrieved from external data source, such as an API. For example, you want to show a list of product names that are coming from the api into a scrollable area. In this case.
Design with fixed content
- Double-click on the scrollable element you've placed on the canvas. This will open the inner canvas where you will add your content.
- Define the scroll direction:
- For vertical scrolling, ensure the width of your content container is the same as the scrollable element, and then extend the height of the inner canvas downward.
- For horizontal scrolling, ensure the height of your content container is the same as the scrollable element, and then extend the width of the inner canvas to the side.
- Drag and drop elements (like text, images, or buttons) into the inner canvas and arrange them as desired. Note that you cannot currently place a scrollable element inside another scrollable element.
A simple example for designing scrollable content vertically
Applying dynamic content
To apply the external data to scrollable, use js api:
$i.elements.Scrollable1.value = someData;