Create Forms and Dashboards
Layouts in Engine Awesome are highly customizable interfaces that display data from object types and enable interaction with that data. There are three primary types of layouts: Freeform, Collection, and Item. Layouts can be created via the Navigation Menu or the Objects Menu, and they allow users to display or edit records in various ways.
How to Create a Layout
You can create a layout by:
- From the Navigation Menu: Click “Add Layout.” (Learn more about Navigation)
- From the Objects Menu: Select an object type and click “Create Layout” to start building a layout specific to that object.
Each layout can be named and assigned a unique slug, which identifies it within the application.
Layout Types
Freeform Layout
A Freeform Layout is the most flexible type of layout. It allows you to combine data from multiple object types into a single view. This layout is particularly useful for creating dashboards, which may need to display an overview of various types of data in one place. It doesn’t follow a structured form, giving you complete freedom to place and format different blocks or views.
Examples of when to use Freeform Layout:
- A Dashboard combining performance metrics from multiple projects and tasks.
- A Team Overview that includes data from projects, tasks, and team members.
Collection Layout
A Collection Layout is used to display a list of records from a specific object type. For example, if you have a “Tasks” object, a Collection Layout might show a table listing all the tasks. You can customize how the data is displayed, sort records based on specific fields, and limit how many records are visible at once.
In the settings for Collection Layouts:
- You can choose the Order of records (ascending or descending) based on a field (e.g., “Created Date”).
- You can set a Max Items to control how many items are shown in the list.
Use Cases for Collection Layout:
- A Task List showing all tasks in a project.
- A Client List displaying customers for a business.
Item Layout
An Item Layout is used to display and edit a single record. This is where data entry happens within Engine Awesome. For example, when viewing or editing a specific task or client record, you would use an Item Layout. This layout is ideal for providing a detailed view of the record and any associated data (e.g., related tasks or activities).
Item Layouts are also customizable to meet your data needs. You can define which fields appear and in what order they are displayed.
Examples of Item Layouts:
- Task Detail View: Showing all details related to a specific task, such as its status, description, and due date.
- Client Profile: Displaying all information about a client, including contact details and associated tasks.
Layout Settings
When creating or editing a layout, you’ll encounter the following settings:
- Name: The name of the layout, which will be shown in the app’s navigation.
- Slug: A unique identifier for the layout.
- Type: Choose between Freeform, Collection, or Item.
- Object Type: For Collection and Item layouts, you’ll need to select the object type the layout applies to (e.g., Tasks, Contacts).
- Query Settings (for Collection Layouts): Customize how records are ordered and the maximum number of items displayed.
Layout Visibility
Engine Awesome allows you to control layout visibility. You can specify whether a layout is the default layout that appears when no other specific layout matches a set of criteria. This feature ensures that users are always presented with the right view when interacting with the app.
Data Entry in Layouts
While both Freeform and Collection Layouts display data, data entry occurs only in Item Layouts. These layouts allow users to interact with individual records by editing fields, updating statuses, or adding new information. Whether it’s adding a new task, updating a contact, or scheduling an appointment, Item Layouts serve as the primary method for entering and modifying data in Engine Awesome.
For example:
- A Team Member Profile might allow editing a member’s contact info, role, or team association.
- A Job Detail View could enable a user to change the status of a job from “Scheduled” to “Completed.”
Combining Layouts
Layouts can be used together to provide a seamless user experience. For example:
- A Collection Layout can list all tasks in a project.
- Clicking on a specific task opens the Item Layout to view and edit the task’s details.
By combining different layout types, Engine Awesome gives you the flexibility to create dynamic and interactive views that align with your business needs, whether you are building dashboards, tracking data, or managing complex workflows.
Designing Layouts
When designing layouts in Engine Awesome, the provided design tools offer flexibility to craft the perfect visual experience for your data. With elements like Text, Group, Row, Stack, Grid, and Image, you can arrange your content in organized, appealing ways. For instance, use Grid to display multiple fields in columns, Row for horizontal alignment, or Image to showcase visuals. The Tab Panel enables multiple views in one layout, making dashboards or detailed records more intuitive and functional without overwhelming the user interface.