How to make collapse of container in service portal

Prins Kumar Gup · ‎07-17-2019

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

Oleg · ‎07-17-2019

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).

View solution in original post

surya h · ‎12-01-2021

its working for the first variable set but its not working for the second variable

Any changes need to be made ?

(quebec version)

guillain · ‎12-06-2021

Check the source (html content) of the web page to grab the necessary anchor and create your dedicated filter for the function find.

But apparently it creates security issue when we manipulate DOM elements. At least my entreprise has blocked this kind of change.

Oleg · ‎12-06-2021

Hi Guillain,

for some days I posted the answer (see below) where I included updated code for both Quebec and Rome.

Regards
Oleg

surya h · ‎12-01-2021

its working for the first variable set but its not working for the second variable set

Any changes need to be made ?

(quebec version)

Oleg · ‎12-01-2021

Hi Surya,

try to use the following code on Quebec

function onLoad () {
	var $ = this.jQuery;

	setTimeout(function () {
		var $legend = $("sp-variable-layout>fieldset>legend");

		$legend.prepend("<button style='margin-right:10px;margin-bottom:2px;font-size:75%;' class='btn btn-icon my-collapse-button'>" +
							"<i class='fa fa-plus fa-lg'></i></button>");
		$legend.next("div.row").hide();
		$(".my-collapse-button").click(function () {
			var $button = $(this);
			$button.parent().next("div.row")
				.toggle();
			$button.find("i")
				.toggleClass("fa-plus fa-minus");
		});
	}, 0);
}

or the following on Rome

function onLoad () {
	/* exported onLoad */
	/* global setTimeout */
	var $ = this.jQuery;

	setTimeout(function () {
		var $container = $(".form-container-caption").closest(".sp-form-container");

		$container.prepend("<button style='margin-right:10px;margin-bottom:2px;font-size:75%;' 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);
}