UI Script

The UI Script DocType in TechMaju allows developers to create and manage custom JavaScript scripts that can be applied to forms, lists, and child tables to extend and enhance the functionality of the TechMaju application. These scripts enable the system to execute JavaScript on the client (web browser) when client-based events occur.

Understanding the UI Script DocType

Purpose: The UI Script DocType is designed to enable the customization of user interfaces within the TechMaju platform. It allows developers to run JavaScript on the client (web browser) in response to client-based events, thereby dynamically manipulating forms, lists, and child tables.

Function: This DocType provides a centralized place to manage JavaScript code that can be executed in the context of various UI elements. UI scripts can be applied to forms, lists, or child tables, enabling a wide range of custom behaviors and interactions based on client-side events. These include:

Setting the value in one field based on the value in other fields
Modifying the options in a choice list based on a user's role
Displaying messages based on a value in a field

Role Required

TM Core Developer: Can create, write, and delete UI Policies.

UI Script Fields

Field	Description
Name	The name of the UI Script.
DocType	The DocType to which the script will be applied.
Application	The application where the script will be used.
Active	A checkbox to activate or deactivate the script.
Apply To	The UI element to which the script will be applied: Form List Form (Child Table)
Form Event	The event on the Form view that triggers the script: Setup Before Load On Load Refresh On Load (Post Render) Validate Before Save After Save Before Submit After Submit Before Cancel After Cancel Timeline Refresh Field Change
List Event	The event on the List view that triggers the script: On Load Refresh Before Render Primary Action Format Field
Child DocType	The child DocType to which the script will be applied (if applicable).
Child DocType Event	The event on the Child DocType that triggers the script: Form Render Refresh Before Remove After Remove On Add On Move
Script (JavaScript)	The JavaScript code that will be executed.

Form Events

Form Event	Description
Setup	Triggered once when the form is created for the first time.
Before Load	Triggered before the form is about to load.
On Load	Triggered when the form is loaded and is about to render.
Refresh	Triggered when the form is loaded and rendered.
On Load (Post Render)	Triggered after the form is loaded and rendered.
Validate	Triggered before before_save.
Before Save	Triggered before save is called.
After Save	Triggered after form is saved.
Before Submit	Triggered before submit is called.
After Submit	Triggered after form is submitted.
Before Cancel	Triggered before cancel is called.
After Cancel	Triggered after form is cancelled.
Timeline Refresh	Triggered after form timeline is rendered.
Field Change	Triggered when the value of fieldname is changed.

List Events

List Event	Description
On Load	Triggered when the list is loaded and is about to render.
Refresh	Triggered when the list is refreshed.
Before Render	Triggered before the list is rendered.
Primary Action	Triggered when the primary action button in the list is clicked.
Format Field	Triggered when a field in the list is formatted.

Child DocType Event

Child DocType Event	Description
Form Render	Triggered when a row is opened as a form in a Table field.
Refresh	Triggered when the child table is refreshed.
Before Remove	Triggered before a row is removed from the child table.
After Remove	Triggered after a row is removed from the child table.
On Add	Triggered when a new row is added to the child table.
On Move	Triggered when a row is moved within the child table.

Procedure

Navigate to Develop > UI Script.
Adding a New UI Script:
- Click on '+ Add UI Script' to open the creation form.
- Fill in the required fields: Name, DocType, Application, and Script (JavaScript).
- Select the appropriate value for 'Apply To' (Form, List, or Child Table).
- For 'Form' and 'List', select the corresponding event that will trigger the script.
- For 'Child Table', select the child DocType and the event that will trigger the script.
- Enter the JavaScript code in the 'Script (JavaScript)' field.
Configuring the UI Script:
- Adjust the JavaScript code as needed to fit the specific requirements of the DocType and the UI element.
Saving and Viewing the UI Script:
- Click on 'Apply' to save the UI Script.
- The script will be executed in the specified context (Form, List, or Child Table) whenever the corresponding UI element is loaded or the specified event occurs.

Best Practices

Test the JavaScript code in a development environment before applying it to production.
Keep scripts modular and reusable to maintain clean and manageable code.
Regularly update and review scripts to ensure compatibility with new versions of the TechMaju platform.
Document the purpose and functionality of each script within the code to aid future maintenance.