JavaScript Guider

JavaScript Guider

JavaScript is the most important component of the ILLA Builder, which is the tool you use to build the data access and logic construction of your APP. Mastering how to call JavaScript, you have mastered the use of ILLA Builder.

When building your APP in ILLA Builder, you can use {{template syntax}} to write custom JavaScript statements for calling and manipulating data, or write JS code directly in the transformer.

​

Operation data

​

Accessing data on objects

In ILLA Builder you can enter JavaScript expressions in any text input box using the template syntax. Data objects are referable, and you can manipulate the data of all inserts, actions and transformers via JavaScript. For example, you can use {{textInput.data}} to access the content of a text input insert, {{action.data}} to access the data from an action database and {{transformer.value}} to access the data from a transformer.

We have added and modified the code mirror insert to the product, adapted it to the ILLA Builder programming environment, supported syntax highlighting and automatic indentation, and added detailed explanations of variables and functions that occur during programming, so that you can learn how to use ILLA Builder at low cost. After you have entered the object name, enter a dot. The prompt will contain all the properties of the object, the data type and a partial text description, so that you can identify the property to be accessed in no time.

​

Accessing numbers in arrays

When you need to access a value in a specific array, you can get the value by the position or subscription of the data you need to access.

const list = ['a', 'b', 'c']
return list[0] // Return the first value in list 'a'

​

View data

There are four locations to view data in ILLA Builder: the data workspace in the left-hand panel, the data prompt below the text box after entering a JavaScript expression, and the data display through the data insert to display the data.

​

Data workspace presentation

You can find the data workspace by opening the left-hand panel in the App editor, so the data is presented as structured JSON in which every property and list can be expanded and all data is visually displayed in the workspace.

​

Live preview of data input

When you call an action or transformer operation in the input box, the data for that operation will automatically pop up below the input box, and you can confirm that the data called is correct based on the information here.

​

Data presentation

The data display insert gives you the most intuitive view of the data. Simply drag and drop the component into the frame, enter the name of the corresponding data source in the data field, filter and arrange it, and you will have access to the data display information.

​

Transformer

You can write multiple lines of JS code in the transformer, and we recommend that you choose to write in the transformer rather than in double curly brackets. You can program JavaScript directly in the transformer as well as calling the data in the operation with the help of {{}}.

Click here for detailed usage of the transformer.