/

The Vertical Stack element is a basic layout element used to stack user interface elements vertically. By arranging the UI elements within it in a single-column structure, it ensures that content is presented in a more readable, organized, and hierarchical manner. We will explore the use of this element through the “Creating a Profile Summary Card” scenario.

To get started, create the table on the screen from the Tables section in the Data Sources area. Then, create an action using New SQL Action to add sample data; prefix the table name with “dbo.”, test it, and save it. Repeat the same steps for the action that retrieves and filters the data.

Drag a Row element onto the page, set it to a single column from the Desktop section, and center the Column. Place a Panel element inside it; set the width and height from the Styling Layout section, select white as the background, and set the Radius value to 50 in the Border section. Drag a Vertical Stack element into the Panel; add an Image element inside it and adjust its width and height in the Styling section. Drag two Label elements below the Image element.

Link the action to the page using Initial Action. Then, define the Value fields for the Image element and both Label elements in that order.

When you click the Preview button, you’ll see that the profile image, name, and position information for the user are neatly stacked on top of each other in the profile card created with the Vertical Stack. This structure ensures that all information within the card is presented in a simple, readable, and aesthetically pleasing way.