Unanswered

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

(1) Share

Report

Posted on by Community Power Pla...

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.

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

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

All responses (5)

Answers (0)

KevinGador 639 Super User 2025 Season 1 on at

Like (0)

Report

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 Microsoft Employee on at

Like (1)

Report
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 9,342 Most Valuable Professional on at

Like (0)

Report

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 Pla... on at

Like (0)

Report

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 9,342 Most Valuable Professional on at

Like (2)

Report
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.