Toggle variable container UI Policy script

[will_smith]

I have containers set up in an order guide and I am currently attempting to apply a UI policy to them with a delay. This function doesn't work on collapse, just for the order guides in Geneva (patch 4). Can someone with more web experience help me out here please? I see that the button element has an onclick method of toggleVariableContainer(id), and I want to get access to that in my jQuery script, so I can set it to true/false. Thank you for looking at this one and helping me out.

Here is my current jQuery script for the containers. The false script works just fine, they expand with the timeout as expected. It's the true condition that has the timeout that is not working. They just all collapse at once.

-- If TRUE --

function onCondition() { //collapse headers, Type = 'None'

// hide the Update Set 'User Info' Header by clicking the Collapse button

setTimeout(function(){

  $j('#img_63c28cc34f100200da16defd0210c70c').click();

}, 600);

// hide the Update Set 'Work Address' Header by clicking the Collapse button

setTimeout(function(){

  $j('#img_967563414f400200da16defd0210c76b').click();

}, 300);

// hide the Update Set 'Email Info' Header by clicking the Collapse button

$j('#img_e41a2a624f8d0200da16defd0210c77b');

}

-- If FALSE --

function onCondition() { //expand headers, Type != 'None'

// hide the Update Set 'User Info' Header by clicking the Collapse button

$j('#img_63c28cc34f100200da16defd0210c70c').click();

// hide the Update Set 'Work Address' Header by clicking the Collapse button

setTimeout(function(){

  $j('#img_967563414f400200da16defd0210c76b').click();

}, 300);

// hide the Update Set 'Email Info' Header by clicking the Collapse button

setTimeout(function(){

  $j('#img_e41a2a624f8d0200da16defd0210c77b').click();

}, 600);

}

[will_smith]

I figured it out, it was just a typo of the suggestion: toggleVariableContainer('sys_id'); Thanks Jace!

[will_smith]

jacebenson I am coming back to this problem from a different angle and trying to make the containers close (not toggle) via an onLoad catalog client script. I found this in the files for ServiceNow and I've tried the below, but it's not closing my container. Do you have any suggestions?

$('question_container_03966b6e4fdbda001d01188af110c722').toggleClassName('state-closed');

function toggleVariableContainer(id) {

var container = $j('#container_row_' + id);

var row = $('question_container_' + id);

if (!container || !row)

return false;

row.toggleClassName('state-closed');

container.slideToggle();

_frameChanged();

return false;

}

[Jace Benson]

I provided a as-is way to do what is being asked but please be aware This will probably break on an upgrade as servicenow does not maintain classes/ids in their system and they have changed pretty consistently since Berlin.

So if you use this be aware you will have to test it on upgrades.   Nice thing about making this a UI Script is then you only have to change the UI Script, however then it loads on every page so your mileage may vary.   With that said, enjoy the solution.

So they (servicenow) is just using the some prototype and jQuery to change the classes;

See code below;

toggleVariableContainer.toString()
function toggleVariableContainer(id) {
var container = $j('#container_row_' + id);//same as jQuery('#containger_row_' + id);
var button = $j('#img_' + id);
var row = $('question_container_' + id);//using prototype here
if (!container || !row)
return false;
row.toggleClassName('state-closed');//trying prototypes toggleClassName see Prototype   v1.7.3 API documentation | Element#toggleClassName 
if(button.hasClass('container-open')) {//using jquerys has Class, if true
button.removeClass('container-open');
button.addClass('container-close');
}
else {
button.removeClass('container-close');
button.addClass('container-open');
}
container.slideToggle();
_frameChanged();
return false;
}

I stopped annotating part way throught, point is you can easily re-write a client side function to close/open that section

Might look something like;

var customContainerFx = function(id,action){
var container = $j('#container_row_' + id);
var button = $j('#img_' + id);
var row = $('question_container_' + id);
if(action == 'close'){
button.removeClass('container-open');
button.addClass('container-close');
container.hide();//really any of these can be used here http://api.jquery.com/category/effects/ 
}
if(action == 'open'){
button.removeClass('container-close');
button.addClass('container-open');
container.show();//really any of these can be used here http://api.jquery.com/category/effects/ 
}
}
/*
//customContainerFx('bff561a30f575200f37f4d9ce1050ed9','open');
//undefined
//customContainerFx('bff561a30f575200f37f4d9ce1050ed9','close');
*/

You could add this as a ui script or as a client script or as a macro and then invoke within a client script.   This will probably break on an upgrade I tested this in Helsinki

[will_smith]

Thanks for that! I was getting close to the code you had, and was using their existing code that I found in the files. I notice that in the code SN used, they mix $ and $j - when using their code, do we have to follow that convention?

Also, when using jQuery in our SN scripts, should we always use $j?

Thanks again Jace!

[Jace Benson]

jQuery and Prototype both default use $, since there's a conflict, jQuery is callable via $j or jQuery