Sliding Grid#

Overview#

The Sliding Grid allows you to configure all the levels and columns in the Sliding Window via the widget settings. The widget allows for a fast representation of hierarchical data. The look and feel of a Sliding Grid is shown below.

General Steps#

To use the Sliding Grid widget in a UI Page, follow the steps below:

1. In any UI Page in Build mode, select the Sliding Grid from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
2. Enter the Settings section of the widget through the three vertical dots.
3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image. You can also select the navigation mode behavior: open a new page, replace the current page, or none.

Widget Customization#

1. Optionally, in the Style tab, you can define a Border Width and Color.

   

2. In the Setup provide the following details:

   • Title - Set the title of the Sliding Grid.
   • Lazy Load - Set to true by default, this option determines whether the grid uses lazy loading.
   • Show Header Counter On Paginated - Set to true by default, this option displays the header counter when the grid is paginated.
   • Show Only Total Items In Smaller Widths - Set to true by default, this option shows the total item count only on smaller screens.

   

3. In the Columns tab, you should configure the different Levels of the Sliding Grid and the Columns to be displayed for each level. To configure the Levels details, you should provide:

   • Selection Mode - Choose from None, Single, or Multiple selection modes.
   • Double Click Action - Define the system action to be triggered when an item is double-clicked.
   • Slide Right Template Classes - Specify the CSS classes for the slide-right template.
   • Has Children Path - Set the path that indicates whether an item has children.
   • Child Path Count - Set the path that indicates the number of children for each item.

   

   To configure the Columns details, you should specify:

   • Name - The name of the column.
   • Path - he data property path for the column.
   • View Priority - Determines the priority of the column's visibility: Always Visible In Desktop, High, Medium, or Low.
   • Is Visible By Default - Set to true by default, this option determines whether the column is shown by default.
   • Custom Type - Set to false by default. If set to true, it indicates that the column is a custom type, and you will be able to input a Custom Type Template.
   • Type - The type of data the column will display (e.g., Boolean, Entity Type, Integer, JSON, ReferenceType). If ReferenceType is selected, you must also specify the Value Reference Type, such as Entity, Entity Type, Lookup Table, or Query. If Entity Type is chosen, you will need to select the specific entity.

   

4. Optionally, define the Inputs.

   

5. Define the Links between this widget and other elements of the UI Page.

   

   When you add a new level, it appears in the Sliding Grid outputs for the various levels. In this case, you have 3 levels (Change Level (0), Change Level (1), and Change Level (2)) where you link the information you want to display:

   

   In the next example, the Change Level (1) from above was connected to a Query that was created. This Query needs a parameter to filter the information, and the needed parameter is sent with the converter:

   

6. Select Save and Close to complete the widget configuration.