Rollbase: Toggling a Field’s visibility based on another field value [UPDATED]




[UPDATE – This only works for Rollbase 3.x. I am working on the equivalent article for Rollbase 4. Stay tuned…]

Sometimes you want to show or hide a field on a view or an edit page based on another field’s value.

Let us say for example that you have an amendment to a local planning guide – if the amendment has been endorsed as conforming to planning policies, then you want to store and show when that endorsement took place – otherwise it is not necessary to show or store such a date.

The rest of this article assumes you are in Rollbase, have created an appropriate object and have provided an “Amendment Conforms” field – which is a picklist of “Yes” and “No” – as well as a Date of Endorsement field – which is a simple Date field.

To toggle a field’s visibility on a view page

Add a script towards the bottom of the page.
For a view page, add a script towards the bottom of the page. The script can look like:

    if($("#rbi_F_Amendment_Conforms").text().indexOf("No") > -1) {

Essentially you determine the values of a particular field that would determine if another field is hidden or not. The script will execute once the page has opened, as you have placed it towards the bottom of the page – note it has to appear AFTER the field you want to hide. It only needs to execute once, so it isn’t wrapped in a function – and it will execute only once each time the view page is loaded – so if the record is edited, upon returning to the view page, it will set the appropriate visibility.

Note that we hide both the label and the field.

To toggle field visibility on an edit (or new, etc) page

For an edit page, the process is slightly more complex. The difference is that you are likely to want to toggle the visibility every time the value changes editing the field (for example, when picking “No” from a picklist, you may want another field to immediately go invisible).
Firstly add a script towards the bottom of the edit page:

    function toggleDateOfEndorsement() {
        $("#rbi_F_Date_of_Endorsement").css("visibility",($("#Amendment_Conforms option:selected").text() == "Yes")?"visible":"hidden");
        $("#Date_of_Endorsement").toggleClass("requiredInput",($("#Amendment_Conforms option:selected").text() == "Yes"));
        $("#rbi_L_Date_of_Endorsement").css("visibility",($("#Amendment_Conforms option:selected").text() == "Yes")?"visible":"hidden");

Note that the code in this case is encased within a function – and that we execute that function once to set up visibility properly upon entering the edit screen.

The next step is to go and add a JavaScript event handler.

Edit the object and scroll down to the list of fields. When you get to the field you wish to watch for changes (NOT the field you want to hide), click on Events and add a onChange event.

In the script above, you can see that I show the Date Of Endorsement label and field if Amendment Conforms is set to “Yes” and hides it otherwise, so I would add an event to the Amendment Conforms field

Screen Shot 2015-05-29 at 3.37.26 pm

In the onChange field, I add the function call and click on Save:

Screen Shot 2015-05-29 at 3.37.40 pm

Now, every time the user changes Amendment Conforms value (in this app through a picklist selection) the onChange event is triggered, and the Date of Endorsement label and field are either shown or hidden based on the new value.

Bonus content

In this case, I also wanted to make it mandatory to include a Date of Endorsement value if the Amendment Conforms value was set to “Yes”, but empty that field if Amendment Conforms is “no”. If I make the field mandatory in the app, saving will fail if Date of Endorsement contains no value and “No” is selected as the value for Amendment Conforms value – even if the field is hidden in the edit page.

Rollbase at the moment does not support the option of conditional mandatory (that’s my term for this), so I solved this requirement in three stages.

The first thing I did was to make the Date of Endorsement field look like it was mandatory, by adding the “requiredInput” class. This simply highlights the field in the web UI as if it was mandatory. It doesn’t actually make the field mandatory, but gives the visual cue to encourage the user to treat it as such and thus provides a consistent UI behaviour. I figured out this class by going to an edit page for an object and inspecting an element for a mandatory field. This is the line:

$("#Date_of_Endorsement").toggleClass("requiredInput",($("#Amendment_Conforms option:selected").text() == "Yes"));

In the hide field script for the edit page shown above.

Secondly, I added a validation script to the Amendment Conforms field, that will return an error message if Amendment conforms is set to “Yes”, and there is no Date of Endorsement:

if("{!Amendment_Conforms#value}" === "Yes" && ("{!Date_of_Endorsement}" === "")) {
  return "If the amendment conforms to a WAPC endorsed Local Planning Strategy, then a Date of Endorsement is required";
return null;

Note for validation you write a script that, if you don’t want an error generated, returns null, otherwise return a string – the string becomes the error message, triggers an error and is displayed near the field in the UI. The user does not leave the page until they have a date entered, hit cancel, closes the browser tab/window or set Amendment Conforms to “No”.

Finally, I added a trigger on the object that executes whenever Amendment Conforms is updated:

if ("{!Amendment_Conforms#value}" === "No") {
  rbv_api.setFieldValue("EPA_48A_Referral", {!id}, "Date_of_Endorsement", null);

As you can see, it empties the Date of Endorsement field if Amendment Conforms has been set to “No”

Any questions? Post in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *