Jump to content

Hide (group of) fields based on another field's value


Recommended Posts

Hi,

 

I have created a Report DataPage for my client's information table. Now, there are some fields on my table that would be irrelevant/inapplicable for some types of clients (For the sake of this example, let's classify them as: Type A, Type B, and Type C).

 

I can easily do this in Forms using Rules but it seems that Rules is not yet available for results page and details page which have no editable fields.

 

Hoping someone can help

 

Many thanks in advance

-TroubleShooter (causing problems ^^v )

Link to comment
Share on other sites

Hello @TroubleShooter,

 

I came across this problem before and managed to find a really simple implementation related to this Tech-Tip.

https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-hide-fields-in-datapages/

 

But instead of manually putting the styles in the Style attribute, we'll be using classes and CSS. However, you need to make sure that you only have hyphens as a special character in the field value.

 

Do the following in order: 

1.) First is to enclose your field/group of fields in a <div> tag, or <table> tag in HTML Blocks. (You will only need two HTML Blocks at most. If you want to hide an HTML Block, just enclose it in a <div> tag ).

2.) Add a class attribute in your opening tag in this format (block1-[@field:type]). The opening tag should look something like <div class="block1-[@field:type]"> OR <div class="block1-[@field:type]">

Note: Try to predict the outcome of this syntax. (block1-typeA, block1-typeB, block1-typeC)

 

3.) Once you have setup the class on our HTML Blocks, it's time to define the CSS rules. Add a Header, disable the HTML Editor from the Advanced tab, and examine the code below.

<style>

  .block1-typeA {
  	display: none;
  }
  
  .block1-typeB {
  	display: none;
  }

</style>

Note: Only add rules that will match your predicted outcome. And make sure that it starts with a period(.) to denote that we are referring to a class.

 

Hope this information helps.

Regards,

DN31337

 

Link to comment
Share on other sites

Another approach is to use JavaScript. It's similar to the previous post but we're going to use JavaScript in this one.

 

By this approach:

1.) Same as previous post, first is to enclose your field/group of fields in a <div> tag, or <table> tag in HTML Blocks. (You will only need two HTML Blocks at most. If you want to hide an HTML Block, just enclose it in a <div> tag ).

2.) Instead of a class, put an ID attribute for each blocks we want to hide (the condition will be defined later in the JavaScript). Sample usage would be  <div id="block1"> OR <div class="block1">

3.) Once you have setup the class on the HTML Blocks, it's time to do JavaScript. Add a Footer, disable the HTML Editor from the Advanced tab, and paste the code below. (duplicate a whole block and edit the values as needed)

 

<script>
	
  /* Block BEGIN */
 
  var elemId = "block1";
  var fieldName = "[@field:type]";
  var fieldEqualTo = "typeA";
  
    //Edits are unnecessary from this point to END
    var elem = document.querySelector(`[action*="[@cbAppKey]"] #${elemId}`);
    if (fieldName == fieldEqualTo) {
      elem.style.display = "none";
    }
    
  /* Block END */
   
</script>



Link to comment
Share on other sites

Hi @TroubleShooter,

In my opinion, a straight forward approach for this is to create an Authentication for each of your Users (Type A, Type B, and Type C). Then create a Report DataPage for each user type, and then implement Record Level Security. For more details about how to implement RLS kindly check this link https://howto.caspio.com/getting-started/record-level-security-stamping-new-records/

This way, you don't need to use / debug custom codes

Hope this helps.

Regards,

TsiBiRu

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...