{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":589,"path":"api-reference/scripts/c_CatalogClientScriptCreation.md","title":"Catalog client scripts","bundle":null,"doc_type":null,"release":"australia","body":"\n# Catalog client scripts\n\nClient-side scripts can add dynamic effects and validation to forms. Scripts can apply to service catalog items or variable sets, allowing administrators to use the same functionality that is available on other forms.\n\nYou can use client side scripts to:\n\n- Get or set variable values.\n- Hide or display variables.\n- Make variables mandatory or not.\n- Validate form submission.\n- Add something to the cart.\n- Order something immediately.\n\n**Parent Topic:**[Client-side scripting](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/scripts/client-side-scripting-overview.md)\n\n## Catalog client script considerations\n\nWhen you create catalog client scripts, be aware of the following considerations.\n\n- Catalog client scripts run when a user orders an item from the service catalog. Catalog client scripts can also run when variables or variable sets for a catalog item are displayed when a user requests that item.\n- For a variable to be accessible using a catalog client script, it must have a variable name. Variables without names do not appear in the list of available variables.\n- When using standard client scripts on a Requested Item or Catalog Task form, make a note of fields with the same name as variables. If a table field and a variable of the same name are both present on a form, the table field is matched when it is accessed using a script. If this happens, specifically address the variable by naming it `variables.variable name`. For example: `g_form.setValue('variables.replacement', 'false');`\n- If you are using record producers to pass variables from the service catalog to other types of records, these variables are made visible in those records with a variable editor, such as the Change Variable Editor UI formatter on Change request forms. You can manipulate these variables using standard client script methods, such as `setDisplay`, `setMandatory`,`setValue`, and `getValue`.\n- Catalog client scripts can be used for catalog items included in a wizard.\n- You can use the `g_form.refreshSlushbucket(fieldName)` API to update a list collector variable.\n\n## Catalog client script differences\n\nCatalog client scripts are very similar to standard client scripts, with a few important differences.\n\n- Instead of selecting a table such as Incident for the script, select a catalog item or variable set. As your system may have a large number of catalog items, you should select a catalog item or variable set using a reference field instead of the choice list that the standard Client Script form uses.\n- When using an *onChange\\(\\)* catalog client script, it is linked to a particular variable instead of a field. The system automatically populates the variable name selection list with any named variables from the catalog item or variable set selected.\n\n## Create a catalog client script\n\nFollow this procedure to create a catalog client script.\n\n### Before you begin\n\nRole required: admin\n\n### Procedure\n\n1. Navigate to **All** > **Service Catalog** > **Catalog Administration** > **Catalog Client Scripts**.\n\n A list of current custom catalog client scripts appears.\n\n2. Click **New**.\n\n3. Fill in the fields, as appropriate \\(see table\\).\n\n\n
\n\nField\n\n\n\nDescription\n\n
\n\nName\n\n\n\nEnter a unique name for the catalog client script.\n\n
\n\nApplies to\n\n\n\nSelect the item type this client script applies to:- **A Catalog Item**: enables the Catalog item field.\n- **A Variable Set**: enables the Variable set field.\n\n\n
\n\nActive\n\n\n\nSelect the check box to enable the client script. Clear the check box to disable the script.\n\n
\n\nUI Type\n\n\n\nWhether to apply this to desktop, mobile, or both.- Desktop: The script runs only in the desktop Core UI.\n- Mobile / Service Portal: The script runs only in mobile, portal, or configurable workspace UIs.\n- All: The script executes across all available UIs.\n\n\n
\n\nScript\n\n\n\nEnter the client script that should run on the service catalog item.\n\n
\n\nType\n\n\n\nSelect when the script should run, such as **onLoad** or **onSubmit**.\n\n
\n\nCatalog item or Variable set\n\n\n\nSelect a catalog item or variable set from the list. The field name and options available depend on the selection in the **Applies to** field.\n\n
\n\nApplies on a Catalog Item view\n\n\n\nSelect the check box to apply the catalog client script to catalog items displayed within the order screen on the service catalog. Available in the requester view.\n\n
\n\nApplies on Requested Items\n\n\n\nSelect the check box to apply the catalog client script on a Requested Item form, after the item is requested. Available in the fulfiller view. See [VEditor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/servicenow-platform/service-catalog-variable-editor.md) .\n\n
\n\nApplies on Catalog Tasks\n\n\n\nSelect the check box to apply the catalog client script when a Catalog Task form for the item is being displayed. Available in the fulfiller view. See [VEditor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/servicenow-platform/service-catalog-variable-editor.md) .\n\n
\n\nApplies on the Target Record\n\n\n\nSelect the check box to support the catalog UI policy on a record created for task-extended tables via record producers. See [Default variable editor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/servicenow-platform/service-catalog-variable-editor.md) .\n\n
4. Click **Submit**.\n\n\n## Catalog client script examples\n\nExamples of client scripts to perform common actions.\n\n### Get the value of a variable\n\nUse the following syntax to obtain the value of a catalog variable. Note that the variable must have a name. Replace `variable_name` with the name of the variable.\n\n```\ng_form.getValue('variable_name');\n```\n\n### Restrict the number of characters a user can type in a variable\n\nThis is an example of a script that runs when the variable is displayed, rather than when the item is ordered.\n\n```\nfunction onLoad(){\n var sd = g_form.getControl('short_description');\n sd.maxLength=80;\n}\n```\n\n"}}