• Ritika Agarwal

Toggle field visibility based on another field in Power Apps Portals

In this blog post, I will walk through the steps you can follow to toggle the visibility of a field based on value present in another field present on the form. This is helpful for folks who want to show fields only on specific conditions on the form.


Problem Statement


How to toggle visibility of field on entity form? How to use script to update the field properties in Power Apps Portals? How to apply the business rules in Power Apps Portals?


Solution


There are a number of operations we can do on the fields present on a page in Power Apps Portals. In this blog we will focus on visibility of fields based on another field on the same form. If you do not want to display filter criteria field on the form even though you want to filter based on that, then you can add the field to form and we can add a script to hide the field on page load.


Scenario: Let's consider a scenario where we only want to show the Passport Number field if the user has selected the checkbox for "Do you hold a passport?" field which is a two options data type field.


By default, business rules on the CDS are not applied to Power Apps Portals Entity Forms. To enable the feature, we can add a jQuery script to apply custom logic. This script can be added in the Custom JavaScript section on the Web Page.


Note: To get the names of different components in the page, you can place the form on page and Inspect the code to get the specific values.


jQuery Script


$('input[type="radio"]').click(function(){

var selectedoption = $("input[name='ctl00$ContentContainer$EntityFormControl_8b6aadff5fc0ea11a812000d3a340464$EntityFormControl_8b6aadff5fc0ea11a812000d3a340464_EntityFormView$crf61_holdpassport']:checked").val();

if(selectedoption == "1"){

$('table[data-name="PassportDetails"] tr:eq(0) td:eq(1)').show();

}

else

{

$('table[data-name="PassportDetails"] tr:eq(0) td:eq(1)').hide();

}

});


Explanation


#1: $('input[type="radio"]').click(function(){}

This function is triggered when the input on the radio button control is changed. In this case, we have a radio button on the form but if it differs for your scenario, you can update the function trigger.


#2: var selectedoption = $("input[name='ctl00$ContentContainer$EntityFormControl_8b6aadff5fc0ea11a812000d3a340464$EntityFormControl_8b6aadff5fc0ea11a812000d3a340464_EntityFormView$crf61_holdpassport']:checked").val();


Here, we are creating a variable "selectedoption" to store the value of selected option in radio button control.


To get the name of the input control, you can inspect the page and copy the name from code.

The highlighted part contains the name of control and it can be used for identifying the field.


#3: if(selectedoption == "1"){

$('table[data-name="PassportDetails"] tr:eq(0) td:eq(1)').show();

}

else

{

$('table[data-name="PassportDetails"] tr:eq(0) td:eq(1)').hide();

}


This "if" loop checks if the radio button is selected or not. If selectedoption variable is 1 then "Yes" is selected and the text input gets displayed else it will be hidden.


To locate the input field on the form, you can use jQuery to identify it. Let's talk about the form structure that is displayed on Power Apps Portals.


Each section in the main form is rendered as a table and the fields inside the form are displayed in rows. The number of columns in the table depends on the layout of section, if there is a two-column section present on the form then there will be two columns in the table on Power Apps Portals.


$('table[data-name="PassportDetails"] tr:eq(0) td:eq(1)').show();


"data-name" attribute of the table is the name of section in the form. You can get this from the main form or inspect the page in similar way.

To get the correct values to locate the Passport Number field tr:eq(0) td:eq(1)

tr:eq(index) - Row Index & td:eq(index) - Column Index


Note: Indexing starts from 0.


.show() and .hide() is used toggles the visibility of required field.


If you want to hide the field on page load, you can call the same function to store the default value and then check the same condition to show/hide field.


DEMO


In this post we saw how to implement business logic in Power Apps Portals. This adds an additional functionality to show/hide fields based on values in other fields. This overcomes the limitation of CDS business rules in Power Apps Portals.

I hope this was useful for you. In case of any questions or suggestions, feel free to reach me out on twitter at @agarwal_ritika.

Get All the New Posts to Your Inbox
© 2020. Ritika Agarwal
  • LinkedIn
  • Twitter