Hi, welcome to the builder, here we are going to build the app. As you can see on the left, there is a tree with multiple items, which we are going to call nodes. Let’s start building something great.
First, let’s create a new Entity:
- Right-click on the node
Model > Entities
, a dropdown menu will be shown, clickNew Entity
. - Fill in the form with:
Label
: TasksName
: tasksType
: Data
- Let’s add a simple field, fill the label with
Title
and the name withtitle
, the type should betext
, and the multiplicityone
. Click on add. - Finally, let’s set the record label. The record label is calculated for every record and it is something that will identify your record. It doesn’t need to be unique but should be human-friendly. Leave the option in
Field
and in the dropdown selectTitle
.
The form should look something like this. If so click on Create
.
Great!. Now that we have finished creating the entity, let’s create some more fields. Right-click on the node Model > Entities > Tasks > Fields
, and click New Field
.
For every field, you will need to complete the form with some basic information: label, name, type, and multiplicity.
Create the following fields with these settings:
Label | Name | Type | Required | Default value | Notes |
---|---|---|---|---|---|
Number | number | Auto increment | - | - | This a number that will be incremented for every new task created. |
Title | title | Text | Yes | - | The title of the task. |
Status | status | Choice | Yes | To Do |
This is the status of the task. Possible values will be |
Description | description | HTML | No | - | A longer description of the task. |
Depending on the type you might see some additional options at creation time, which is the case for the Status
field where you will need to add the four possible statuses: To do
, In progress
, Done
, and Archived
. It should look something like this:
Clicking on Save and edit
will create the field and will open the details view for that field, where you will be able to change other settings, like the default value and required flag. You can also open it by clicking the field node in the tree. In our sample app we need to take care of the following things for these fields:
Title
: the settingRequired
should beAlways
.Status
: the settingRequired
should beAlways
. Also, in theDefault value
, you should chooseValue
and then select the valueTo Do
from the dropdown.
Remember to save all the changes. In the end, you should end up with a structure similar to this one:
ow that we have created the fields for the entity, the next step is to create a view so we can see something in our app. For that, we will create a simple grid view that will allow you to list, create, edit and delete tasks. To create the grid view, follow these steps:
- Right-click on the node
Model > Entities > Tasks > Views
, a dropdown menu will be shown, clickNew View > Grid View
. - Fill in the form with:
Label
: All tasksName
: tallTasksColumns
: Number, Title, Status.
- Click on
Create
.
Once we have the view, we need to indicate how to navigate it. Let’s add it to what’s going to be the sidebar of our app. Click the node User interface > Navigation > Main menu
and follow these steps:
- Click on
Add new menu entry
on the top-right of the page, and then click on the optionAdd view entry
. - In the view, select the view
All Tasks
and complete the label withAll Tasks
. You can add an icon if you want. - Click on
Create
.
Great! We have a basic app already configured. Let’s see how it looks on the runtime, but first, we need to push the changes so the runtime has the latest version of our app.
In the header, click the icon next to your username (The hamburger icon). A drop-down menu will be shown, click Push changes
.
When you click on it you will see a modal showing the changes that will be pushed to the runtime. If you want you can add a description of the changes you did. Click on Push changes
. Once the process is done, the changes will be reflected in the runtime. To open the runtime, go back to the developer portal, in the Apps page, click the runtime button (The first one). That will automatically open the runtime in a new tab.
Let’s wrap this section here, we have made great progress, if you want to learn more let’s go to the next section First look at our app.