Can i add a button into a catalog item, on the form itself

[dave_edgar]

I want to add a 'check availability' button onto to a catalog item form, before submit, so users can check if we have an item for example

Is there a way to do this, using a yes/no is a bit ugly but having a choice button that could trigger it would be quite nice

[Greg42]

Hi Dave,

To double check I understand which part of submit you mean:

1.A submit button on service portal catalog item form - unless you use a record producer? It's possible either way using macro/uipage or changing your widget.

2.If it's a form on sc_cat_item table then you can add a UI Action to perform that check.

Regards

Greg

[oharel · Accepted solution]

How about a UI macro on a string field?

Like this:

1. Add a string field to the form.

2. Add the following onLoad script:

function onLoad() {
       //The variable name to put the icon next to
       g_form.setReadOnly('available', true);
var varName = 'available';

       try{
               //Add the icon decoration to the reference field
           var varEl = g_form.getControl(varName).id;
               $(varEl).insert({
                       after: '<span><a id="icon-check-circle" class="btn btn-default sc-ref-spacer icon-check-circle sn-tooltip-basic" title="" data-original-title="Check availability"></a></span>'
               });
               //Add the 'onclick' event
               $('icon-check-circle').observe('click', checkAvailability);
       }catch(e){}

       function checkAvailability(){
               //Add current user to reference field
var check = new GlideRecord('u_new_test_table');
check.addQuery('u_num',   '1');
check.query();
if(check.next()) {
g_form.setValue(varName, 'The item is available.');
} else {
g_form.setValue(varName, 'The item is not available. Bummer.');
}
}
}

Notes:

1. icon-check-circle is the name of the icon. You can insert your own or go to Collaborate -> Administration -> Action icons and choose your own

2. The script is a modification of mark.stanger 's 'Add Me' UI macro for User and Group Fields

3. The whole checkAvailability function: replace it with your own code, using the relevant tables and items. In my example, I wanted to check whether the number '1' appears in a field called u_num.

Harel

[dave_edgar]

arghhhhhh

It works perfectly on the normal view but the search button doesn't show in the portal

catalog

portal

[oharel]

You will need to add a widget to your item in service portal.

As my knowledge is next to nothing in Angular, this is what I came up with in the meantime. If it does not answer your needs, I suggest to open another discussion in the community (and let me know, so I can follow it ).

Anyway, this is what I can offer in the meantime:

1. Under Service Portal -> Widgets, create the following widget:

Name: availability

ID: availability

Server script:

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */

var check = new GlideRecord('u_new_test_table'); //change this to your table
check.addQuery('u_num',   '2'); //change this to your query
check.query();
if(check.next()) {
gs.addInfoMessage('This item is   available');
} else {
gs.addErrorMessage('The item is not available. Go away.');
}
})();

2. add another variable in your item catalog.

type: single line text

order: give it a high number, so it is at the bottom of the page

name: widget

question: widget

Under default value: widget: availability (if the field is not there, go to the UI policies of the page and tweak "Widget Reference Visibility". I had to do that on Helsinki)

3. change your catalog client script. I added lines 3-10:

function onLoad() {
//lines 3-10
if (window === null) { //this is what happens on the Service Portal or mobile. You can add more command, like make fields read only.
g_form.setVisible('available', false);
g_form.setVisible('widget', false);
}   else {
// Write your desktop compatible code here

g_form.setReadOnly('available', true);
g_form.setVisible('widget', false); //this hides the single line text field. You don't need it anyway in the catalog item.

//up to here

var varName = 'available';

try{
//Add the icon decoration to the reference field
//If not reference variable, remove 'lookup.' below
//var varEl = 'lookup.' + g_form.getControl(varName).id;
var varEl = g_form.getControl(varName).id;
$(varEl).insert({
after: '<span><a id="icon-check-circle" class="btn btn-default sc-ref-spacer icon-check-circle sn-tooltip-basic" title="" data-original-title="Check availability"></a></span>'
});
//Add the 'onclick' event
$('icon-check-circle').observe('click', checkAvailability);
}catch(e){}

function checkAvailability(){
//Add current user to reference field
var check = new GlideRecord('u_new_test_table');
check.addQuery('u_num',   '1');
check.query();
if(check.next()) {
g_form.setValue(varName, 'The item is available.');
} else {
g_form.setValue(varName, 'The item is not available. Bummer.');
}
}
}
}

In service portal, go to your item. If the item is in stock, you should see a message that it is available. If it is not, you will see a different message.

Sorry - I am not too proficient with widgets, so that's the best I could come up with for now.

harel