ILLA home page
  1. App editor

​

The APP editor is the interface to develop the application and consists of the following main parts:

  • Toolbar
  • Frame
  • Action editor
  • Data workspace
  • Insert
  • Inspect
editor

​
Toolbar

The Toolbar is located at the top of the APP Editor which is used mainly to configure the APP and can be used for the following tasks：

  • Click on the ILLA icon on the left to return to the home page.
  • View APP information and save status.
  • Show/hide items left, right, lower panel.
  • Adjusting the scaling of items.
  • Show all current developers of the APP.
  • Alerting the APP to current bug status.
  • Share the APP with other developers.
  • Running the APP.

​
More features are coming soom

  • Import APPs from json.
  • Reproduction APPs.
  • Export APPs in json format.
  • Select the desired APP version.
  • View the edited history.
  • Reload all actions.

​
Frame

Frame is the area of the APP where you can edit the graphical interface of the APP. You can drag and drop inserts into the frame from the inserts panel on the right hand; you can also select inserts that have been placed into the frame and use the mouse to drag and drop to modify the position and size of the inserts.

When you are dragging and dropping inserts or modifying their size, a dashed square will appear in the background of the frame to help you to arrange the inserts neatly in the frame. When you encounter overlapping inserts while dragging and dropping, ILLA Builder will give priority to the insert you are moving and automatically move the blocking insert out of the way for you.

​
Preview

The preview toggle button is located in the top right corner of the frame . When clicked, the editor will enter preview mode, the lower left and right panels will be hidden and the inserts in the frame will not be modified, all inserts will be presented in front of you in 1:1 size.

Browsers supported

We recommend that you open ILLA Builder in Google Chrome.

​
Action Editor

The Action Editor is located below the frame and is the area where you write code to interact with data from resources. In this area you can find created operations, select the current operational resource, write query statements and set up transformers.You can edit the query statement in the action editor and when you update the query statement, the APP editor will automatically update your action results.

When entering SQL action statements, you can choose to use SQL mode to edit them via plain code, or you can choose GUI mode to modify them under the action framework we give you to quickly complete the action editing.For detailed tutorials, please see the operating documentation.

​
Action List

The Action list is located on the left hand side of the configuration panel, where you can find the action you need to use and modify it in the edition editor.You can also add a new action here, see details of the creation process.

​
Data Workspace

The Data Workspace is located in the panel to the left of the frame, where you can view the inserts, actions and global status of the editor, all displayed in Json format. You can also edit the data by selecting it in the workspace or delete it by clicking on the More settings button.

​
Insert

The Insert is located in the panel to the right of the frame, and you can move the insert to the frame by dragging and dropping it with the mouse. You can find the insert you need by insert type, or you can search for it and find it quickly.

​
Inspect

Inspect is located in the panel to the right of the frame. When you select an insert in the frame or data workspace, the panel to the right will automatically switch to the insert page. From this page you can set variables, update the insert name, create event handlers or perform an insert delete operation. The toolbar of the insert will also be set differently for different inserts, so that you can change the content of the different inserts.