Collapsible Containers in Tokyo Portal

ServiceNowSteve · ‎11-08-2022

Good Morning All,

We recently upgraded to Tokyo and as soon as we did one of our major catalog items broke.

Specifically, the client script we used to create collapsible containers now seems to space the name under the container.

Here is the client script (onLoad) that is used on both our DEV and PROD instances to create the containers

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);
}

here is how it should look and does look in our PROD instance:

and here is what it looks like in our DEV instance that was upgraded to Tokyo

A few housekeeping items:

#1 - I know we shouldn't use DOM manipulation but as far as I am aware this is the only way to make collapsible container

#2 - The screen size and zoom was the same on both images, taken from the same browser on the same PC.

Anybody have any ideas how I might be able to fix this?

ServiceNowSteve · ‎12-14-2022

For anybody who finds this post in the future, I was able to get this working by adapting code posted by @mboberda which switches the container button to the right hand side of the screen. This isn't an ideal 1:1 replacement but for my needs and maybe yours it will work.

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

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

		$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);
}

View solution in original post

sk50 · ‎01-24-2023

Hi,

I have 3 containers, and I want to collapse only 2 containers. Could you let us know how to Apply to only some containers?

Thanks for the support.

sk50 · ‎01-24-2023

Hi,

I have 3 containers, and I want to collapse only 2 containers. Could you let us know how to Apply to only some containers?

Thanks for the support.