/

The panel element is a fundamental layout element used to organize, separate, and highlight content in a user interface. It creates a specific area within a page, allowing users to focus on blocks of information. We will explore the use of this element through the “Creating Wholesale Distribution Status Cards” scenario.

To get started, create two tables named OrderStatusColor and OrderStatusPanel, and populate both as shown on the screen. Then, from the Actions pane, use New SQL Action to create the InsertOrderStatusPanel action; prefix the table name with “dbo.”, test it, and save it. Create the GetOrderStatusPanel action, which retrieves the data, using the same steps.

Switch to the UI Design module and add the “GetOrderStatusPanel” action to the page as the Initial Action. Drag a Gallery View element onto the page and drop a Row element inside it; set it to a single column from the Desktop section. Add a Panel element inside the Row, place a Vertical Stack inside it, and center it using the Styling Layout section. Click the Label element inside the Vertical Stack five times to create five Labels stacked one below the other.

Click on an empty area on the page and reconnect the action to the page via Initial Action. Select the Gallery View element using Breadcrumb and connect it to the action from the DataSource field. Fill in the Dynamic Background Color and Dynamic Font Color fields. Set the Radius value to 50 in the Styling Border field. Define the Value fields of the Label elements as Status, OrderCode, CustomerName, Description, and LastUpdate, respectively.

With this setup, each panel is automatically styled with a dynamic background color, text color, and information fields based on the order status. Statuses such as In Transit, Being Prepared, Delivered, Canceled, and Pending are easily distinguishable visually, providing the user with a readable order tracking screen.