DEV Community

Cover image for Glide Like a Pro: Building Dynamic Forms with Glide Form
Sophia Semga
Sophia Semga

Posted on

Glide Like a Pro: Building Dynamic Forms with Glide Form

In our previous article, we delved into the realm of JavaScript, particularly focusing on APIs in ServiceNow, with a spotlight on Glide Record and Glide Ajax. Let’s quickly recap our journey, shall we? 😊

Glide Ajax, a client-side API, facilitates asynchronous calls to server-side scripts (such as script includes and business rules) from client-side scripts (UI policies, Catalog UI policies). It acts as a bridge enabling seamless integration of server-side functionalities like database queries without causing page refreshes.

On the flip side, Glide Record, a server-side API, is crucial for efficient database operations. It handles operations such as queries, updates, and deletions of records through server-side scripts (like script includes and business rules).

In our exploration, we delved deeper into the specific APIs associated with each function, their methods, and the tasks these methods perform. However, one lingering mystery still remains: the origin of the term “Glide”—perhaps hinting at the smooth user interface development experience?

Today, our focus shifts to another powerful and informative JavaScript class: Glide form.

Glide form, a client-side script API, plays a vital role in developing and customizing user interfaces. It allows developers to manipulate form elements, set and retrieve field values, and interact seamlessly with the user interface.
Accessed through the g_form global object in client-side scripts like UI policies and client scripts, Glide form’s methods are tailored for making precise and custom changes to form views of records.

Here's a glimpse into some key methods:

Form Element Manipulation:
  • g_form.setValue(fieldName, value): Sets the value of a field on the form. Image description
  • g_form.getValue(fieldName): Retrieves the value of a field on the form. Image description
  • g_form.setDisplay(fieldName, display): Sets the display value of a field on the form. Image description
UI Interaction:
  • g_form.hideRelatedList(list-TableName): Hides a related list on the form. Image description -g_form.showRelatedList(list-TableName): Shows a hidden related list on the form. Image description -g_form.addInfoMessage(message): Adds an informational message to the form. Image description
Set Field Properties:

-g_form.setMandatory(fieldName, isMandatory): Sets a field as mandatory or optional.
Image description
-g_form.setReadOnly(fieldName, isReadOnly): Sets a field as read-only or editable.
Image description
-g_form.setVisible(fieldName, isVisible): Sets a field as visible or hidden.
Image description

Ensuring Data Integrity/Form Validation:

-g_form.validate(): Validates all visible fields on the form and returns true if they are all valid; otherwise, returns false. (ideal for ensuring complete forms before submission).
Image description

But that’s just the tip of the iceberg!!
Glide form API encompasses many additional methods, such as returning HTML elements on forms to facilitate specific functions like applying custom CSS styles based on conditions or validating form fields using logic. These methods allow you to:
-getElement(): Returns HTML element of any elements on the current page/form.
Image description
-g_form.getElement(): Returns HTML elements of a specific field name on the form, useful for accessing HTML elements representing a form field.
Image description
-g_form.getHelpTextControl(): Retrieves the help text control associated with a form field, which is used to display additional information/instructions associated with a field.
Image description

These are just a few of the many different methods Glide form API has to create dynamic and user-friendly forms.
However, while these methods are incredibly powerful, they must be utilized in line with best practices to ensure maintainability and compatibility within the platform. More of these methods can be found here at:[https://docs.servicenow.com/bundle/washingtondc-api-reference/page/app-store/dev_portal/API_reference/GlideForm/concept/c_GlideFormAPI.html]

Real-World Applications
Glide forms empower you to streamline user interactions within ServiceNow applications. Here are some examples:

  • Customizing incident forms: Hide irrelevant fields based on the incident category.

  • Enhancing user input processes: Make specific fields mandatory based on selections in other fields.

  • Building dynamic forms: Create forms that adapt to user input and context.

Glide forms offer immense power for crafting user-friendly and dynamic forms in ServiceNow. By mastering these methods and best practices, you can elevate your development skills and create amazing experiences for users.
Stay tuned for more insights on JavaScript APIs within the ServiceNow platform. We’ve merely scratched the surface, and there’s so much more knowledge waiting for us to explore.

Until our next “glide” (or should I say “dive”) into the depths of JavaScript APIs,

####Happy coding! 😄

.Learn more about ServiceNow GlideForms Here:
https://docs.servicenow.com/bundle/washingtondc-api-reference/page/app-store/dev_portal/API_reference/GlideForm/concept/c_GlideFormAPI.html

.Learn More About ServiceNow APIs:
https://docs.servicenow.com/bundle/washingtondc-api-reference/page/build/applications/concept/api-reference.html

.Learn More about ServiceNow ClientSide Scripting:
https://docs.servicenow.com/bundle/washingtondc-application-development/page/script/client-scripts/concept/client-scripts.html

Top comments (0)