Script Model
In your applications the data flows into UI element via property bindings and flows out of UI element through event bindings. For different UI controls you can define different types of events. For example, a Button-Single can initiate a process in the event of click, and a Selector-Radio can call a function. You can bind the events to various UI controls that you add to your app views using Script designer with a low code / Zero code approach.
You can design a script model in association with the page life cycle events or certain UI controls.
The script model is a graphical representation of one or more actions to perform in the event of specified action.
Perform the following steps:
- From your app view open the script designer in one of the following ways:
- To associate the script model to your app view, click Page Life Cycle .
- To associate the script model to a UI control, select the UI control, go to the Settings tab, and click Actions.
- In the Script designer select the event as applicable from the Select Events drop-down list.
- Undo and Redo: Undo and redo your last or previous action or edit. You can use this option only if you have not saved the view since making the last changes.
- Reset Scroll: Resets the script model to the position where the start event is placed if you have scrolled away on the canvas.
- Clear: Removes all the elements added to the canvas.
- Full View: Expands the script model to open in the full browser window for ease of view. Click the Full View icon again to resume to normal view.
- Add the following elements in the same order:
- Start: The start event is the first step in a script model that initiates the specified actions.
- Task: The task represents the actions to perform based on the specified event associated with the corresponding view or UI control. For different UI controls different events can execute the script model. For example, a button can execute the associated script model in the event of On Click, and a card can execute the associated script model in the event of On Hover. In any script model you can use the following types of tasks:
- Name: Enter a name for the web service task.
- Datasource: Select the name of the datasource that includes the web service method that you want to execute.
- Method: Select the web service method that you want to execute.
- Attributes: Enter key-value pairs of the function attributes that you selected. Attributes are the columns that you specified in the corresponding datasource. The value in the key-value pair can be text or reference.
If the value contains only text that you want to display it as is in runtime of the app, enter the text within ' ' (single quotes). For example, 'Welcome to App World'.
If the value is a reference, enter only the variable name. For example, User where the User is a reference variable specified in a UI control. - Advanced: Specifies the application related information that you want to pass to the webservice for processing along with the URL of the Method. Enter the key-value pairs to form the required headers.
- Response Reference: Enter a value to store the results returned by the webservice. You can bind the results to a UI control using the following notations:
- response.data.results for the results returned by a database datasource
- resonse.data for the results returned by a webservice API datasource.
- Name: Enter a name for the function call.
- Function Name: Enter a name for the custom function that you want to write.
- Function Body: Click the text link and enter your custom script in the script designer. To access a reference of any control, use the reference variable in { } (curly braces). For example, {response.age} > 18 ? {canVote} = true : {canVote} = false; where {response.age}, and {canVote} are the reference variables.
- Name: Enter a name for the process task.
- Select Process: Select a process model from the drop-down list that you have already created in your project.
- Parameters: Enter key-value pairs associated with the corresponding UI control. The value in the key-value pair can be text or reference.
If the value contains only text that you want to display it as is in runtime of the app, enter the text within ' ' (single quotes). For example, 'Welcome to App World'.
If the value is a reference, enter only the variable name. For example, User where the User is a reference variable specified in a UI control. - Name: Enter a name for the route task.
- Select View: Select a different view to which you want to navigate the user.
- Name: Enter a name for the alert task.
- Choose Action: Select whether you want to display an Alert message or Toast message in the event of the specified action for the corresponding UI control.
- Name: Enter a name for the Open Dialog task.
- Select Page: Select the page that you want to open in the dialog window. You can select a view that exists in the current UI model only.
- Close on clicking anywhere outside the dialog?: Select this check box if you want to allow the users of your app to close the dialog window by clicking anywhere outside the dialog window on the app screen.
- Width: Enter a value to specify the width of the dialog window. You can specify the width in percentage (%) or pixels (px).
- Height: Enter a value to specify the height of the dialog window. You can specify the height in percentage (%) or pixels (px).
- Name: Enter a name for the SideNav Actions element.
- Id: Specifies the unique ID of the element.
- Choose Action: Select an action to perform when the corresponding UI element is operated. Following options are available:
- Open: Expands and displays the side navigation menu when the corresponding UI element is operated.
- Close: Closes and hides the side navigation menu when the corresponding UI element is operated.
- Toggle: Performs the toggle operation upon the side navigation menu when the corresponding UI element is operated. That means, expands and displays the side navigation menu if it is closed. Closes and hides the side navigation menu if it is closed.
- Name: Enter a name for the Loop Task.
- Loop Type: Select the type of loop. You can specify Continuous, Iteration, or List type of loop.
- The Continuous loop repeats the task sequentially until the exit loop is executed.
- The Fixed Iteration loop repeats the task only the specified number of times. Enter a value in the Number of Iterations field to specify how many times the task should repeat before the loop closes.
- The List is used to iterate over an array. Enter the reference variable value in the List Reference field.
- Iteration Index Name: Specify a variable to reference the loop iteration index.
- End: The end event is the last step in a script model that completes the flow of specified actions.
- Click Validate Model. Each task that you added in the script model is validated and displays the validation errors if any. Update the details of the tasks as identified in the validation errors.
- Click Save after all the validation errors are fixed.
Connects to a web service and executes the available methods which are exposed by the web service. The results returned by the webservice can be passed through a reference.
The data in the webservice response can be accessed using the notation response.data.results as a JSON array.
In the script designer, insert a Web Service Task element and enter the following details:
Enables to add and execute a custom function. In the script designer, insert a Function Call element and enter the following details:
Connects to a process model that you have already created in your project and executes the same. In the script designer, insert a Process Task element and enter the following details:
Allows to navigate to a different app view within your current app. In the script designer, insert a Route Task element and enter the following details:
Displays an alert or a toast message. In the script designer, insert an Alert Task element and enter the following details:
If you select Alert, enter a title for the alert message in the Name field, enter the message that you want to display in the Enter Message field, and specify Callback Function Body.
The attribute of Callback Function Body is "result" which takes the value as 1 in case the user clicks OK, or takes the value as 0 in case the user clicks Cancel in the alert message.
If you select Toast, enter the message that you want to display as toast in the Enter Message field, and specify the duration in seconds to display the toast in the Enter Duration field.
For both Alert and Toast, the message can include text or reference variable or combination of text and reference variable in concatenated format.
When the message contains only text that you want to display as it is in run-time of the app, enter the text within ' ' (single quotes). For example, 'Welcome to App World'.
When the message contains text and a variable, enter the text within ' ' (single quotes) and the reference within { } (curly braces). For example, 'Hi {User}, your insurance claim is approved.' where User is reference variable specified in another UI control.
When the message contains only variable enter only the variable name. For example, User.
Opens the page in a dialog window. In the script designer, insert an Open Dialog element and enter the following details:
Closes the dialog window. In the script designer, insert a Close Dialog element and enter a name in the Name field.
Performs specified action on the Side Navigation Menu that you designed and added to the current UI model. In the script designer, insert a SideNav Actions element and enter the following details:
See Side Navigation Menu, for information about how to design side navigation menu.
Repeats the task sequentially until it is complete. In the script designer, insert a Loop Task element and enter the following details:
Stops the task being repeatedly executed and exits the loop. In the script designer, insert an Exit Loop element and enter a name in the Name field.
Exclusive gateway is a decision point that can adjust the path of a flow based on the specified conditions. In the script designer, insert an Exclusive Gateway element and enter a name in the Name field.
The script model is created successfully.
Optionally click Export to generate a script file in .JSON format. This file is downloaded to your local computer. You can use this file to create another script model and modify as required. Click Import to add the script model file that you exported previously.