Service portal widget visibility

[Meenal Gharat]

Hello,

Hello experts,

How can we hide a widget based on some condition?

I have embedded widget on approval form page ,my requirement is to make this widget visible only when catalog ITEM is "Multi Functional" and state is Requested or else hide the widget.

Kindly help with the service portal.

Best regards,

Meenal

[J Siva]

Hi @Meenal Gharat 
You need to call your custom widget from the exsiting widget like below.
Validate the condition in the sever script and store it in the data object. Then use that data object in the ng-if tag.

Regards,
Siva

[anshul_goyal]

Hello @Meenal Gharat,

Refer the below community link to hide your widget:
https://www.servicenow.com/community/developer-forum/how-to-use-quot-ng-if-quot-to-show-a-widget-on-...

Please mark my response as Accepted and Helpful for future references.

Thanks

[Bhimashankar H · Accepted solution]

Hi @Meenal Gharat ,

To accomplish your requirement—displaying an embedded widget only when the catalog item is "Multi Functional" and the state is "Requested"—you need to introduce conditional logic either in the widget’s server/client script or use platform-level access with widget properties.

 widget's Server Script and HTML template in conjunction with the ng-if directive.

1. Server Script (Widget):

   • In your widget's Server Script, retrieve the current record's sys_id and table (which will likely be sc_req_item for a Request Item or sysapproval_approver if it's the Approval record itself).

   • Use GlideRecord to query the relevant table (e.g., sc_req_item) to get the Catalog Item (e.g., request_item.cat_item.name) and the State field value.

   • Set a data object property (e.g., data.showWidget = true;) based on your conditions:

   • Example Code:

(function() {
    /* Populate the 'data' object */
    var gr = new GlideRecord('sc_req_item'); // Or 'sysapproval_approver' depending on your form context
    gr.get($sp.getParameter('sys_id')); // Assuming sys_id is passed as a URL parameter

    data.showWidget = false; // Default to hidden

    if (gr.isValidRecord()) {
        var catalogItemName = gr.cat_item.name; // Assuming 'cat_item' is the reference to the Catalog Item
        var recordState = gr.state; // Or gr.getValue('state')

        // Check your conditions
        if (catalogItemName == 'Multi Functional' && (recordState == 'requested' || recordState == 1)) { // Use internal value for state if possible
            data.showWidget = true;
        }
    }
})();

• HTML Template (Widget):

  • Wrap your widget's entire HTML content within a <div> tag that uses the ng-if directive, referencing the data.showWidget variable from your server script.
    Example Code.

<div ng-if="data.showWidget">
    <h2>This widget is for Multi Functional items in Requested state!</h2>
    </div>

• Context: Ensure you're querying the correct table and retrieving the sys_id from the appropriate source (e.g., URL parameter, sp_page.g_form if in a client script, or directly from the current record if the widget is on the record form itself).

• State Value: Always use the internal value of the state field (e.g., 'requested', 1) instead of the display value for robust comparisons.

• Cloning OOB Widgets: If you're modifying an out-of-the-box widget, always clone it first to avoid losing changes during upgrades.

Thanks,
Bhimashankar H

-------------------------------------------------------------------------------------------------
If my response points you in the right directions, please consider marking it as 'Helpful' & 'Correct'. Thanks!