Detail Modal

1. Overview

The "Detail Modal" feature is a navigation component designed to provide a detailed view of items selected by users, always tied to a single table. This component is particularly useful for displaying complete and detailed information about a specific item, allowing for deeper analysis.

2. Component Structure

Table Information (Left Side): Displays the table details of the selected item. These details can be configured to be editable or read-only, depending on the application's needs.

Content Area (Right Side): This area allows the creation of multiple tabs, each capable of displaying different types of content related to the item. Below are the types of tabs that can be configured:

3. Tab Types

3.1. TimeLine

This tab is ideal for displaying updates, histories, or diving deeper into the application details. Its behavior is similar to the "TimeLine" component (detailed in another document). The "TimeLine" tab will only be available if there is a table linked to the "Detail Modal" as a foreign key (FK). For example, a negotiation modal can have the "Negotiation Item" entity as part of the TimeLine, allowing detailed tracking of interactions and events.

3.2. Form

This tab allows adding a form related to the specific table tied to the detail modal. It is mainly used to facilitate editing table data, providing a direct and intuitive interface for updating information.

3.3. Screen

This tab enables selecting one of the screens already built using the Page Builder.

4. Interaction Buttons

In the upper area of the "Detail Modal" component, interaction buttons can be created, each configurable with the following options:

• Tooltip: Text displayed when hovering the mouse cursor over the button.

• Blocking Criteria: Allows defining an attribute to dynamically block the button based on the selections in the detail modal. The button will remain active if the attribute used for blocking returns 0 or null and will be blocked for other values.

• Execution Type: Defines the button's interaction, with options to execute an action (with a configurable confirmation message) or open a screen (working as a modal and opening a screen configured in the Page Builder).

• Personalize: Standard button layout settings, including icon, background color, and text/icon color.

5. General Settings of the Detail Modal

In the upper-right corner of the screen, there is a "Settings" button where general configurations are available, such as the blocking criteria that define an attribute to block the entire detail modal when its value is different from null or 0. When blocked, the table information area and the content area are grayed out, with a centralized message displayed in the header of the detail modal, configured in the "Blocking Message" field.