Hide HTML field

Hi,

I have a details page which contains several rows with HTML fields. Is there a way to hide/ show some rows based on CSS Selectors? Within Forms, I have the Display rules, but that doesn’t work for HTML fields. Anyone have a suggestion how to do this?

E.g. in the above setup my aim is to show or hide a total of 8 rows (all tied to the same CSS selector).

The answer is yes, you can use CSS to selectively hide/unhide HTML. The question is how are you deciding which to show or hide ? Is it a value in a specific field ? Or is it the page URL, or is it to do with a user level ? or …

@mtif

The condition whether the HTML fields are displayed is based on a radio ‘yes’’no’ button.

So the user submits a form and selects ‘yes or No’. After submitting the form the user is directed to a details page which shows the results and related HTML fields.

I tried with the css selectors, but that is only possible within forms and not not details pages and or HTML fields in rows.

Hi

I can think of two ways that you can acheive what you want. There are probably more.

  1. Use a javascript to read the specific field and decide whether to show or hide the css class name that you have applied to the fields that you want to show/hide.

  2. Recreate your details page using a Custom component. This way you can use {{handlebars}} page logic and show or hide any element based by testing {{#if field_XX}} is null or not.

@mtif

Thanks for your answer, but I need a little more guidance and or a walkthrough how to achieve this. Especially the handlebars suggestion, since this is completely new to me. Could you share some example code or example?

Ok

I am off the grid today, so only a short answer via phone.

And I’m sure there is a guide to the basic way to set up a Custom Component

But, in essence, you get to create an HTML page as you want it.

And into that page you can place your Table fields of data
As you do this will automatically be inserted looking something like this
{{field_xyz}}
This is the handlebars code.

Therefore you can recreate any Tadabase layout.

And what you can then do is add some other logic.

If field xyz should only show when field abc is true, then you would write

{{#if field_abc}} {{field_xyz}} {{else}} " "{{/if}}

I hope that helps

@mtif

Wow, great! Many thanks for the guidelines, I think I can work with this!

@mtif
Just in order to get it clear. The Custom Component is actually a data component? But it’s not available in my overview.? (see screenshot)
Are you referring to the standard HTML field or are the custom components not available anymore?

Custom Component is available (I think) in most user plans, you may have to ask support to activate it … I recall I did

I am still struggling with this issue, especially since I am looking for the JS code to use. Is there an example which I can use or modify? I see the issue regarding hide/ showing elements is coming back to the community several times, but only in forms and tables.\

It took some time, but this is the code:
where <{pageField.Show Components} = the element which indicates whether it should be shown or not… In my case a radio button (yes/no)

TB.render(‘component_3’, function(data) {
if (‘{pageField.Show Components}’ === ‘No’) {
TB.hideComponent(‘component_6’);
TB.hideComponent(‘component_9’);
}
});