Hi Folk,
I have a requirement in the service catalog variable to make a container as a collapse in the service portal. I know this functionality available in native view through a variable set it's working fine but this is not working as the collapse in service portal. Please see the below SS:
1. In a native view:
2. In service Portal view:
Guy's is there any solutions so, please share to me.
Thanks In Advance
PKG
One can add mission collapsing button by DOM manipulation inside of Client Script.
First of all, one should create Start and End containers in the variable set to make the block collapsible in Desktop environment. You did the step already. I just insert screenshot to show that one need the name of one variable later, which is inside of the block:
In the above example I'll use later the name of variable requested_for later in Catalog Client Script. The start container looks for example like the following:
Now you can add the following Catalog Client Script:
function onLoad () {
var $ = this.jQuery,
fieldName = "requested_for"; // !!! it's the name of any variable from variable set !!!
setTimeout(function () {
var $fieldset = $("#sp_formfield_" + fieldName).closest("fieldset"),
$row = $fieldset.children("div.row"),
$button = $("<button style='margin-right:10px;margin-bottom:2px;' class='btn btn-icon'>" +
"<i class='fa fa-plus fa-lg'></i></button>");
$fieldset.find("legend") // find(">div>legend")
.prepend($button);
// one can comment the line if one don't want collapse the
$row.hide();
$button.click(function () {
$row.toggle();
$button.find("i")
.toggleClass("fa-plus fa-minus");
});
}, 0);
}which should be executed onLoad on Service Portal:
The script finds <fieldset> element, which exists on Service Portal and which enclose all variables. The code prepends collapsing button before the field set and binds small onclick event handler which toggle the fieldset. As the result one get results like on the picture below:
with button, which can be used for collapsing. If one want to have expended initial state (like on Desktop version) then the code need be modified in 2 lines to the following
function onLoad () {
var $ = this.jQuery,
fieldName = "requested_for"; // !!! it's the name of any variable from variable set !!!
setTimeout(function () {
var $fieldset = $("#sp_formfield_" + fieldName).closest("fieldset"),
$row = $fieldset.children("div.row"),
$button = $("<button style='margin-right:10px;margin-bottom:2px;' class='btn btn-icon'>" +
"<i class='fa fa-minus fa-lg'></i></button>");
$fieldset.find("legend") // find(">div>legend")
.prepend($button);
$button.click(function () {
$row.toggle();
$button.find("i")
.toggleClass("fa-plus fa-minus");
});
}, 0);
}In above code the class in $button is replaced from fa-plus to fa-minus and the line $row.hide() is removed.
One can of cause customize the collapse/expend button in different way by adding title attribute, changing the style and so on. For example, adding "font-size:12px;padding:.4em .6em;background-color:transparent;color:#848a91; border:1px solid #848a91;" to the the style="margin-right:10px;margin-bottom:2px;" one will get the look of the button close to the the look on the desktop (classical UI).
Hello Gunjan,
Yes, I found a way to solve my issue by moving the collaps button position to have on the right of the start container titles instead of having them on the left.
and my changing the position of the button and font size
$container.prepend("<button style='position:absolute;right:500px;margin-right:10px;margin-bottom:2px;font-size:45%;' class='btn btn-icon my-collapse-button'>" +
Hope this helps you on your side.
Take care,
Michel
