Minimize container based on condition

[pk31]

Hi, I need to minimize the container based on the another variable selection, how to minimize and expand the container?
I tried it by using  'toggleVariableContainter('sys_id');' but it is not working on service portal.

it returns browser console error on service portal

[Tushar]

Hi @pk31 

I guess toggleVariableContainter() function is not supported in ServiceNow Service Portal.

You can use the following script to minimize and expand the container: 

var containerID = 'sys_id';

function toggleContainer(containerID) {
    var container = document.getElementById(containerID);
    if (container.style.display === 'block') {
        container.style.display = 'none';
    } else {
        container.style.display = 'block';
    }
}

if (current.selection.u_slx_variable_selection == 'yes') {
    toggleContainer(containerID);
}

Please, don't forget to mark my answer as correct if it solves your issue or mark it as helpful if it is relevant for you!

Regards,
Tushar

[pk31]

Hi @Tushar  
when I used above script in my client script, it returns error on service portal
" Error while running Client Script "CONTAINER": TypeError: Cannot read properties of null (reading 'getElementById')

[pk31]

@Tushar  
Is it possible to achieve this without using DOM manipulation?

[SwarnadeepNandy]

Hi,

The toggleVariableContainer() function is a client-side API that works only on the platform UI, not on the Service Portal. It is not supported or recommended to use this function on the Service Portal, as it may cause unexpected behavior or errors.

To achieve the same functionality on the Service Portal, you need to use a different approach. One possible way is to use a UI policy or a client script that sets the visibility of the container variable based on the value of another variable. You can use the g_form.setVisible() method to show or hide the container variable, and the g_form.getValue() method to get the value of another variable.

For example, let’s say you have a container variable called u_container, and another variable called u_choice, which is a choice list with two options: Yes and No. You want to show the container variable only when the user selects Yes for the choice variable. You can create a UI policy or a client script with the following script: (you may need to modify the script based on your requirement)

// Define a function to show or hide the container variable based on the choice variable 
function toggleContainer() {
    // Get the value of the choice variable 
    var choice = g_form.getValue(‘u_choice’);

    // Check if the choice is Yes or No 
    if (choice == ‘Yes’) {

        // Show the container variable if Yes 
        g_form.setVisible(‘u_container’, true);
    } else {

        // Hide the container variable if No 
        g_form.setVisible(‘u_container’, false);
    }
}

// Call the function on load 
toggleContainer();

// Add an onChange client script for the choice variable to call the function on change g_form.onChange(‘u_choice’, toggleContainer);

I hope this helps you minimize and expand the container based on another variable selection in Service Portal.

Kind Regards,

Swarnadeep Nandy