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.
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: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
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
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 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.
Lucas001
60
Super User 2025 Season 2
Fubar
55
Super User 2025 Season 2
surya narayanan
35