Show or Hide Elements in Entry Layout

1. Overview

This interaction is used to show or hide elements on the Entry Layout (EL) based on user input or conditions. It helps automate behaviors such as auto-populating fields and controlling element visibility when certain field values change.

2. Example

In the example below, the system listens for changes to the status field. In this example, we're using the setElementHiddent function.

If the status equals Won, the element is hidden (C.setElementHidden("jwlqPt", true)
If not, the element becomes visible again (C.setElementHidden("jwlqPt", false)

async function handler(C) {
    let actions = [];

    const wonStatus = C.getValue("status");

    console.log("wonStatus -->", wonStatus);
    if (wonStatus[0] === "464230") { // Won
        actions.push(C.setElementHidden("jwlqPt", true));
    } else {
        actions.push(C.setElementHidden("jwlqPt", false));
    }

    return C.mergeAll(actions);
}

You can also utilise other hide functions, such as hideElement and toggleElementHidden.

async function handler(C) {
    let actions = [];

    const status = C.getValue("status");
    console.log("status -->", status);

    if (status[0] === "464230") {            // Won
        // Hide element using setElementHidden
        actions.push(C.setElementHidden("jwlqPt", true));

    } else if (status[0] === "784120") {     // Lost
        // Show element using setElementHidden
        actions.push(C.setElementHidden("jwlqPt", false));

    } else if (status[0] === "998812") {     // Pending review
        // Toggle visibility state each time this runs
        actions.push(C.toggleElementHidden("2X-nzM"));

    } else {
        // Basic hide example using hideElement (simple hide with no boolean)
        actions.push(C.hideElement("DDYy1V"));
    }

    return C.mergeAll(actions);
}

📌 Need Help?

If you require assistance or encounter any issues, please don't hesitate to contact us for further support.