Making a Clickable Link Field as a Variable - ServiceNow - InterWorks

Making a Clickable Link Field as a Variable – ServiceNow

In this article, we will explain how to create a variable into the catalog item to be an input field for URL with the possibility to lock and unlock the field. The expected behavior is the link to be clickable when the field is locked. The ability to lock and unlock the field should be possible only in the catalog item form. When the RITM (Request and Requested Item) is created and variables are shown into the RITM’s form the link should be clickable and the possibility to unlock it, should not be available.

Maintain Item

Maintain items is an application module that lists a few types of request items like catalog item, record producer, standard change templates, software catalog, hardware catalog, etc. All of these are extended from the base Catalog Item (sc_cat_item) table and used to request fulfillment from your service catalog.

Request and Requested Item (RITM)

When a user orders from the catalog, they add all the items to their cart. Let’s say they are ordering a phone, a PC, and a monitor at the same time. These items are added to the cart. They submit this request containing these three items and a request is generated.

The request is the top-level record for this order, it is the container the requested items are included under. The items ordered are the requested items.

The catalog tasks are under each requested item and are assigned to fulfillers to complete any work needed to get the requestor the items they have requested.

Making the field

Fist of all we need to create a variable of type URL into the maintain item.

  • The next step is to create an UI Macro to add the functionality that we want to the URL variable. The UI Macro would be based on Prototype JS.
  • When the UI Macro is created, it should be added as a variable of type Macro into the maintain item.
  • A prototype is an object that is associated with every functions and objects by default in JavaScript, where function’s prototype property is accessible and modifiable and the object’s prototype property (aka attribute) is not visible.
  • First, we will import a link for the style and use the classes font-awesome.min.js, and a script for manipulating the functionality of the field prototype.min.js.

<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”
integrity=”sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=”anonymous”></link>
 <script type=”text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js”></script>

  • Now we need to override some of the classes for our own purposes. This is shown in the picture below.

<style>
                                                .marginbottomBottom {
                                                margin-bottom: 5px;
                                                }
                                                .hideElement{
                                                display: none;
                                                }
                                                .fa-unlock {
                                                                display: inline-block;
                                                                position: absolute;
                                                                top: -71px;
                                                                right: -5px;
                                                                background-color: #ffffff !important;
                                                                z-index: 1000;
                                                }
                                                .fa-lock {
                                                position: absolute;
                                                    top: -50px;
                                                                                right: -5px;
                                                background-color: #ffffff !important;
                                                z-index: 1000;
                                                }
                                                </style>

  • Next, we will create the body:
    * A button is created with the following properties:
    – ID
    – Style
    – Class
    – Function (this function will be created in the script tag)

<body>
<button id=”btncustom” style=”display:inline-block;” class=”fa fa-unlock” onclick = “addClass();”>
</button>
                                <a id=”d” style=”display:inline-block;width:100%;word-break: break-all;vertical-align: middle; margin: -10px 0px 10px;”  href=””></a>
                </body>

  • A hyperlink is created with the following properties:
    – ID
    – Style
    – href
  • The next phase is the creating of the Script which will allow all the functionalities.
    – First, we will create the variables for easier and more readable coding.

divSection = $$(‘.col-xs-12.form-field.input_controls’)[0];
inputDynamicID = divSection.select(‘input’)[1].id;
link = $(‘d’);
button = $(“btncustom”);
link.hide();
control = $(inputDynamicID);

A class is added to the URL Field

divSection.select(‘input’)[1].addClassName(“marginbottomBottom”);
});

Now, we need to create the addClass function which was added like an attribute in the button.

   function addClass() {
         res =  $(inputDynamicID).getValue();
         link.addClassName(“title”);
         link.writeAttribute(“href”, res).update(res);
    if( control.visible() ) {
        divSection.hide();
        control.hide();
        link.show();
        button.removeClassName(“fa fa-unlock”).addClassName(“fa fa-lock”);

     }else {
         divSection.show();
        control.update(res);
         control.show();
        control.show().update(res);
        link.hide();
        button.removeClassName(“fa fa-lock”).addClassName(“fa fa-unlock”);
    }
 }

When a user presses the button next to the input field, this function will be called. The function will hide the input field and show the hyperlink and will do the opposite when the input field is hidden. In addition, this function updates the hyperlink with the text inserted into the input URL field. Also, this function will change the classes of the button:

fa fa-lock

fa fa-unlock

This is the effect of this part of the script:

The last phase of the script is to disallow the unlocking of the link on the RITM’s form. The following code should be used to do that:

if($(‘sc_req_item.number’) !== null) {
afetrOreder = $$(‘.col-xs-12.form-field.input_controls’)[0];
afetrOrederInputID = afetrOreder.select(‘input’)[1].id;
afetrOrederValue = $(afetrOreder.select(‘input’)[1]).getValue();
afetrOreder.insert( “afetrOrederValue” );
afetrOrederA = $(afetrOreder.select(‘a’)[0]).writeAttribute(“href”, afetrOrederValue).update(afetrOrederValue);
console.log(‘afetrOrederInputID’, afetrOrederInputID);
afetrOreder.select(‘input’)[1].addClassName(“hideElement”);
}

This is the effect of the last part of the script:

Benefits and results

  • The user is available to click the link and navigate to the specific location
  • Time is reduced and there is no need to copy and paste the link
  • With locking the field the chances for breaking the link is reduced to a minimum.