How to make collapse of container in service portal

[Prins Kumar Gup]

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

[Jaspal Singh]

Hi Prins,

I guess this is an expected behaviour. Look for thread that has knowledge article from HI.

Thanks,

Jaspal Singh

Hit Helpful or Correct on the impact of response.

[Prins Kumar Gup]

Thanks for the quick reply. Can you please help me with that.

[Oleg · Accepted solution]

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

[Prins Kumar Gup]

Thanks mate! it's working.

[Prins Kumar Gup]

Hey Oleg,

My requirement is like when the page is load that time collapse button is in plus. But right now, when I load the page collapse button is in minus and all fields are visible. So can you suggest to me.

TIA

PKG