The GlideForm (g_form) API in Embedded Widgets

API ClientScript g_form servicenow ServiceNowDev serviceportal

Ever wonder how to embed a Service Portal widget into a form and have it access fields in the parent form? GlideForm to the rescue!

GlideForm is a client-side JavaScript API that provides methods to customize forms. Use the g_form object to access all of the GlideForm API methods.

When using the Service Catalog variable types Macro or “Macro with Label”, you can embed a Service Portal widget into the form. Within the client controller of the embedded widget you have access to both g_form and the field object by accessing them from the page object on $scope:

  • $scope.page.field
  • $scope.page.g_form

FEATURES

GlideForm supports over 50 different methods of accessing and manipulating form fields, in this quick tutorial, we will cover just a few of the most frequently used functions:

  • getValue()
  • setValue()
  • getFieldNames()
  • setVisible()
  • setReadOnly()
  • setMandatory()

You can view the full list of supported g_form methods here.

WALKTHROUGH

To get started:

  1. Add a new variable with type “Macro” to a catalog item with a few existing variables
  2. From the “Type Specifications” tab, click on the Widget reference field picker and select “New”
  3. Name your widget and submit
  4. Navigate to “/sp_config/?id=widget_editor” and select your newly created widget
  5. Paste in the following code.

HTML:

Client Script:

  1. Update the field names (FIELDNAME) in the HTML to match some fields from your form
  2. Now if you view the catalog item in the portal, you should see your widget embedded in the form displaying 5 buttons.

DEMO

 

FURTHER READING

14 comments

  1. Hello Nathan, thanks a lot. This is very helpful for some of our requirements. Maybe it would be good to refer to this older post: https://serviceportal.io/embedding-widgets-in-service-catalog/

    It would be great if you could add some samples how to interact with “default” Catalog Item varaibles and react “inside” the widget on changes of these varaiables values. I saw solution using recordWatch(), but cannot find it anymore.

    Thx a lot

    1. I will typically use $scope.$watch and g_form to achieve this functionality. i.e.

      $scope.$watch(function() {
      return $scope.page.g_form.getValue(‘FIELDNAME’);
      }, function(value){
      //do something
      });

  2. Hi Nathan,

    Does the functionality supports in Kingston.

    As I have used your code and changed the color of “variable” name on catalog item, on-click of button in london version.
    And Did same functionality in “Kingston”, I am unable to get results as expected.Their is no change in the color.

    Tried this code in london working fine but not in kingston:

    HTML code:

    Toggle

    Client Controller:

    function($scope){

    var field = $scope.page.field;

    $scope.colorChange = function(field){

    var change = = document.getElementById(field);
    change.style.color=’red’;

    }

    }

    1. If you console.log the fields list you will see that the field names changed in London to using “IO:SYS_ID”

    2. The reason your code doesn’t work is in the auto generated ID, you will see semicolon (:). You need to scape it by adding \ or remove it…

  3. Hi Nathan,

    Need your help on what is $private in $scope.page.g_form.$private.emit.on(‘submit’, callback);
    Is there any place where we can see what variables we have on $private

  4. Hi,
    I need suggestion on portal requirement.
    I calling a modal on submit , where user will provide input which I need to set in one of the field.
    g_form.setValue() is not working from client controller.
    Could anyone help me how to set value from client controller?

Leave a Reply to Rupam Cancel reply

Your email address will not be published. Required fields are marked *