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).
For Tokyo (and I assume San Diego) I am submitting this adapted code thanks to @mboberda as the unofficial "Fixed" code to be used going forward.
The code changes the containers from the left side to the right side of the screen but I think it looks pretty slick personally.
If you figure out how to make it appear correctly on the left after San Diego like it did before please let me know, also this collapses all containers not one by one.
function onLoad () {
/* exported onLoad */
/* global setTimeout */
var $ = this.jQuery;
setTimeout(function () {
var $container = $(".form-container-caption").closest(".sp-form-container");
//Adjust the right:33px;font-size:50% as needed for your item.
$container.prepend("<button style='position:absolute;right:33px;font-size:50%;' class='btn btn-icon my-collapse-button'>" +
"<i class='fa fa-plus fa-lg'></i></button>");
$container.children("div.row").hide();
$(".my-collapse-button").click(function () {
var $button = $(this);
$button.parent().children("div.row")
.toggle();
$button.find("i")
.toggleClass("fa-plus fa-minus");
});
}, 0);
}
