1. Overview of the Gallery View Element

The Gallery View element is a powerful display element that allows you to list images or content in an organized structure within your application. It enables users to easily discover multiple images or content in a card structure. The gallery structure is ideal for use in visually-heavy screens such as image displays, product portfolios, category lists, or collection content.

Users can navigate by swiping or clicking between items; content is presented with both an aesthetic and organized appearance. Thanks to its responsive structure, the Gallery View element automatically adapts to mobile and web devices, providing an optimized user experience.

The Gallery View element is supported in web and mobile applications.

1.1. Common Use Cases

• Creating a picture gallery. Used to list multiple images in an organized structure. Product photos, event images, or project visuals are frequently used in this area.
• Presenting portfolios or projects. Design portfolios, reference works, or project outputs can be displayed as visual cards.
• Displaying product catalogs. It is a suitable component for listing products with a visual focus in e-commerce applications.
• Presenting categories or content groups with visual cards. Blog categories, menus, or content collections can be conveyed to the user in a visually rich way.

2. Key Features

• Visual-Focused Card Structure. Each item is displayed as a visual or content card, allowing users to quickly focus on the visuals.
• Responsive Design. Automatically adapts to mobile, tablet, and web screens. Cards are realigned according to screen width.
• Dynamic Data Binding. Data coming from datasources or actions can be automatically applied to gallery cards.
• Flexible Grid Layout. Multiple cards are arranged in a grid-like structure. Cards are aligned in rows.
• Empty Data State Management. Supports displaying a message or custom image when data is not available.

2.1 Gallery View Element Properties (Properties)

When you select the Gallery View element, visual adjustments, data source management, and responsive column settings can be configured via the Properties panel on the right. All of the following properties are explained in detail:

Data and Empty State Settings

• Datasource: Specifies the source of the data to be displayed in the Gallery View. Data from datasources or actions is automatically applied to the cards.
• No Data Found Message: Specifies the message to be displayed on the preview screen when no dynamic data is connected or when the data returns empty. E.g.: “No content found to display.”
• Show No Data Found Image: Allows you to define a custom image to be displayed when there is no data. This is especially used to improve the user experience when the gallery is empty.

Responsive Column Settings

• Phone Columns Count: Specifies the number of columns to display side-by-side on mobile devices. Default: 1
• Tablet Columns Count: Specifies the number of columns to display side-by-side on tablet screens. Default: 2
• Desktop Columns Count: Specifies the number of columns to display side-by-side on web/desktop screens. Default: 3

Hover Settings

• Hover Font Color: Changes the text color when the user hovers over gallery cards with the mouse.
• Hover Bg Color: Changes the background color when the user hovers over a card. This feature is especially used to highlight cards.
• Row Bg Color: Changes the background color when hovering over a card or row. Can be used in conjunction with hover behavior.

Grid Spacing Settings

• Horizontal Gutter: Specifies the amount of horizontal spacing between cards.
• Vertical Gutter: Specifies the amount of vertical spacing between cards.

2.2. Actions That Can Be Added to Elements

Since the Gallery View element functions as a display component, it does not support adding any actions or defining triggers.

User interactions should be managed directly through UI elements such as Panel, Button, Image, etc., placed within the gallery, not through the Gallery View itself.

Therefore:

• onClick,
• onChange,
• or any other trigger cannot be added to the Gallery View element.

If a user click or other interaction is required, you can achieve this by attaching actions to elements within the Gallery View.

3. How to Use the Gallery View Element?

In this section, we will cover the end-to-end use of the Gallery View element through example scenarios.

Scenario: Product Gallery Display

In an e-commerce application, a card-based product gallery is used to present products to the user in a visually rich and organized manner on the home page or category screen. This gallery allows the user to quickly browse products by clearly displaying product images, names, prices, and stock status on a single screen.

Users can compare different shoe models by swiping through the product cards or scrolling down the list. This structure facilitates the purchase decision by presenting the products in both an aesthetic and informative way.

In the scenario:

• Each product card in the product gallery is structured to present the product image, product name, stock status, and price information in an organized manner.
• The top section of the card displays the product name and stock information, while the middle section shows the product image. The bottom section of the card presents the product's price information to the user in a clear and readable format.
• This structure allows the user to compare products at a glance and quickly access stock status and price information.

Step 1 - Creating a Data Source

Creating a table in the DataSources module:

• Go to the Datasources module.
• Then go to the Tables tab.
• Create a new table named “ProductGallery”.
• The table structure to be set up is as follows:

When adding the Price column, set its data type to Decimal and configure the Decimal Scale to greater than 2.

• Important Field Names:
  
  • ProductName: Holds the product name information. This is the main text displayed to the user in the gallery or card structure and allows them to quickly understand what the product is.
  • ImageUrl: Contains the URL information for the product image. The main image displayed in the product gallery or list screens is loaded through this field.
  • Price: Represents the selling price of the product. It is displayed to the user along with the price information and is used in product comparisons.
  • StockStatus: Indicates the stock status of the product (e.g., In Stock, Limited Stock, Out of Stock). It is an informative field that guides the user's purchase decision.

Step 2 - Defining the Necessary Actions

To display and add data in the interface:

1. You need to define two actions.
2. Add a new action from the Actions > New SQL Action tab in the Datasources module.

• Action that Adds Sample Data (InsertProductGalleryData): To test the application with sample data, add the following SQL action and press the TEST button.

