UI Page Variable and Catalog Item onChange Script

[Frank]

I'm adding a UI Page to a catalog item and I'd like to know if it's possible to have an onChange check for a UI Page variable in the catalog item script. I can check the UI Page variable on submit, but I haven't found anything on the Wiki or forums that really answers the question. I want to integrate content from both pages and hide/show content based upon actions on the UI Page. I know I could create all of the controls in the UI Page, but I'd like to see if it's possible to have a seamless integration of the two kinds of pages. Right now all I have is a simple check box, but I could see adding other types of controls in the future.

Thanks,

Frank

[brian_alson]

It might be possible to do this via an onChange Catalog Client Script, but from my limited testing, it would probably be fairly difficult. The change event gets bound by using the HTML ID of the variable on the page, so your UI Page would need to insert the attribute containing the generated ID which I've never tried to do inside a UI Page. Also, something else to watch out for is while this would need to get bound on the top-most level of your UI Page (since you will eventually need more than one field to be "watched"), certain versions of IE don't support the correct 'bubbling' of the change event up the DOM (MSDN and Quirksmode) meaning the event might not get triggered in all cases.

A different solution might be to bind using the onLoad handler of the Catalog Item instead. Then, inside the onLoad script, you can access the fields within the UI Page using getElementById/gel DOM methods and bind directly to the change, blur, or any other events. From the sound of your question, you have control of the UI Page, so you should be relatively safe to look for specific DOM selectors like IDs or class names. This is somewhat similar in concept to this, but applied slightly differently.

[Frank]

Thanks for the info. It seems like more work than it's worth. It would need to work in IE too since that's our primary browser. Abhiram provided an example so I'm going to play around with it and see what I can do.

Frank

[adiddigi]

So let's do both :

Scenario one : Controlling the content on the catalog form from the UI page itself. There is no bubbling in this case. Because we really aren't interested in propagating events. The reason why this will work is because g_form object will be available in the UI page also(not when you click on try it, but when you open it on the Service Catalog form)

Let's say you are embedding a UI page called "a_simple_text_box" which will contain a single text box and depending on what you enter here, the content on the catalog form will be controlled.

So before that create two labels on catalog form which will be manipulated on what you enter in the text box. The labels are

 label_apple

and

 label_custard_apple

, these are created from Service Catalog form. If you type apple in the text box of the UI page then label_apple label of the Service Catalog form will be shown and if you type custard apple in the text box, then label_custard_apple will be shown. A full demo is on black berry form of demo019, I'm not sure if it will be so by the time you see this.


Here is the UI page HTML:

Name : 'An_apple_a_day'

HTML

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

Please enter a fruit you want to eat : <input id="dab_input" type="text"> </input>

</j:jelly>

Client script:

Event.observe('dab_input', 'change', function(){
   
    if(this.value == 'apple'){
        g_form.setDisplay('label_apple',true);
        g_form.setDisplay('label_custard_apple',false);
    }
    else if(this.value == 'custard apple'){
        g_form.setDisplay('label_custard_apple',true);
        g_form.setDisplay('label_apple',false);
       
    }
   
   
});

Notice how I'm using g_form object and its methods. the g_form method will be still available to the client scripts of UI Page. Cool ain't it?


Scenario two: Attaching an event on the text field
we will be doing Scenario 1 all again just in a onLoad client script. Nothing more, really.

Retain the HTML of the UI page and create an onLoad client script and write whatever you have in the UI page's client script in the new onLoad client script and the it starts to work.
So the only change we made is last time we attached an onChange in the UI Page's client script. We now attach it in the onLoad client script. That's all.



Finally, let's discuss a scenario which I like the most and which needs a little knowledge on how the client script of a UI page gets rendered.

Scenario three:

Let's first go over why you would do this:

Now it's the reverse, say you have a text field on the catalog form which will take inputs of apple and custard apple and you have the labels in the UI page.

I.e. when you type apple in the text field of catalog form( the normal Service Now's string field) then the apple's label from the UI page will be shown, and when you type in custard apple in that text field, then the Custard apple's label from UI page will be shown.


So this is the onChange on the text field of Catalog form:

function onChange(control, oldValue, newValue, isLoading) {

//showLabel function will be defined in UI Page's Client script.
showLabel(newValue);


}

UI Page:

HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<label id="apple"> An apple a day keeps doctor away! </label>
<label id="custard_apple"> A custard apple a day keeps doctor away! </label>


</j:jelly>

Client Script :

function showLabel(fruit){
if(fruit == 'apple'){
$('apple').show();
$('custard_apple').hide():
}
if(fruit == 'custard apple'){
{

$('apple').hide();
$('custard_apple').show():
}


}

The reason why this will work is because, the client script will be rendered into the catalog form too. So be careful with their names. Because Global functions are bad things in the world of Javascript.

There is another advantage of using the third scenario, You can call the function

showLabel

on Requested items/catalog task's client side and hide/show variables in the UI pages as you choose to.

!Important : Be very careful about the IDs of UI page variables you use here. Make sure they stay unique.


Let me know if you need any more clarification.

[Frank]

Abhiram,

Thanks for the very detailed example, that really helps. I'll give it a try and do some experimentation.

Thanks again,

Frank