7 Replies · Latest reply on Jun 8, 2015 10:36 AM by James Pisello

    Icons for g_form.addDecoration() Method

      Theres' a nice new method in Fuji for adding field decorations - GlideForm (g form) - ServiceNow Wiki.  I was just wondering if anyone knew of a way to add our own custom icons to the list of available ones:

      ServiceNow.png

       

      I was thinking of replacing the OOB VIP highlighting method with this "safer" method so I wanted to add a B/W version of the VIP icon to this list.

       

      Thanks

      *** Please Like and/or tag responses as being Correct.
      And don't be shy about tagging reponses as Helpful if they were, even if it was not a response to one of your own questions ***

        • Re: Icons for g_form.addDecoration() Method
          Shahid Shah

          Hi Jim

           

          Unfortunately, the new UI that was introduced in Fuji is a lot more restricted than what we were used to in the pre-Eureka releases.

           

          What I can advise you is that the symbols are based on Web Fonts (in this case retina_icons) and the styling is managed in the internal CSS. So you are restricted to the available character set by using the icon-name format for the class name:

          <i class="icon-name"></i>

           

          Example icons are:

          icon-cart

          icon-catalog

          icon-edit

           

          To get a good idea on the available icons you can inspect retina_icons.css:

          https://instancename.service-now.com/styles/retina_icons/retina_icons.css

           

          or you can look at a "preview" page for the icon by navigating to:

          https://instancename.service-now.com/styles/retina_icons/retina_icons.html

           

          Beyond that, from the top of my head, I can only think of uploading your own images and use a UI Script to look for your made up classes (e.g. my-icon-vip) that would replace them with the uploaded image and/or play with the styling of the field_contributions class for more control over the retina_icons. Of course this is not using a "safe" route and would be your own customisation.

           

          Hope that helps

          Shahid

          4 of 4 people found this helpful

          *****
          Did I help? Please like, tag helpful or mark it as the correct answer. Thanks!

          • Re: Icons for g_form.addDecoration() Method
            ravali yadavalli

            Thanks Jim. One quick question, how can we add the icon next to some of the incident forms, and display them if some of the field value changes ?

              • Re: Re: Icons for g_form.addDecoration() Method
                James Pisello

                Hi Ravali,

                 

                You should be able to apply these icons to fields on the incident form by using an onChange client script.

                 

                Let's say you wanted to display the star icon next to the Caller ID field if the incident is critical. Create an onChange client script that monitors the Priority field and decorates the Caller id field under the proper circumstances:

                 

                function onChange(control, oldValue, newValue, isLoading, isTemplate) {
                  if (isLoading || newValue == '') {
                      return;
                  }
                  try {
                    if(newValue == 1) { //Critical priority
                      g_form.addDecoration('caller_id', 'icon-star', 'P1 Incident'); //display the star icon next to the Caller ID field
                    }
                  }
                  catch(error) {
                  jslog('>>>Runtime error: ' + error);
                  }
                }
                
                

                Jim Pisello
                Managing Consultant | Crossfuze
                crossfuze.com