INSERT INTO ProductGallery
(Id, ImageUrl, Price, ProductName, StockStatus)
VALUES
(NEWID(), ‘https://images.pexels.com/photos/19090/pexels-photo.jpg’, 2499.90,
N'Sports Shoes', N'In Stock'),
(NEWID(),‘https://images.pexels.com/photos/1537671/pexels-photo-1537671.jpeg’, 1899.50,
N'Casual Shoes', N'In Stock'),
(NEWID(), ‘https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg’, 3299.75,
N'Running Shoes', N'Limited Stock'),
(NEWID(), ‘https://images.pexels.com/photos/1456706/pexels-photo-1456706.jpeg’, 2799.30,
N'Leather Shoes', N'In Stock'),
(NEWID(), ‘https://images.pexels.com/photos/2048548/pexels-photo-2048548.jpeg’, 3599.95,
N'Outdoor Shoes', N'Out of Stock');

When applying, delete the ProductGallery section, rewrite ProductGallery, and press Enter. This will add the correct schema name before the table name.

• Action Providing Data (GetProductGalleryData):

SELECT * FROM ProductGallery;

When applying, delete the ProductGallery section, rewrite ProductGallery, and press Enter. This will add the correct schema name in front of the table name.

Step 3 - Adding Initial Action

Initially on the home page:

1. Open the UI Design module.
2. Add the Add Action > Initial Action > Custom > Managed Db > GetProductGalleryData action to the page.

Step 4 - Adding an Element and Editing the Style

1. From the left side panel, drag and drop the Elements > Data > GalleryView element onto the page.
2. Drag and drop the Elements > Container > Row element into the Gallery View element.
3. In the Row element, set Row > Properties > Desktop > as a window.

4. Add the Elements > Container > Panel element to the Col field.

5. In the Panel element, set the background color to Panel > Styling > Fill > Style > White Background.

6. For the borders, set Panel > Styling > Border > Radius > 15 px.

7. Drag and drop the Elements > Container > Row element into the Panel.
8. In the Row element, set it to two windows in Row > Properties > Desktop.

9. Select the Col area on the left side of the Row. In the Col > Styling > Layout > Align section, set the vertical alignment to Center and the horizontal alignment to Left.

10. Select the Col field on the right. In the Col > Styling > Layout > Align section, set the vertical alignment to Center and the horizontal alignment to Right.

11. Drag and drop the Elements > Display > Label element into both Col fields.

12. Set the Label element on the right side to Label > Styling > Text > Style > Heading 6.

13. Drag and drop the Elements > Display > Image element into the Panel below the text.

14. Click on the empty space next to the Image element and go to the Col field. Col > Styling > Layout > Align > Center both vertically and horizontally.
15. Click on the Image element. Set its dimensions by setting the Image > Styling > Layout > Width and Height fields to 300 px and 200 px respectively.

16. Drag and drop the Elements > Container > Row element into the Panel element below the Image element.
17. In the Row element, set Row > Properties > Desktop > a window.
18. Click on the Col field within the Row. From Col > Styling > Layout > Align, set vertical alignment to Center and horizontal alignment to Right.
19. Drag and drop the Elements > Container > HorizontalStack element into the Col.

20. Delete the default 100 px values in the Label > Styling > Layout > Width fields within the Label elements.

Step 5 - Configuring Element Settings

Connecting the initial action added to the page to the elements:

1. Click on any element in the panel and click on the GalleryView element via the breadcrumb menu.

2. In the GalleryView element, select the GalleryView > Properties > Datasource > GetProductGalleryData action.

3. Click on the first Label element on the left side. In the Label element, set it to Label > Properties > Value > Field to display > ProductName.

4. Click on the second Label element on the right side. In the Label element, set it to Label > Properties > Value > Field to display > StockStatus.

5. Click on the Image element. In the Image element, set it to Image > Properties > Value > Field to display > ImageUrl.

6. Click on the first Label element on the bottom. Set it to Label > Properties > Value > Field to display > Price.

7. Click on the second Label element on the bottom. Add the text Label > Properties > Value > Symbol Picker > Fixed Value > TL.

You can add and display different currency prices on the table using currency information. Only TL is used in the example scenario.

8. After the final adjustments, the expected appearance should be as follows.

Preview:

When the application is tested, a product gallery is displayed where product cards are listed side by side within the Gallery View element. The top section of each card displays the product name and stock status information, while the middle section prominently displays the product image. The bottom section of the card clearly and legibly displays the product's price information.

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 supports the shopping experience by listing products in an organized, simple, and user-friendly manner.

4. Common Properties

Some areas on the Gallery View element are used in common across all UI elements. Therefore, detailed descriptions of the following features are available on the relevant general guide pages:

• Authorization Settings
• Visibility
• Editability
• Style Panel

5. Best Practices

• Keep the card structure simple and consistent. Use standard card components as much as possible, as content of different sizes can disrupt the gallery layout.
• Set the responsive column counts correctly. Configuring the Phone / Tablet / Desktop Columns Count settings correctly directly affects mobile compatibility.
• Set the gutter settings correctly. Very narrow gutter values create a cramped appearance, while very wide values can unnecessarily extend the page.
• Display empty data status to the user in an explanatory manner. Improve the empty screen experience by customizing the No Data Found Message and Show No Data Found Image values.
• Use hover effects carefully. Hover Font Color and Hover Bg Color should be used to increase emphasis on visually dense screens, but overly contrasting colors should be avoided.

6. Limitations

• The Gallery View element does not support adding actions (onClick, onChange, etc.). Interactions can only be managed through the elements within it.
• Responsive structure depends on the number of columns. Incorrectly set Phone/Tablet/Desktop Columns Count values can cause distortions in the grid layout.
• The layout may break when aspect ratios are inconsistent. Images with different aspect ratios cause alignment issues in the grid view.
• Gutter values are fixed based on screen width. Since proportional (percentage-based) spacing is not supported, crowding may occur on narrow screens.