Hide Custom Widget Button

[vincentt]

Hello,

After few researches I didn't reached the answer I expected about my question.

My question is : How can I hide a custom button depending on my state?

Context :

I created few button (like UI action) on a widget I set on the OOB ticket form page on Service Portal.

I tried to use ng-if/ ng-hide / ng-show without success. I don't know a lot about AngularJs.

All I want is to hide the different button depending on the current state of the incident ticket.

My question is a question asked by some people without getting a proper answer.

Like this on

Here is my button :

Thank you.

[Erik Stolberg · Accepted solution]

Hi Vincent,

Within the portal, using ng-if would be your best bet. You will need to set an expression in the ng-if directive to give logic on the button.

<button class="btn btn-default" ng-if="c.data.state==6" type="button">Reopen</button>

Also, is the "Actions" section a separate widget on the page? If so, you need to make sure you're getting the record for the page you're viewing:

var gr = $sp.getRecord();
data.state = gr.getValue('state');

You should set up an event to broadcast any changes to the state field so your button widget knows to update (in your case, show or hide the button).

Ticket widget (client section):

$rootScope.$broadcast("StateUpdated",c.data.state);

Actions widget (client section):

$scope.$on("StateUpdated",function(evt,results){
         //process the results, set variable in widget

})

There's a good widget for Accept/Reject buttons on Share that you can look at as well: ServiceNow Share

[vincentt]

Hi Erik,

Thanks for your answer. This is kind of you.

I tried another way by myself.

Here is the code I used to create my buttons : Create custom action buttons in Service Portal - ServicePortal.io - Service Portal Tutorials, Widget...

On my HTML code I used ng-show instead of ng-if (that I tried before).

<button type="button" ng-show="data.reopen" class="btn btn-primary btn-block" ng-click="c.uiAction('reopen')">Reopen</button>
<button type="button" ng-show="data.resolve" class="btn btn-primary btn-block" ng-click="c.uiAction('resolve')">Resolve</button>
<button type="button" ng-show="data.close" class="btn btn-danger btn-block" ng-click="c.uiAction('close')">Close</button>

Then I didn't touch my client side script.

All I wanted is a query on my actual table (incident). But the problem is I don't really understand how discuss between HTML and server side script.

So, I tried many things and I made this :

(function() {
   // Get table & sys_id
   data.table = input.table || $sp.getParameter("table");
   data.sys_id = input.sys_id || $sp.getParameter("sys_id");
   data.reopen = true;
   data.resolve = true;
   data.close = true;

   // Valid GlideRecord
   gr = new GlideRecord(data.table);
   if (!gr.isValid())
             return;

   // Valid sys_id
   if (!gr.get(data.sys_id))
             return;
   //Don't show button under condition
   if (data.table == 'incident'){
             if (gr.getValue("state")!=6){
                       data.reopen = false;
             }
             if (gr.getValue("state")== 4 || gr.getValue("state")== 5 || gr.getValue("state")== 6){
                       data.resolve = false;
             }
             if (gr.getValue("state")== 4 || gr.getValue("state")== 5){
                       data.close = false;
             }
   }
[...]

This actually work. It shows and hides button when I state value change. (4 = closed complete, 5 = closed incomplete, 6 = Resolve)

Please, Erik, can you give me give your opinion on what I did?
Although it's worked if you can explain me how server side and html side talk, it would be very nice of you.  

Thank you.

[Erik Stolberg]

The difference between ng-show and ng-if:

• ng-show just adds CSS to hide the element
• ng-if actually removes the element from the DOM

Both should work for your purposes, but I usually use ng-if.

Data flows between server and client/HTML via the below flows:

You will want to update your ng-show statements to include "c." ==> ng-show="c.data.reopen".

I would still recommend implementing the broadcast functionality I included. A use case would be as follows: a user is on the portal page viewing a ticket, the ticket gets resolved by another user, and the buttons don't update to show the correct available buttons.

[Chandu Telu]

Please check the below link it may help you

Hide Service Portal 'Submit' button based on Form condition.

Hide a button based on condition in service portal