Database

The Page Builder is the core functionality for creating screens, applicable for both desktop and mobile interfaces. It provides an intuitive drag-and-drop experience, enabling users to build applications quickly and efficiently. The Page Builder is divided into the following main sections:

Components: The area where all the elements needed to build the interface are located, such as buttons, charts, labels, tables, and more.
Configuration: A section for general adjustments that affect the entire screen, including filters and other global settings.
Database: An area for interacting with data, allowing you to drag data from the database to the screen and configure tables, charts, and other components.
Screen: The main area where components are positioned and configured, with real-time visualization of changes made.

2. Components

The Components area is where you can find all the elements available to build your interface, such as buttons, charts, labels, tables, and more. These components are organized into categories like Data Analysis, Design, Processes, Navigation, Functionalities, and Inputs.

Each component follows three main steps:

VIEW: Define the component's data, which can come from Mitra's VIEWs (a no-code way to create queries) or directly from SQL queries.
Customization: Customize the layout, design, and specific functionalities of each component.
Interactions: Configure the component's interactions, such as forms, database actions, no-code actions, etc.

These three steps form the foundation of building in Mitra. Mastering them will enable you to configure any component available on the platform.

3. Configuration

The "Configuration" section, located on the right side of the screen, allows adjustments that apply to the entire interface. Options include:

Filters: Sets selections that impact the entire screen and cannot be changed by the end-user.
Filter Bar: Adds a bar for temporary selections, made after the main selections.
Screen Settings: Allows you to publish or unpublish a screen, change its type (Web, Mobile, Dashboard), background color, and screen height.
Screen VIEW: A centralized view whose values can be accessed by other components, such as labels and buttons.

4. Database

The "Database" section, located on the right side of the screen, allows interaction with the data. You can drag single key tables to automatically generate a registration VIEW in Mitra. Additionally, by dragging numerical attributes, you can create custom charts using Mitra’s no-code Analysis VIEW.

5. Screen

The Screen is the main area where components are positioned and configured. This is the space where you build the final interface and visualize changes in real time.

After dragging a component onto the screen, you can adjust it in two ways: using the three icons (View, Customize, and Interactions) that appear when you hover over the component, or through the context menu, accessed by right-clicking on the component. The main available options include:

Settings (VIEW, Customize, Interactions): Manage data source, layout, and interactions.
Bring Forward and Send Backward: Adjust the component’s layer depth.
Delete, Duplicate, and Copy: Tools to manipulate components according to your needs. For more information, see the component layout documentation.
Group, Ungroup, Align, Standardize, Lock, and Freeze: Layout tools for components.

Additionally, components can be resized by dragging the gray squares around them.