How to Create an Application

App Builder is a visual application-building tool. It guides the integrator to create the menu structure of an application by configuring logos and color scheme.

Figure 1 - representative App Builder icon

The basic structure of an application is created by following these steps in sequence:

1: Go to App Builder

The first action to be taken is to access the App Builder. When accessing the tool, the following screen (figure 2) is presented, in this step it is necessary to name the application, and optionally enter a description.

Figure 2- Configure name and description for the application

In the second step it is necessary to choose the menu option to be used: Side Menu or No Side Menu. It is worth remembering that with each option chosen, a prediction of appearance is presented.

Figure 3 - Application menu customization options

In the third step it is necessary to select the size of the side menu (large, condensed or minimalist):

Figure 4 - Choice of design for the side menu

In the fourth step it is necessary to choose the menu behavior: fixed, floating, or floating submenus:

Figure 5 - Configure the behavior of the side menu

In the fifth step you can choose whether or not to use a top menu:

Figure 6 - Choose to use the top menu

In the sixth step it is necessary to choose the colors of the application interface to be created (theme colors, background color and colors of the screens in general), limited to the options of the displayed palette:

Figure 7 - Define application colors and themes

After completing the application creation steps, you need to create dashboards and configure the data visualization.

2: Create the screens

A very important step is the organization of how the navigation will be performed in the application. This is done by organizing the frames structures in the application. The frame is the useful area where the graphical elements that will deliver the expected functionalities will be placed. Each menu, and its possible submenus, allows access to a frame. The creation of these screens can be simplified in the following steps:

1: In edit mode, right-click one of the menus of interest. The screen shown in figure 8 will open, with the options to create other menus in the current structure, or submenus within other menus. As well as removing them, in addition to changing icons and titles in the "Settings" option. The latter still reserves a very important configuration that is the 'Filter Type', three different types are foreseen: None - no information will be loaded in the filter structure, embedded - a notation in json can be used in the "JSON" field (released when selecting the option), with a hierarchical organization of objects, which provide information to the frame, according to the selections made in the menu filter. For a better understanding of menu filters, and the possibilities using json notation, access our documentation directed to this theme (Menu Filter Structuring), where a menu configuration can be loaded from an external API, through a url. In this way, create and edit the best filter configuration for your case.

Figure 8 - Editing menus

2: Within the frame of each menu there is the option to add tabs, in order to group information on different screens, in the context of a single menu. The tabbed feature is accessible on the right side of each frame, details in figure 9:

Figure 9 - Editing screens

The use of base is an interesting feature to share related information from the same screen. For example, if it is necessary for the frame in question to be loaded with information from the selected option within the menu of the frame in question, we can leave a tab intended only for a dashboard with value boxes and graphs, and another tab with technical information such as manuals, synoptics, tables, etc.

3: Create the dashboards

The stage of creating dashboards consists of the development of elements that presented all the desired monitoring, numerical data, graphs, maps, images and other forms of visualization.

On the home screen of the created application, on the right side, is the widget menu, accessible by the icon highlighted in image 11, this menu hosts a series of components for the creation of a monitoring screen, as indicated below:

Figure 11 - Application in editing mode

Iniciando a criação de tela, dentro do método edição, existem duas abas: WIDGETS e LAYOUT.

Starting the screen creation, within the editing method, there are two tabs: WIDGETS and LAYOUT.

In the Widgets tab, you can find several resources for creating dashboards, separated for WIDGETS and HTML EDITOR. In HTML EDITOR we have available a text and html editor useful for text customizations, and or call external resources by url. In WIDGETS we have a collection of drag-and-drop widgets, to be used within the main frame of the application. Implementation details and tips about these widgets can be accessed in our dedicated material. (Main internal widgets of the APP).

Finally, simply drag the html widgets or resources to the central frame. These features can be configured statically, or receive the parameters at runtime through the choices made in the menu filter. For example, you can configure the "value box" widget to show the values identified for a specific tag, or configure it with an "alias" so that the tag of interest is passed to the widget according to what is chosen in the side menu or higher.

4: Make the finishing touches

At the end of the app creation you may feel the need to change the colors, or the menu structure chosen in the first steps in AppBuilder. To make these new changes, go to the LAYOUT tab, already presented in the previous section.

In this tab the following settings are displayed

• Floating Submenu: This option allows you to view the submenus in a floating balloon.

• Expanded Menus: This option allows you to default on expanded visibility of submenus.

• Themes: Applies some pre-defined theme.

• Color: allows you to change the color scheme of the application.

• Default: allows you to change the order of colors in menus.

• Background: This option offers the possibility to change the background of applications with custom colors, or use an image as background. These changes do not apply to frames.

When you finish configuring menus and widgets, save your work using the "save" button. The "save coma" option allows you to save all your work in a new application, and you need to give it a new name.

Extra tip: whenever you open some app or tool on the thingable! an icon set is available in the upper right corner, details in figure 12. These icons can be especially useful in the editing process. You will notice that a portion of the window space in the browser is filled with the platform tabs and the browser toolbar itself. Thus, maximizing viewing in the browser can help.

Figure 12 – Viewing features

Authors: Angelo Guimarães

Lucas de Miranda

Pedro Henrique