/

The “Horizontal Stack” element is a layout-focused UI element used to align multiple components in a horizontal arrangement within the user interface. It is preferred for placing form fields side by side, organizing information boxes into groups, or providing the user with a more compact view.

We will explore the use of this element through the “Creating a Profile Information Card” scenario. To get started, create a table named ProfileCardData and populate it as shown on the screen. Then, from the Actions section, create your action using New SQL Action; be sure to prefix the table name with “dbo.” to ensure the correct schema name is specified. Test it and save it by clicking the Create button. Repeat the same steps for the action that retrieves and filters the data.

Drag a Row element onto the page and set it to a single column from the Desktop section. Center the Column horizontally and vertically using the Styling Layout section. Add a Panel element inside it; set the width and height in the Styling Layout section, select a white background, and set the Radius value to 50 in the Border section. Add a Horizontal Stack element inside the Panel and center it vertically in the Styling section. Place an Image element inside it and set its width and height to 32 in the Styling Layout section. Add a Label element next to it; update the Width value in the Styling section from 100 to zero. Add an Icon element next to the Label.

Define the action for the page using “Initial Action.” Click on the Image element and, in the ‘Value’ section, define “ProfileImage” as the Action Result. Perform the same configuration for the Label in the same section. For the Icon element, add your icon from the Properties panel.

When the application is tested, you will see that the elements aligned side by side using the Horizontal Stack correctly form the user profile card.