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

xiaix · ‎08-27-2015

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?

xiaix · ‎08-28-2015

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!

View solution in original post

xiaix · ‎08-28-2015

Oh, and here's a handy little Catalog Client Script for the onLoad. If you're like me, you'll have possibly hundreds of Variable Set variables you'll need to hide, and manually entering them one by one can be very time consuming.

Here's how you can handle them all in a for() loop:

function onLoad() {


     //Type appropriate comment here, and begin script below


       


       var el = g_form.nameMap;


       


       // We're skipping the first [0] element because that's the "uipage".   We don't want to hide that.


       // We're skipping the last [el.length] by doing a (el.length - 1) because that's the Variable Set itself.   We don't want to hide that.


       // This is why we're starting var i at 1, and i < (el.length - 1).


       


       // I do additional testing with if() statements if for some strange reason the first and last elements are not the uipage and variable set.


       


       for (var i = 1; i < (el.length - 1); i++)


       {


               if (el[i].prettyName != 'uipage')


               {


                       if (el[i].prettyName != 'Business Continuity Play (BCP)') // This is the name of the Variable Set.   You *should* change this code if the Variable Set name changes.


                               g_form.setDisplay(el[i].prettyName, false);


               }


       }


}

Maria DeLaCruz · ‎09-15-2016

Hi David,

I'd like to do something similar, but with a reference type variable (for a rec producer) on the UI page. Then, I would like that value saved on my table record. Could you please assist?

Thanks,
Maria

aliciastancato · ‎09-02-2016

We used this yesterday so I wanted to say thank you for sharing I ran into some snags at first but your stress on variable name mapping was very useful.

xiaix · ‎09-02-2016

Wow, I forgot I even posted this! I'm glad you found it useful, but quite honestly a lot of this has changed (been enhanced and minified) since this post.

wiltonr · ‎11-30-2016

I have a very similar need but it's using a UI Page with radio button inputs. The UI Page will look something like this:

UI Page HTML/XML:

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

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

<tr>

<td>

<input type="radio" name="gender" value="male"><strong>Compact: </strong> Recommended for basic functionality (email and general browsing).Slim design minimizes space usage.<br></br></input>

<input type="radio" name="gender" value="female"><strong>Standard: </strong> Recommended for mid-range computing functionality. Popular selection based off of balance of computing power and cost.<br></br></input>

<input type="radio" name="gender" value="other"><strong>Robust: </strong> Recommended for demanding computing environments that require significant memory and high processing speeds.<br></br></input>

<input type="radio" name="gender" value="custom"><strong>Custom: </strong> Recommended for users that need a specialized computer whose specifications are not met by the choices above.<br></br></input>

</td>

</tr>

</table>

</div>

</j:jelly>

This is for a catalog item for selecting a new computer spec. How would I write the client script so that it could take the selected value chosen from the UI Page and write it into a catalog item variable? I don't suppose it would necessary need to be a Multiple Choice variable on the catalog item - I just need to be able to convey the value somehow so it will then make it to the Requested Item/Task.

Thanks,

Rhonda