Gallery View is an interface element that allows you to present content—such as a product catalog, design portfolio, or category list—in a card-based, visually focused, and organized manner; it enables users to easily navigate between items by swiping or clicking.
The best way to present product catalogs, design portfolios, or category lists in your application in a visually focused and highly organized structure is to use the Gallery View element. Users can navigate through items by swiping or clicking, and the content is presented in a way that is both aesthetically pleasing and well-organized.
To set up this screen, first create the table structure as shown on the screen. Then, use “New SQL Action” to create the “InsertProductGalleryData” action. Prefix each table with “dbo.”, test it, and save it. Next, write the “GetProductGalleryData” action and repeat the same steps here. Click the “Add Action” field to link your “Initial Action” query—which will retrieve the data—to the page. Next, drag the Gallery View element onto the screen and add a Row element inside it; select a single column from the Desktop section. Add a Panel element inside it. In the Style section of the Styling panel, set the background to “White Background.” Set the Radius value in the Border section to 15 px. Add a Row element inside the Panel and select 2 columns from the Desktop section. In the Align section, set the Left Column to left-aligned and vertically centered, and the Right Column to right-aligned and vertically centered. Place Label elements inside the Columns. In the Style section of the Styling panel, set the Label elements on the right to Heading 6. Add an Image element below the Label elements. Center them horizontally and vertically using the Layout section in the Styling panel. Adjust the size of the `Image` element using the `Width` and `Height` fields. Add a `Row` element below the `Image` element. Set it to a single column in the “Desktop” section. In the “Styling” panel, set the column to be right-aligned. Add a `Horizontal Stack` element inside it, drag a `Label` element into it, and delete the `Width` value (which defaults to 100 px) in the “Styling” section. Repeat the same process for the Label element you’ll add next to it. Define the action for the DataSource field of the GalleryView element. Define the Label elements and the Image element in the “Field to Display” field under “Value” as shown on the screen. Select the last Label element as a Symbol Picker and enter “TL” in the “Fixed Value” field.
When you click the Preview button, a well-organized product gallery appears, with product cards listed side by side within the GalleryView element. Users can compare different shoe models on a single screen and easily distinguish between products that are in stock, in limited stock, or out of stock. This structure ensures that products are listed in an organized, simple, and user-friendly manner, enhancing the shopping experience.
