Skip to main content
Community site session details

Community site session details

Session Id :
Power Pages - Power Apps Portals
Unanswered

Show/Hide fields, based on the selection of a dropdown

(1) ShareShare
ReportReport
Posted on by

Hi,

 

Please can somebody help me out. I do have a form with 28 question, which will be filled in through the portal. Also on smartphones etc. Those 28 questions are related to an option set: "Ja, Nee, N.V.T". Based on the selection ("Nee or N.V.T.) below the drop down a text field should become visible. I know how to achieve this in a model driven app, based on the rules which can be set. But I want to be able to do this on the Portal as well. Maybe it is just a checkbox which need to be set, but I haven't found it yet.

 

Screenshots from model driven, as it needs to be in the portal (if possible) attached. 

 

Selction "ja", no extra text needed.

Kroontje_0-1598254941365.png

 

Selection"Nee", textfield becomes visible. If possible, this also needs to be required.

Kroontje_1-1598254966977.png

 

 

If somebody knows the solution, it would be very welcome. If more information is needed, I will provide as much as possible.

 

 

  • KevinGador Profile Picture
    654 Super User 2025 Season 2 on at
    Show/Hide fields, based on the selection of a dropdown
    I think the problem with putting it as a required field and just hiding it is that when the form submits, it will still say its a required field if theres no input on that hidden field
  • justinburch Profile Picture
    Microsoft Employee on at
    Re: Show/Hide fields, based on the selection of a dropdown

    Hi @Anonymous,

     

    It sounds like you want a field to be conditionally required (if X, then show and require. Else, hide and not required) Yes, this is possible. Note that making the field required with Entity Form Metadata will cause issues when you hide the required field, so using JS to set Required only client-side can be beneficial.

     

    This is a common set of methods I use:

    setRequired = function (fieldName) {
     var $label = $("#" + fieldName + "_label");
     $label.parent().addClass("required");
     addValidator(fieldName, $label.text());
    };
    
    setOptional = function (fieldName) {
     var $label = $("#" + fieldName + "_label");
     $label.parent().removeClass("required");
     removeValidator("RequiredFieldValidator" + fieldName);
    };
    
    addValidator = function (fieldName, label) {
     var nV = document.createElement("span");
     var message = "<span class='font-weight-bold'>" + (typeof label === "string" ? label : fieldName) + "</span> is a required field.";
     nV.style.display = "none";
     nV.validationGroup = "";
     nV.initialvalue = "";
     nV.id = "RequiredFieldValidator" + fieldName;
     nV.controltovalidate = "#" + fieldName;
     nV.errormessage = "<a href=\'#" + fieldName +
     "_label\' onclick=\'javascript&colon;scrollToAndFocus(\"" + fieldName + "_label\",\"" +
     fieldName + "\");return false;\'>" + message + "</a>";
     var $field = $("#" + fieldName);
     nV.evaluationfunction = function () {
     var value = $field.val();
     return typeof value === "string" && value !== "";
     };
     var $validator = $field.closest("td").find("div.validators");
     if ($validator.length === 0) {
     var $info = $field.closest("td").find("div.info");
     $validator = $("<div class='validators'></div>").appendTo($info);
     }
     $validator.append(nV);
     window.Page_Validators.push(nV);
    };
    
    removeValidator = function (validatorId) {
     $.each(window.Page_Validators, function (index, validator) {
     if (validator !== null && validator !== undefined &&
     validator.id === validatorId) {
     window.Page_Validators.splice(index, 1);
     }
     });
    };

    Use is setOptional(new_FieldId) to make not required (call when hiding) and setRequired(new_Fieldid) when showing.

     

    This works best if there's at least one actual Required field (so that Page_Validators exists) - note that the window prefix may not be needed based on how you implement this. This code is done via a web file for me, but you can try in the Custom JS section of the Entity Form or a <script> tag in the template.

     

    Another option is to create a function called entityFormClientValidate, which is automatically called by the Submit button (assuming this is an Entity Form).

     

    I hope this helps,

    Justin

  • oliver.rodrigues Profile Picture
    9,342 Most Valuable Professional on at
    Re: Show/Hide fields, based on the selection of a dropdown

    Hi

     

    You don't need any code for setting the required field, please refer to the documentation I sent previously

    You need JS code for hiding/showing the field, please refer to the code I sent previously and also the blog post

     

    let us know if you are having any trouble with the configuration so we can help

  • Community Power Platform Member Profile Picture
    on at
    Re: Show/Hide fields, based on the selection of a dropdown

    Thanks for your reply. Is it also possible to set it required if visible throug the metadata?

     

    Do I need to add the code to the Entiti Form or to the metadata?

  • oliver.rodrigues Profile Picture
    9,342 Most Valuable Professional on at
    Re: Show/Hide fields, based on the selection of a dropdown

    Hi

     

    You can define a field required via Entity Form metadata: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/configure-web-form-metadata#validation

     

    To hide/show elements you need to add JavaScript logic

    I have a simple post on how to hide/show elements: https://oliverrodrigues365.com/2020/07/19/power-apps-portals-javascript-tip-01-hide-show-elements/

    You will also need to attach an event to the field for example:

    $(document).ready(function () {
     $("#<field name>").change(function () { FieldChanged(); });
    });
    
    FieldChanged = function(){
     var selectedValue = $("#<field name>").val();
     if(selectedValue == "my value")
     // hide show element
    };


    ------------

    If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Paul Stork – Community Spotlight

We are honored to recognize Paul Stork as our July 2025 Community…

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

Leaderboard > Power Pages

#1
Lucas001 Profile Picture

Lucas001 60 Super User 2025 Season 2

#2
Fubar Profile Picture

Fubar 55 Super User 2025 Season 2

#3
surya narayanan Profile Picture

surya narayanan 35