Question & Answer > View Question

How to hide an information tile on ui builder based on a dynamic #formLookup value in Joget?

Confluence User - 18 Aug, 2025

Hello everyone,

I'm trying to conditionally hide an information tile component in a Joget app based on a user's medical status, which is loaded dynamically. The goal is to hide the entire tile if the status is "Not Eligible".

My script works, but only after I refresh the page. On the initial page load, the tile still shows up.
Heres's the tile's code:

<!--{sampleWidth: '250px', tags: 'light-bg icon'}-->
<div class="card flex-row align-items-center 
            align-items-stretch pr-2 pl-4 medical-info-tile"
     style="height:{{height}};
            background-color:{{bgColor}}; 
            background-image:url('{{bgImg}}');">
    <div style="position: absolute;
                top: 5px;
                right: 5px;
                z-index: 1;">
        {{reload}}
    </div>
    <div class="stats-icon col-4 p-0 d-flex align-items-center 
                justify-content-center rounded-left">
        <span style="font-size: 32px; 
                     height: 66px; 
                     width: 66px; 
                     line-height: 58px; 
                     border:4px solid #ffffffcf; 
                     text-align:center; 
                     border-radius:50%; 
                     background-color:{{color||#563d7c}}; 
                     color:#fff">
            {{icon||<i class="fas fa-globe"></i>}}
        </span>
    </div>
    <div class="stats-info py-3 pr-3 pl-2  col-8">
        <div class="d-flex flex-row align-items-center" 
             style="font-size: 24px; 
                    margin-bottom: 10px;">
            
            <span class="status-value" style="display: none;">#formLookup.master_employee.status_medical[name={currentUser.fullName}]#</span>
            
            <span>Rp </span>
            <span id="inapBalance">
                #formLookup.master_pfd_in.balance[employee_name={currentUser.fullName},year={date.yyyy}]#
            </span>
        </div>
        <h4 style="font-size: 12px;
                   color: rgba(0,0,0,.6);
                   margin: 5px 0;">
            {{title||TOTAL VISITORS}}
        </h4>
    </div>
</div>
<!---->

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const el = document.getElementById("inapBalance");
        const num = parseFloat(el.innerText);
        if (!isNaN(num)) {
            el.innerText = num.toLocaleString("id-ID");
        }  
        
        const statusElement = document.querySelector('.medical-info-tile .status-value');

        if (statusElement) {
            const medicalStatus = statusElement.textContent.trim();

            if (medicalStatus === 'Not Eligible') {

                const tileToHide = statusElement.closest('.medical-info-tile');
      
                if (tileToHide) {
                    tileToHide.style.display = 'none';
                };
            };
        };
    });
</script>

dashboard;customhtml;javascript;hashvariable

2

Confluence User •

21 Aug, 2025 •

confluenceUser •

•

confluenceUser •

Thank you for the question Angel.

It happens because your script is running too early. On the initial load, Joget placeholders like #formLookup.master_employee.status_medical[...] aren’t immediately resolved into actual values, they get filled in after the page has rendered (via AJAX / directory data lookup). When you hook your script to DOMContentLoaded, the <span> still contains the raw placeholder or an empty string, so your if (medicalStatus === 'Not Eligible') check doesn’t trigger. On refresh, the cached values show up faster, which is why it seems to work then.

A solution that I would reccommend is to use MutationObserver, which lets you watch for content changes and react when your placeholder value resolves. Here's a sample code:

const statusElement = document.querySelector('.medical-info-tile .status-value');
if (statusElement) {
  const observer = new MutationObserver(() => {
    const medicalStatus = statusElement.textContent.trim();
    if (medicalStatus === 'Not Eligible') {
      const tile = statusElement.closest('.medical-info-tile');
      if (tile) tile.style.display = 'none';
      observer.disconnect();
    }
  });
  observer.observe(statusElement, { childList: true, characterData: true, subtree: true });
}

For more information regarding this Web API, check out MutationObserver

Confluence User •

22 Aug, 2025 •

confluenceUser •

•

confluenceUser •

Hi. Thank you for your help, the mutation observer works well.

1

CSV | Excel | XML | PDF

Your answer

Print

How to hide an information tile on ui builder based on a dynamic #formLookup value in Joget?

2

RELATED QUESTIONS

Your answer

To answer a question you'll need an account.

2.builder-style-a5ad4560-b873-4ae1-8f58-ffc69c8815b2{color:#008C60 !important;}

RELATED QUESTIONS

Your answer.builder-style-ebe764f6-a025-456f-bc69-f0aa906ec4de{color:#008C60 !important; margin-left:10px !important;}

To answer a question you'll need an account.

2

Your answer