Hi everyone,
I would like to make tabs visible if the tab id is present in the json of the connect server that executes the query on the DB, do you have any advice?
I suppose you could include the specific elements (the button and its tab content) in a conditional region
(2 conditional regions... 1 for the button and 1 for the tab content)
Based on the serverconnect query's value
If you have problem please share your code to help you with it... 
In this case I would like to set the visibility of a Tab if, for example, the id d449947f-4a12-4f4e-9227-e18eb57036a5 is present in the json
Yes, that is what I said...
Share your code so we can make the needed change/addition..
Here is an example...
<ul class="nav nav-tabs" id="navTabs1_tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="navTabs1_1_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true">Home</a>
</li>
<div id="conditional1" is="dmx-if" dmx-bind:condition="1==0">
<li class="nav-item">
<a class="nav-link" id="navTabs1_2_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_2" role="tab" aria-controls="navTabs1_2" aria-selected="false">Profile</a>
</li>
</div>
<li class="nav-item">
<a class="nav-link" id="navTabs1_3_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_3" role="tab" aria-controls="navTabs1_3" aria-selected="false">Messages</a>
</li>
</ul>
<div class="tab-content" id="navTabs1_content">
<div class="tab-pane fade show active" id="navTabs1_1" role="tabpanel">
<p>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p>
</div>
<div id="conditionalContent" is="dmx-if" dmx-bind:condition="1==0">
<div class="tab-pane fade" id="navTabs1_2" role="tabpanel">
<p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p>
</div>
</div>
<div class="tab-pane fade" id="navTabs1_3" role="tabpanel">
<p>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p>
</div>
</div>
Here I have a nav list tab content with 3 tabs... The middle one is not rendered because of the conditional region's dmx-bind:condition="1==0"
In your case you just replace the above condition with the desired value...
foe example
dmx-bind:condition="json.custom.RC_ID.length()>0"
Thanks for the example, what I can't understand is how to verify that a certain ID is present within the Json since the json is an array of values, e.g.: dmx-bind:condition="json.custom.RC_ID .contains('d449947f-4a12-4f4e-9227-e18eb57036a5')
- Avoid including a tab-content inside a conditional region...
You better add directly to the tab-content theis="dmx-if" dmx-bind:condition="1==0"
<div class="tab-pane fade" id="navTabs1_2" role="tabpanel" is="dmx-if" dmx-bind:condition="1==0">
<p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p>
</div>
The content of the json is based on the tabs, right?
So, if there is RC_Titiolo=='Legale'"
Probably using the where formatter
My tab panel is static and not based on json, so I have to set the visibility of a tab if I find a specific ID within the json
the RC_ID is known from your database and you need just to search if there is a RC_ID with this value inside your whole JSON????
IN ANY PLACE INSIDE YOUR JSON???
Yes exactly
Try this:
is="dmx-if" dmx-bind:condition="json_MetaData.data.metatags.where(RC_ID, known_DB_uuid, '==')"
- known_DB_uuid is a "variable" that contains your RC_ID value... You adjust this field with the one that contains your RC_ID
I tried with this code but it doesn't work dmx-show="ScCategorieRep.data.custom.metatags.where(RC_ID, 'd449947f-4a12-4f4e-9227-e18eb57036a5', '==')"
.where will return an array, this will always evaluate to true:
Or more beginner friendly check:
The size of the array must be checked, perhaps with the count formatter or with the .length property if it works (the count formatter is a Wappler thing, in real JavaScript the .length property is used)
You don't have a "metatags" property in your JSON
And then the size of the array must be checked, as per my previous post
1 Like
replace the above
with:
is="dmx-if" dmx-bind:condition="json_MetaData.data.metatags.where(`RC_ID`, known_DB_uuid, '==')[0].RC_ID">
IN YOUR CASE:
"ScCategorieRep.data.custom.where(`RC_ID`, 'd449947f-4a12-4f4e-9227-e18eb57036a5', '==')[0].RC_ID"I tried this method but I have no results
I don't know what happens to your code...
In my test example this code is working:
"ScCategorieRep.data.custom.where(`RC_ID`, 'd449947f-4a12-4f4e-9227-e18eb57036a5', '==')[0].RC_ID"
We returnthe first record of the json's array IF the RC_ID has a value of "d449947f-4a12-4f4e-9227-e18eb57036a5"
Which returns true or false (depending on if a RC_ID has this value inside the json)
Please check your code and better try to bind it through the UI...
on your browser?
