How to Expand Container Start Display Title in the Portal

[sharvil Sheth1]

I want to have that expand option on Portal as well like we have for Native UI

Portal

Native UI

[Bhavya11]

Hi @sharvil Sheth1 ,

As per ServiceNow, There are no plans to support this functionality in the baseline functionality of the Service Portal. Build a custom widget to implement this behavior.

FOR MORE PLEASE REFERE KB0610329-Unable to expand/contract container variables in Service Portal

Please mark my answer correct & helpful, if it helps you
Thanks,
BK

[Ankur Bawiskar]

@sharvil Sheth1 

It's not available in portal.

I agree with @Bhavya11 and you will have to create a custom widget which renders the variables in it.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[sharvil Sheth1 · Accepted solution]

With Below code I have achieved it.

function onLoad() {

    var $ = this.jQuery,

        fieldName = "phone"; // Name of any variable from the variable set.

    setTimeout(function() {

        // Locate the "User Information" element

        var $userInfoContainer = $(".form-container-caption:contains('User Information')")

            .closest(".sp-form-container");

        // Add a toggle button on the right side of "User Information"

        $userInfoContainer.find(".form-container-caption").append(

            "<button style='position:absolute;right:1100px;margin-right:10px;margin-bottom:2px;font-size:100%; width:50px; height:35px; ' class='btn btn-icon my-collapse-button'>" + "<i class='fa fa-plus fa-lg'></i></button>");//position:absolute; right:10px; margin-bottom:2px; font-size:45%' class='btn btn-icon my-collapse-button'>" + "<i class='fa fa-plus fa-lg'></i></button>"

        // Initially hide rows within the container

        $userInfoContainer.find("div.row").hide();

        // Click event for the toggle button

        $(".my-collapse-button").click(function() {

            var $button = $(this);

            // Toggle the visibility of the rows

            var $rows = $button.closest(".sp-form-container").find("div.row");

            $rows.toggle();

            // Change the button's icon based on the visibility of rows

            if ($rows.is(":visible")) {

                $button.find('i').removeClass("fa-plus").addClass("fa-minus");

            } else {

                $button.find('i').removeClass("fa-minus").addClass("fa-plus");

            }

        });

    }, 0);

}