cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Kroontje
Frequent Visitor

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

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.

 

 

4 REPLIES 4
OliverRodrigues
Super User II
Super User II

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#valid...

 

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.




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.

Power Apps Portals Super User


Oliver Rodrigues


 

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?

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




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.

Power Apps Portals Super User


Oliver Rodrigues


 

Hi @Kroontje,

 

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

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Power Apps June 2021

June Power Apps Community Call

Don't miss the call this month on June 16th - 8a PDT

Users online (81,245)