Introduction Last updated: 2019-06-01

Welcome to the quick start guide. Here we will show step-by-step how to create an application front-end using the framework.

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.

Arrays

Arrays hold static data that is used to build the Option elements of HTML select, radio and checkbox fields that are displayed inside forms. In our app, we will have a list of countries, so lets create an array of countries.

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.

Events

  • Components communicate through events. There is a common Eventbus in the framework. Components can send or receive events from this bus.
  • An event can be received by multiple components.
  • Every event has a name and data. data is optional. Events are retained within the browser-memory.
  • Buttons can be associated with event, so that whenever an user clicks the button the associated event is broadcasted to all the listening components.
  • A frame contains an event-to-component mapping. Whenever it recieves an event, it shows the component which is mapped to the event received.
  • Components like table, map, card and calendar can listen to one or more events. Whenever an event is received, the component refreshes its data by calling its loader endpoint.
  • When an endpoint is called, there is option to send one or more event data to the server. This data is useful in understanding the current selection/navigation context of the user in the app.
  • A form after calling the server can publish an event with the result of the server call.

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.

End Points

  • Endpoints are the URLs that will be called from the app.
  • We will create three endpoints.
  • AddTODO endpoint to add a TODO record that will be used by the form.

Response JSON format as below -

                            
							
      [
          {
            "name": "John",
            "Country": "US",
          }
      ]

                            

Request JSON format as below -

                            
							
      {
        "name": "John",
        "Country": "US",
      }

                            
  • GetTodos endpoint to get the list of TODO records.

Response JSON format as below -

                            
							
      [
          {
            "name": "John",
            "Country": "US",
          },
          {
            "name": "Peter",
            "Country": "UK",
          },
          {
            "name": "Priya",
            "Country": "IN",
          }
      ]

                            

Request JSON format as below -

                            
							
                            
      {
        "eventsData": [null]
      }

                            
  • GetTodoDetail to get the detail of a single TODO record.

Response JSON format as below -

                            
							
      {
        "name": "John",
        "Country": "US"
      }

                            

Request JSON format as below -

                            
							
                            
      {
        "eventsData": [
            {
                "eventName": "TableClickEvent",            
                "eventData": {
                    "name": "John",
                    "country": "US",
                }
            }
        ]
      }

                            
  • Click on the EndPoints button in the left Menu to go the Endpoints page.

Create End Points

Click Endpoints button to create a New Endpoint.

Click the Add Endpoint button to bring the dialog.

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.

Form

The first UI component we will build will be a form to add TODO record. This form will send the data to the AddTODO endpoint in JSON format. The form after receiving the response from the server, will publish AddTODOReload event with the response data.

Create Form

Click on the Forms button in the left menu to go the forms page.

Next click on the Add Form button at the top-right corner to open the dialog.

In the dialog, enter the name of the form as AddTODOForm and save.

Once the form is created, a box will appear with the name of the form.

Click the Details button in that box to take us to the Form Builder.

In the Form Buider one can add various types of form fields. We are supporting 11 types of fields right now.

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.

Form Submission

  • The form looks perfect, but it’s not functional. To make it functional we have to set the submit endpoint.
  • To set the submit endpoint, click on the button highlighted in red.

In the drop-down select the AddTODO endpoint and save it.

The form will send the data to the endpoint in a JSON format as below -

                            
							
      {
        "name": "Project Name",
        "Country": "IN",
      }

                            

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 -

Tables

  • Now lets add a table in our app. The table will show the list of TODOs.
  • If a user double click on any row, it will open the detail view of that TODO record.
  • The detail view will be a HTML component that we will create later.

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 -

                            
							
                            
      {
        "eventsData": [null]
      }

                            

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-

Grids

  • Grids are container that can contain one or more child components in a rectangular grid. To show the form and the table together we will use the grid component.
  • We will create a grid, add the form and the table as its child and will make the grid component as the main view of the app.
  • Click on the Grids button in the left menu to go to the Grids page.

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.

HTML Component

  • HTML component contains a block of HTML code. The code can be either imported from pre-defined templates or could be build using th HTML Builder.
  • The component supports data binding.
  • We will create a HTML Component as a detail-view. It will be visible after the user double-clicks on a particular row of the table.
  • Click on the HTML Components button in the left menu to go the HTML compoents page.

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.

Frame

  • The Detail View HTML Component will be visible only on double-clicking a row on the table. For this transition to happen, we need to create a frame component. The frame will have the grid and html component as two children.
  • Frame will show only one children at a time and listen to events. Based on the name of the event received, it will change the children.

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.