How to hide a container box on dynamic item page.

Ask the community
,
7

Hi Wasim:
Not wanting to speak for Majd but let me see if I can solve your dilemma.
I think Majd was creating a hypothetical example where you have two boxes. One called $w(‘#maleContainer’) and one called $w(‘#femaleContainer’); You show the $w(‘#maleContainer’) if the value of the itemObj property gender has the value ‘male’.

if (itemObj.gender === 'male') { 
    //condition 
    $w('#maleContainer').show();

Since the other gender possibility in this example is ‘female’. If the property gender does not have the value ‘male’ then the else condition is triggered and the $w(‘#femaleContainer’) is shown instead.

} else {
    $w('#femaleContainer').show();
}

Because you didn’t give any information about the names of the boxes on your dynamic pages Majd made something up.

His example could have used more generic names like
$w(‘#box1’) and $w(‘#box2’) so the code for your example could also be written like this

 let itemObj = $w("#myDataset").getCurrentItem(); // get the current item
 // Hide all boxes
 $w('#box1').hide();
 $w('#box2').hide();
 $w('#box3').hide();
 $w('#box4').hide();
 // Only show the boxes we have data for
 if(itemObj.box1Value !== null) {
      $w('#box1').show();
 } 
 if(itemObj.box2Value !== null) {
      $w('#box2').show();
 }
 if(itemObj.box3Value !== null) {
      $w('#box3').show(); 
 }
 if(itemObj.box4Value !== null) {
      $w('#box4').show(); 
 }

Hope this makes sense to you now.