Collapsible Containers in Tokyo Portal

[ServiceNowSteve]

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?

[Mike_R]

Where is this? Platform UI, Service Portal, or somewhere different?

[ServiceNowSteve]

This is on the Portal UI, sorry if I missed it 😞

[Mike_R]

I would suggest opening a support case since it's upgrade related.

But my best guess is that it's related to the changes to HTML editor (TinyMCE 4 upgraded to TinyMCE 5)

https://docs.servicenow.com/en-US/bundle/tokyo-servicenow-platform/page/build/service-portal/referen...

[ServiceNowSteve · Accepted solution]

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