UI Page Variable(s) to Service Catalog Item Variables (variable set)

[xiaix]

I think this question has been asked, and even perhaps answered, but everywhere I've searched on the community site gives no answer to the question, or I'm unable to find it.

I have a Variable Set that's attached to a Service Catalog item.

I dislike very much the format in which the Service Catalog displays, so I am custom creating my own HTML, throwing it into a UI Page, then attaching that to a Variable set which then gets attached to the catalog item.

So here's an example of what's in the UI Page:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
       <table border="0">
               <tr>
                       <td width="150">
                               Name/Role
                       </td>
               </tr>
               <tr>
                       <td>
                               <input type="text" id="name_1" name="name_1" alt="Name or Role" title="Name or Role" placeholder="Type Name or Role"></input>
                       </td>
               </tr>
       </table>
</j:jelly>

The question is, how do I "tie in" my input "name_1" form variable so that the system can process it?

I know that if I create a variable set variable, like this Single Line Text:

I can most likely "tie-in" the "name_1" from the UI Page input box to the Service Catalog "name_1"...

Does it *HAVE* to be done this way for the UI Page and the Service Catalog to talk to each other?

[manikorada]

David,

Yes you need to do like that when ever you have a UI page and have input fields in the UI page.

You need to take that value and store somewhere something like a Hidden variable on the service Catalog

[xiaix]

Excellent, thank you for the info.   I will do some testing and reply back with the results.   I'll mark this response as helpful, and if/when everything works, I'll flag it as the answer.

[xiaix · Accepted solution]

Okay, this is going to be an in-depth post, and I'll try to be as clear as possible.   I have found out how to get a Service Catalog Item to display via your custom UI Page and map the variables so the thing submits and gets recorded.

*Note: This is just an example page so be as detailed as you wish.

First, create your fancy UI Page:

For the HTML (XML) portion of your UI Page, here's an example:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

       <div id="MasterFormDiv">

               <table>

                       <tr>

                               <td>

                                       Company Name

                               </td>

                               <td>

                                       <input type="text" id="sec_1_companyName" name="sec_1_companyName" alt="Company Name" title="Company Name"></input>

                               </td>

                       </tr>

               </table>

       </div>

</j:jelly>

Please take note of two important key factors here, as we'll need these in the processing scripts to follow:   <div id="MasterFormDiv"> and id="sec_1_companyName" of the input field.   Just take note for now, because I'll detail it out soon.

Next, staying within your UI page, enter this for your Client Script:

function hiddedField_work(visibleFormFields)

{

       var hiddenVariables = [];

       var varMap = gel('variable_map');

       var items = varMap.getElementsByTagName("item");

       var found = false;



       for (var i = 0; i < items.length; i++)

       {

               found = false;

               var item = items.item(i);

               var name = item.getAttribute('qname');

               var id = item.id;



               var actualVariableID = gel("IO:" + id);



               var j = 0;



               for (j; j < visibleFormFields.length; j++)

               {

                       if (("v" + visibleFormFields[j].id) == name)

                       {

                               actualVariableID.value = visibleFormFields[j].value;

                               found = true;

                       }



                       if (found)

                               break;

               }

       }

}



function populate_hidden_variables()

{

       var mainBlock = [];

       var varMap = gel('MasterFormDiv');

       var inputs = varMap.getElementsByTagName("input");



       for (var i = 0; i < inputs.length; i++)

       {

               var val = inputs[i].value;

               var id = inputs[i].id;



               mainBlock.push({ id:id, value:val });

       }



       hiddedField_work(mainBlock);

}

Okay, save that and let's move on.

Let's now create the Variable Set you're going to use on your (not yet created) catalog item.

*NOTE*   Notice the "Name" of my variable...     it's the same as I had in my UI Page input ID, with the only difference is appending a "v" at the beginning... which if you have a sharp eye, you'll see how I handled this in the Client Script I pasted above.   if (("v" + visibleFormFields[j].id) == name)

Also, for your UI Page variable in this variable set, point to your UI Page you created above:

Moving right along...   let's now create that Catalog Item and tie all this together:

Attach the Variable set you just created to this Catalog Item.

Okay, last thing to create here are two Catalog Client Scripts, as in this example:

Let's tackle the "onLoad" script first.   In this script, all you're going to do is make your Variable Set variables invisible so the end user will only see your fancy UI Page stuff.   Don't worry, the onSubmit script is where the magic happens.

You'll add a setDisplay false value for EVERY Variable Set variable you have.   All this is doing is essentially making them hidden fields, which the onSubmit script will populate from the UI Page field values.

And now, the onLoad Catalog Client Script...

Yep, that's it, the UI Page Client Script that's pasted above has the function populate_hidden_variables() javascript function.   This will do the heavy lifting for you.

I'll stop here as this is probably a bit more detailed than needs to be, but for me, this is how I like things explained, with clear and detailed instructions.

I won't go over the details of the populate_hidden_variables() and hiddedField_work() functions, but if you look carefully you can see how it all happens.   The only way I was able to figure out how to code these functions was to put my browser in debugging mode and put breakpoints on the page to see exactly what was going on, where, and when.

Anyway...   (takes a long exhale)...   I hope this was helpful for at least a few of you.   Be safe and have fun!

[xiaix]

Oh, I'm sure you'll have more than just one field type in your UI Page, and I only displayed how to run through the "input" field type.

Here's an example of how you would accommodate for other types:

function populate_hidden_variables()

{

       var mainBlock = [];

       var varMap = gel('MasterFormDiv');

       var inputs = varMap.getElementsByTagName("input");

       var textAreas = varMap.getElementsByTagName("textarea");

       var i = 0;

       var val;

       var id;



       for (i; i < inputs.length; i++)

       {

               val = inputs[i].value;

               id = inputs[i].id;



               mainBlock.push({ id:id, value:val });

       }



       // Reset i

       i = 0;



       for (i; i < textAreas.length; i++)

       {

               val = textAreas[i].value;

               id = textAreas[i].id;



               mainBlock.push({ id:id, value:val });

       }



       hiddedField_work(mainBlock);

}

and so on and so forth...