Accessing SP widget directives from a catalog client script

timhorn · ‎04-10-2017

I'll start by stating my underlying goal. I want to be able to have a catalog client script modify some attributes (value and style.display) of an element that is defined inside an SP widget. I understand that the Service Portal presents more of a "mobile" interface, and we therefore don't have access to a DOM. I get that. I don't like it....but I get it. I was wondering if, as an alternative, we might be able to trigger a directive in the widget from a catalog client script. Any thoughts?

ChrisBurks · ‎04-18-2017

Link function:

function(scope, element, attr){

         // capture the Service Now field

var dem = $('#demo')[0];

   //grab the catalog variable checkbox in the example and capture if checked or not. this will display or hide the SP demo field in example

$('input[name="IO:<sys_id of the variable goes here>"]').on('change', function(e){


             scope.show_hide = this.checked;

   });


//capture the catalog variable multiple choice selections and populate SP demo field on change in video example

var mchoice = $('input[name="IO:<sys_id of variable goes here>"]');

mchoice.on('change', function(e){

         if(dem.value == '') dem.value += " " + this.value;

         else {

             dem.value += " " + this.value;

             var dsize = dem.getAttribute('size');

             dem.setAttribute('size', parseInt(dsize) + this.value.length +2)

         }

 });


//capture the catalog variable "Description" field in video example and listen on keydown and populate SP demo field

$('input[id="sp_formfield_IO:<sys_id of catalog variable goes here>"]').on("keydown", function(e){

       

   dem.value = this.value;

   dem.setAttribute('size',testi.value.length);


   });

}

HTML markup in widget:

<div>

<h3> Service Portal Fields </h3>

<hr>

<div>

</div>

<div>

</div>

This was just a quick draft. I'm sure it could be a lot cleaner and done in more of an angular way. But I hopefully it will give you some ideas.

Thanks

View solution in original post

ChrisBurks · ‎04-15-2017

What kind of trigger are you thinking; when a field defined in the native view changes, has a certain value or blurred away from to trigger a change on a field or element defined in a widget defined within Service Portal? This type of functionality can be done. Maybe not through a catalog client script but it can be done.

Would it be possible to give a more detailed scenario?

timhorn · ‎04-15-2017

Let's say we have a catalog item today that has several variables, including a UI Page variable that renders several HTML elements. Today I can have a UI Policy that conditionally hides or exposes the entire UI Page, but if I want the value of one of the other variables to determine if one element within the UI Page is exposed (as opposed to the whole UI Page), I would write an on-change catalog client script that does something like "gel('elementname').style.display = 'none';". If I were to convert the UI Page to a widget so I can include it in the Service Portal, I wouldn't be able to do that from a catalog client script. So far I haven't been able to find a way to have something outside the widget force that kind of a change on an element within the widget. I'm very new to Service Portal, so I'm still learning the ins-and-outs. Any thoughts on the subject would be greatly appreciated.

ChrisBurks · ‎04-18-2017

Tim,

Sorry for the delay in getting back. It's funny how I had yet to use the choice select in this manner with catalog variables and Service Portal. I write that because it seems like invoking an event listener directly on catalog variable input fields through a Service Portal widget (as macro) to capture data works except with Select Box.

And it's because of the way the Selectbox is built. The user doesn't directly interact with the select element. The actual select element is hidden and a virtual representation is used that includes an input field to make the select options searchable and a ul element with list items and span elements to hold the choices. It's built like the Reference Field

I put together a video showing that it is possible to trigger a change from a catalog variable to the Service Portal widget. Notice when I demonstrate the Select Box, clicking on any of the choices doesn't do anything. In order to make something happen I need to first interact with the input field and then make a selection. But for the Select Box depending if the cache is not renewed the identifier for the Select Box is not consistent.

Here's the video:

https://screencast.com/t/Z4x4dX23D

One way to grab the element and set an event listener on it is to use the LInk section of the widget. In there you can use jQuery. (Note: Angularjs by default brings in a lite version of jQuery called jqLite.) From there you have a limited selection of jquery methods such as $(element).on(). Angularjs jqLite

I haven't played with all of the fields but so far anything that is a direct input field with direct user interaction works solid. But anything built like the Select Box is tricky and can be tricky with inconsistent results. You'll need to play around with it.

But in conclusion I agree there needs to be something solid for the catalog variable to talk back to the widget.

timhorn · ‎04-18-2017

That's exactly the kind of thing I'm looking for. The video showed the functioning interaction, but it didn't show how the code was constructed. Can you show what the client script and link code look like for that?