Home Screen
Go to http://blabla.com. Then click on the Sign-Up button pointed by the red arrow to open the sign-up form.
Create Account
Fill the sign-up form to create an account.
Login
After creating an account, click on the Login button to go the login screen.
Login to the application by filling up the form below -
Creating an App
After Login, we will be able to see the list of apps in our account. Initially the list will be empty. We will create an app to manage TODOs. To begin, lets click the Add App button highlighted in red.
We will call this app as TODOApp.
Once the app is created, we can see a box with the name of the app as below.
Studio
Click the Details button to go the Studio where we will start building the app.
- An app is a composition of various types of components like forms, tables, grid, frames, HTML blocks, maps and calendars.
- The components can send or load data from URL which are called Enpoints.
- Components can send and listen to events. Events are used for communicating between the components.
- On the menu in the left side of the Studio there are buttons to manage various types of UI components. Also buttons to manage arrays, events and endpoints can be found in the left menu.
Create Arrays
Click on the Arrays in the left menu.
Click the Add Array button to create a new array.
Lets call this array Country.
Once the Array is added, it looks like below.
Click on the Details button to go the page to add elements to the array.
Click on the Add Item button to add new element.
Every item has label and a value. The label is what will go inside the Option tag and will be visible in the screen, the value is the option value that will be send to the server.
We will add two more countries and then our array is complete.
Create a Events
Click on the Events in the left menu.
Click the Add Event button to bring the dialog.
We will add an event called AddTODOReload.
Once the event is added, it looks like below. We will create two more events, namely TableClickEvent and MainGridEvent.
Create End Points
Click Endpoints button to create a New Endpoint.
Click the Add Endpoint button to bring the dialog.
In the dialog, enter name as AddTODO and select AddTODOReload event from the post submit event dropdown. This event will be published after this endpoint is called.
Once the endpoint is added, it looks like below. We will add the GetTodos and GetTodoDetail endpoints in similiar fashion.
For GetTodoDetail we will add the TableClickEvent from the EventData list. So when this endpoint is called, it will also have the TableClickEvent data so that the backend will know which record is clicked.
End Points Lists
All End Points.
Text Field
Lets first add a text field. To drop a text field in the workspace, click on the Text button above. Once clicked a box will appear in the workspace representing the text field.
In the workspace one can drag to change dimension of the field by pulling the handles at the buttom right corner of the box. To change the position the entire box can be dragged.
Each type of field takes its own set of configurations. To open the configuration dialog, click on the gear on the top-right corner of the box.
The configuration dialog for the text field looks like below -
Select field
Now lets add a Select/drop-down field. Click Select button and to add a select field in the workspace.
Click on the gear on the top-right corner to open the configuration dialog for the select field.
Options Data
There are multiple ways to get the data to be shown in the Select dropdown. Here we will use the Country array that we have created earlier.
App Settings
- The first component that an App show is called the Main View. To see how the form looks like when rendered we have to make our Form the Main View component. For that we need to go to the App Setting page.
- Click on the App Setting button in the left menu to go to the App Setting page.
To make the form as the Main View, click on the Edit button next to the Main View label.
In the Main View dialog, chose AddTODOForm in the component list dropdown and save it.
After that go back to the All Apps page by clicking on the All Apps button.
In the All Apps page click on the View App button of the TODOApp to see the form.
The Form will look this -
Create a Table
Click on the Tables button in the left menu to go the table page.
Click on the Add Table button to create a table.
Enter the name as TODOTable and save.
Once the table is added, the page will show the newly created table in a box.
Click the Details button in that box to go to the table configuration page.
Table Title
In the table configuration page, click on the button highlighted in red to change the table title.
In the Table Title dialog, enter the title and save.
Table Events
- A table can listen to one or more events.
- When a table receives any of the event it is listening to, it will call the loader endpoint and will refresh the data in the view. To add event that this table will be listening to, click on the Add Reload Event button.
In the dialog box, select the AddTodoReload event. AddTODOReload event is fired by the form after a new TODO record is created. The table will listen to this event and will refresh the data so the new record will be visible automatically.
Selection Event
Table Selection Event is the event that is published when an user double clicks on a table row. The event contains the row JSON. To set the event, click on the button highlighted in red.
In the dialog box, select the TableClickEvent event.
Table Loader Endpoint
Click on the button next to the loader endpoint to open the dialog to set the loader endpoint with this table. The table will call this endpoint to get the records from the backend. The format of the data is JSON array.
Response JSON format as below -
[
{
"name": "John",
"Country": "US",
},
{
"name": "Peter",
"Country": "UK",
},
{
"name": "Priya",
"Country": "IN",
}
]
Request JSON format as below -
Select the GetTODOs Endpoint from the drop down and save.
Columns
To add a column, click on the Add Column button.
Table Columns Config
- Title is the label on the column header.
- Field name is the the field in the JSON that is mapped with this column.
- Columns could have a type, a formatter and a sorter. The type denotes the type of the data, whether it is integer, date or text.
- Formatter horizontally aligns the data. If the data type is numeric then chose numeric formatter.
- Sorter will sort the column a per the data type.
- In the form below we will add two columns called name and country. Both the columns will be of text type.
To see the table in action, we have to make this table component as the main view. The steps are same as what we did to see the form component
Select the main view component.
Then go back to the All Apps sections and click on the View App button of the TODO app.
The table will look like below-
Create a Grid
Click the Add Grid button to open the New Grid dialog.
We have to create the grid in the grids section.
Enter name as MainGrid and save.
Once the grid is added, it looks like this -
Click the Details button in that box to take us to the detail page.
Grid Workspace
The grid workspace is highlighted in red. Here we can add one or more components and rearrange their positions by drag and drop.
To add a child click on the Component button.
Click the gear icon and select the component name.
Select the AddTODOForm component and add it to the grid.
Let's add the TODOTable.
Select the TODOTable Component.
The children can be resized by pulling the handles. The relative positions can be changed by dragging the boxes.
Once the Grid is created, follow the same steps we did for the form and the table to make the Grid as the Main View.
Create a HTML Component
To create a new HTML Component, we will click on the Add HTML Component button.
Enter the name of the HTML Component as TODODetailView and chose Grid as the layout type, since we will use the HTML Builder to build this component.
Once the HTML Component is added, it looks like below -
Click on the Details button in the box to take us to the HTML Component page.
Loader Endpoint
- HTML component can optionally have a loader endpoint. It will be called whenever the HTML component is rendered.
- The data from the loader endpoint can be shown in the component through data binding.
- To set the loader, click on the Edit button.
Select the GetTodoDetail endpoint as the loader endpoint.
Response JSON format as below -
{
"name": "John",
"Country": "US"
}
Request JSON format as below -
{
"eventsData": [
{
"eventName": "TableClickEvent",
"eventData": {
"name": "John",
"country": "US",
}
}
]
}
After the loader is set, click on the Template button to enter the HTML Builder.
HTML Workspace
The HTML will be build in this area. Here we can drag and drop various types of HTML elements.
- We will add two text elements to display the name and the country of the TODO.
- We will also add a button to navigate back to the MainGrid component.
- Click on the Text button to add HTML text element.
In the builder one can change the dimension of the elements by pulling the handles.
Click on the top-right gear icon to open the setting dialog of the element.
Text Element Configuration
- In the dialog, one can configure various aspects of the element.
- Text Element Type: The actual HTML tag.
- Tags: H1, H2, H3, H4, H5, H6, P
- Text: The text that will go inside the tag. If data binding is used then the syntax will be like this [[ data.<membername>]]
- One can also set other aspects like text color, background color, font family and weight, horizontal and vertical alignment and padding.
- We will create the two text elements with the text field as Name:[data.name] and Country:[[data.country]]
- Now lets add the SendEvent Button. The send event button as the name suggest will publish an event to the Eventbus on click.
- We will create a frame in the nex section. This frame will be listening to this event. The frame will show the MainGrid component when it receives this event.
To open the configuration dialog click on the gear on the top box.
Button Element Config
- Here we will chose the SendEvent method.
- And chose the MainGridEvent event as the Event.
- This means when the button is clicked, this method will be called which will send the MainGridEvent event in the Eventbus.
Create a Frame
Click on the Frames button in the left menu.
Click on the Add Frame button to create a new frame.
Enter the name of the frame as MainTODOFrame.
Once the Frame is added, it looks as below -
Click on the Details button in the box to go to the frame configuration page.
Default Component
Click Edit and set Default Component. Default component is the one that the frame will render first.
Select the component name as the MainGrid.
Add Mapping
Frame contains an event to component mapping. The frame listens to the events and once an event is received, its corrresponding component as per the mapping is shown, replacing the currently visible component.
Creating a mapping.
- Map the TODODetailView component with the TableClickEvent event.
- We will also map the MainGridEvent event to MainGrid component.
- Once the Frame is created, follow the same steps we did for the form and the table to make the Grid as the Main View.
- How to change main view follow the step by step process: Click here.
