--- title: "Scripting" slug: "apex2-scripting" updated: 2025-12-23T11:53:48Z published: 2025-12-23T11:58:49Z canonical: "help.symphonysummitai.com/apex2-scripting" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.symphonysummitai.com/llms.txt > Use this file to discover all available pages before exploring further. # Scripting ### What is Scripting? Using the **SCRIPTING** icon ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/script icon.png) on the **Quick Action Bar**, the Administrators can now write their own **Java Script,** **CSS**, and **HTML** codes to customize the fields. This icon is available for all the pages of the Application. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/script.png) Figure: SCRIPTING icon on Quick Action Bar ### How to Enable Scripting? 1. Select the **Enable Scripting** check box under the **SCRIPTING** section of the **ROLE TEMPLATE - OTHER CONFIGURATION** page (**Admin > Basic > Users > Role Template >** Select a Template from the **LIST** section > On the **ACTIONS** panel, click **OTHER CONFIGURATION**). 2. The Scripting functionality option becomes available on the **MY PROFILE.** 3. The individual users can show or hide the **SCRIPTING** icon on the Quick Action Bar by selecting the **Show/Hide Scripting Icon on Quick Action Bar** check box available under the **Scripting** tab of the **MY PROFILE** pop-up page (**Quick Action Bar >** Click **PROFILE** Picture **>** Select **Edit Profile >** Select **Scripting** section **>** Select **Show/Hide Scripting Icon on Quick Action Bar** check box). 4. The users need to log out and log in again into the Application to view the **SCRIPTING** icon. By default, the **SCRIPTING** icon is hidden. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/enable scripting.png) Figure: MY PROFILE: Scripting ### About SCRIPTING - PAGE NAME (TENANT) Page When you click on the **SCRIPTING** icon ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/script icon.png) present on the **Quick Action Bar**, you are redirected to the **SCRIPTING - PAGE NAME (TENANT)** page where you can write your own **Java Script**, **CSS**, and **HTML** codes to customize the fields present on the page. For more information about the fields present on the **SCRIPTING - PAGE NAME (TENANT)** page, see the Field Description table. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/scripting sreen.png) Figure: SCRIPTING - PAGE NAME (TENANT) page ## Field Description The fields present on the **SCRIPTING - PAGE NAME (TENANT)** page are explained in the following table: | **Field** | **Description** | | --- | --- | | **CONTROL** | | Drop-down list | Under the **CONTROL** section, a drop-down list, consisting of controls (having IDs and text) that can be customized, are present. Select a preferred Control, for which you want to write the scripts for, from the drop-down list. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/control.png) Figure: CONTROL drop-down list | | PROPERTIES | Following are the two tabs: **PROPERTIES** and **EVENTS**.![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/poperties.png) Figure: SCRIPTING - PAGE NAME (TENANT) page: PROPERTIES and EVENTS tabs Under the **PROPERTIES** tab, there are three fields: - **Control ID** - The Control ID is the ID of the control selected from the CONTROL drop-down list. - **Associated Control ID** - The Associated Control ID is the ID of the secondary controls associated with the primary control. For example, in the **Description** field of the **NEW INCIDENT** page, the Description field is the primary control and the text area associated with the **Description** field is the associated control. - Apply Changes: If selected, the changes made under the Properties tab for the selected control are applied. > [!NOTE] > Note > > By default, the **Apply Changes** check box is not selected. The properties changes of a control will be displayed on the page only if the **Apply Changes** check box is selected. Otherwise, the changes made to the properties of the control are ignored on a page. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/control1.png) Figure: PROPERTIES tab: Control ID, Associated Control ID and Apply Changes | | EVENTS | Under the **EVENTS** tab, you can write the **Java Script** for the **Events** of the selected **Control**. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/events.png) Figure: EVENTS tab | | DESCRIPTION | Double-click on the fields present in the **PROPERTIES** and **EVENTS** tabs to view the description under the **DESCRIPTION** section. | | Active | If this check box is selected, the current scripting becomes active for the selected Tenant and is applied to the page. | | **AREA FOR ADDING SCRIPTS** | | JS | You can add or write your own **Java Script (JS)** codes, under the text area provided below the **JS** section. > [!NOTE] > Note > > - The data specified between the hash tags (#), for example, **#url#**, are called user inputs, in which the sensitive information is passed. Any sensitive information that is passed to the API is mentioned inside the user inputs (#). > - When you click **SUBMIT**, and if the script contains data within the user inputs(#), a popup containing fields, for which inputs are required from the user, is displayed. So, the user needs to provide the values and click **SUBMIT.** | | CSS | You can add or write your own **CSS** codes, under the text area provided below the **CSS** section. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/css.png) Figure: CSS tab | | HTML | You can add or write your own **HTML** codes in the text area provided under the **HTML** tab. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/HTML.png) Figure: SCRIPTING - PAGE NAME (TENANT) page: HTML Text Area The following table describes the fields on the **SCRIPTING - PAGE NAME (TENANT)** page: \| **Fields** \| **Description** \| \| --- \| --- \| \| ADD NEW \| Click **ADD NEW** to add new HTML code. \| \| Show List \| The added HTML codes are displayed in a list. \| \| Save \| The HTML codes are saved and displayed in **Show List** temporarily. **Note:** To save the HTML code permanently in the database, click **SUBMIT**. \| \| Hide List \| The HTML codes are hidden from the list. \| \| **Actions** \| \| ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/edit icon(2).png) \| Click the ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/edit icon(3).png) icon to edit the HTML code from the list. \| \| ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/eye icon.png) \| Click the ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/eye icon.png) icon to preview the HTML code. \| \| ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/del icon(8).png) \| Click the ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/del icon(8).png) icon to delete the HTML code from the list. \| **To add a new HTML code:** 1. Click **ADD NEW** under the **HTML** tab on the **SCRIPTING - PAGE NAME (TENANT)** page. 2. Add the HTML codes in the text area provided below the HTML section. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/html1.png) Figure: SCRIPTING - PAGE NAME (TENANT) page: HTML Text Area 3. Click **Save** to add your HTML code to the HTML code list. 4. Click **SUBMIT** to save the data permanently in the database. > [!NOTE] > Note > > - Click **Save** to save the HTML code temporarily. If the page is refreshed, the data is lost. > - Adding a new HTML code without saving the existing HTML code will discard the unsaved HTML codes. 1. Click **Show List** to view the saved HTML codes. 2. Click **Hide List** to go back to the last edit. > [!NOTE] > Note > > - By default, the HTML Codes with dynamic id (dscript_html_0) are not displayed on the page. The user must write the JS for appending the HTML, only then the HTML block is displayed on the page. > - The unique dynamic id (dscript_html_0) should not be used by the Administrator while writing the HTML Codes. Refer Quick Help to see examples of how to refer dynamic id (dscript_html_0) in JS | | **Fields** | **Description** | | ADD NEW | Click **ADD NEW** to add new HTML code. | | Show List | The added HTML codes are displayed in a list. | | Save | The HTML codes are saved and displayed in **Show List** temporarily. **Note:** To save the HTML code permanently in the database, click **SUBMIT**. | | Hide List | The HTML codes are hidden from the list. | | **Actions** | | ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/edit icon(2).png) | Click the ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/edit icon(3).png) icon to edit the HTML code from the list. | | ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/eye icon.png) | Click the ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/eye icon.png) icon to preview the HTML code. | | ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/del icon(8).png) | Click the ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/del icon(8).png) icon to delete the HTML code from the list. | | Status | - **Maintenance:** If selected, the customized changes on the page are applicable to the users who has done the Scripting and not applicable to the other users without access. - **Published:** If selected, the customized field changes are available to all users. | | Version | Each time you make customizations on the selected page and submit the changes, it is saved as a different version in the application. You can select a preferred version based on your requirement from the **Version** drop-down list and click **OK**. You can modify an already existing version, and then save it as a new version. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/version2.png) Figure: Version drop-down list | | ![Quick Help icon](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/scripting-image-4eqk2b04.png) Quick Help icon | The **Quick Help** icon ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/quick help.png) displays information related to the actions that can be performed on the **SCRIPTING** page. For example, if you want to perform the following action: How to invoke Web Service? The **CODE SNIPPET** is provided in the **QUICK HELP** pop-up. **Note:** The information available in these tabs are categorized and displayed based on the code type. Now on the **QUICK HELP** pop-up page, the search information is displayed under the three tabs as follows: - **JS:** When the End User selects the **JS** tab and performs a search, the search information in JS, CSS, and HTML is displayed. - **CSS:** When the End User selects the **CSS** tab and performs a search, the search information in the CSS and HTML is displayed. - **HTML:** When the End User selects the HTML tab and performs a search, the search information in HTML is displayed. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/quick help1.png) Figure: Quick Help pop-up page | ### Example: How Scripting Can be Used ? **Scenario** Consider that you want to change the name of the **Description** field present on the **NEW INCIDENT** page. ##### Steps To change the name of the **Description** field present on the **NEW INCIDENT** page, perform the following steps: 1. Click **Incident** > **User** > **New Incident**. The **NEW INCIDENT** page is displayed. 2. On the **NEW INCIDENT** page, select a preferred **Tenant**. 3. Click **SCRIPTING** icon on the **Quick Action Bar**, You are redirected to the **SCRIPTING - NEW INCIDENT (INFORMATION TECHNOLOGY)** page. 4. On the **SCRIPTING - NEW INCIDENT (INFORMATION TECHNOLOGY)** page under the **CONTROL** drop-down list, select **Description**. 5. You can now see the Control ID and Associated Control ID of the Description field in the **PROPERTIES** tab. 6. Under the **PROPERTIES** tab, in the text area of the Label Text field, edit the name of the Description field. In this example, the field name is changed from **Description** to **Details_Test**. 7. Select the **Apply Changes** check box. > [!NOTE] > Note > > If you want to configure events for the **Description** field, click the **Events** tab and select the preferred events. > > 1. Select the **Active** check box if the **Active** check box is not selected. > 2. Select the **Status** as **Published** and click **SUBMIT**. > 3. Go to the **NEW INCIDENT** page and check whether the changes are applied and visible on the **NEW INCIDENT** page. > 4. You have successfully changed the name of the **Description** field present on the **NEW INCIDENT** page. ### Application Upgrade - Scripting Impact There is no impact to the JavaScript codes written using the Scripting functionality when the application is upgraded to a later version. However, if there are changes on the Application interface in the later version where the fields referred in the JavaScript code are modified (fields removed, data type changed, etc.), there will be an impact on such JavaScript codes. Such JavaScript codes need to be validated and modified (as required).