Adding Components to Your Autorun Page

Autorun provides a wide selection of drag-and-drop components that allow you to build flexible and powerful business apps without writing code. While you can choose from many component types, the most commonly used ones are the Page Header, Table, and Form components. Together, they form the structure of most business applications: a clear header, a list of records, and a details view for individual items.

To ensure that a component can work with your data, the entity you want to use must already exist in the Database section of the Developer Toolbox. If an entity is missing, create it before connecting a component to it.

1. Adding a Component

Components are added through the developer toolbox and placed directly onto your page using drag and drop. Therefore you have to open the developer toolbox (only when in Edit mode), click + (Add tool), browse the list of available components, drag and drop the desired component.

Steps:

1. Open the Developer Toolbox

2. Click on the + (Add)

3. Browse the list of available components

4. Drag and drop the desired component onto the page in the position where you want it to appear.

2. Connecting a Table Component

Adding Table:

1. Go to Developer Toolbox

2. Click on + (Add)

3. Find the Table component from the list and Drag & Drop (you can also just type it into the search box)

4. Once you have added the table to your page, click on component Table name/gear icon from the component action bar (appears once you hover over the component in Edit mode)

5. Find Project from the dropdown menu in the Table name text field (Project is an entity that you added previously, for more on this see section: How to Add a New Entity)

6. Tick the checkbox for: Show Filters, Show Sorting

7. Click Save

Add Header (Optional):

1. Click on Table name or gear icon on the component to open Settings

2. In the Title text field type in: Projects

3. In the Subtitle text field type in for example: View list of projects

4. Choose icon from the dropdown menu

5. Click Save

3. Connecting a Form Component

A Form component displays or edits one specific record from an entity. It requires two things:

• The entity you want to pull data from

• The specific record ID of the item you want to show

Add Form

1. Go to Developer Toolbox

2. Click on + (Add)

3. Find Form component and Drag & Drop

4. Click on component Form name or gear icon from the component action bar (appears once you hover over the component in Edit mode)

5. Find Project from the dropdown menu in the Table name text field (Project is an entity that you added previously, for more on this see section: How to Add a New Entity)

If the record should be loaded dynamically from the page URL to indicate what the form refers to, in the Record ID textbox set the value to:

$router.id

This ensures that the form always loads the correct information when navigating to a details page.

6. Click Save.

Add Header (Optional):

1. Click on Form name or gear icon on the component

2. In the Title text field type in: Project Details

3. In the Subtitle text field type in for example: View project details

4. Choose icon for the header from the dropdown menu

5. Click Save

Summary

With these steps, you can structure your app effectively and ensure every component displays the right data from your database.