Information Tiles

An Information Tile is a page component that displays statistics or summarized values. It is designed to present key information in a visually appealing format, often incorporating icons and colors to enhance the user experience.

How does it work?

Test the Information Tile in the built-in Joget DX 8 Showcase app to see how it works.

1. Login as Admin and Click the Pencil icon on Joget DX 8 Showcase to open the App Composer.
   
2. Click the Joget DX 8 Showcase UI to create an environment for testing the Information Tile.
   
3. Drag and drop the Rich Text UI element into the New In DX 8 category (or anywhere you like).
4. Name your Label and Menu ID with meaningful titles, and write a description in the Content of your Information Tile demo menu.
   
5. Click Edit Page Components.
   
6. Drag and drop the Information Tile page component into the page for editing.
   
7. Provide a meaningful Title for the Information Tile.
8. Define the Value using a Hash Variable to display dynamic data, such as the total number of built-in apps in the App Center.
   

Configure information tile

To configure the Information Tiles component properties, in UI Builder, drag and drop the Rich Text UI element into any category to enable the button Edit Page Components, click on it, and Drag and drop the Information Tiles page component into the page for editing.

When adding the Information Tiles component, you will see the following fields available for configuration:

• ID: Page component ID. Assign a unique ID to the Information Tile.
  For more information about defining the IDs and list reserved IDs, see Form Element.
• Template: Select the design of the Information Tile. Some templates may include graphs or charts.

Value mapping

Value mapping in Information Tiles allows you to define and display dynamic data in a structured and visually appealing way.

Fields to configure:

• Title: Enter the title or subject of the data to be displayed.
• Value: Define the data to be displayed using a Hash Variable.
• Icon: Choose an icon that represents the data type.
• Link URL: Provide a hyperlink for the Information Tile. Users can click the tile to access the link.
• Color: Set the color of the Information Tile.

AJAX & events

Events are fundamental to creating interactive and dynamic web pages, and AJAX enables the development of more responsive web applications without reloading the entire page. In the context of the Accordion component, AJAX & Events can be configured to enhance interactivity and user experience.