Show field in a form based on another field

(0) Share

Report

Posted on by TonjeWaasjo

216

Hi,

I have a look up field to a table in a form. If you choose answer "B", I want a field to show up in the form. If you choose another value, the field should not show. In Power Apps I would use a business rule, but I understand that business rules don't work in Power Pages forms.

What can I use instead?

Categories:

General topics

I have the same question (0)

All responses (7)

Answers (1)

Suggested answer

Schjoermann 18 on at

Like (0)

Report

Hi Tonje,

This should be done with javascript.

The script should look like the following.

// Wait for the form to load and execute the script when the DOM is ready
$(document).ready(function() {

// Function to check the value of the desired lookup field and show/hide the available field
function toggleFieldVisibility() {
// Get the value of the desired lookup field (replace 'desired_lookup_field' with the actual field name)
var LookupValue = Xrm.Page.getAttribute("desired_lookup_field").getValue();

// Get the field to show/hide (replace 'relevant_field' with the actual field name)
var availableFieldControl = Xrm.Page.getControl("relevant_field");

// Check if the desired lookup field has the specific value (replace 'specific_value' with the actual GUID for "B")
if (desiredLookupValue != null && desiredLookupValue[0].id === 'specific_value') {

// If it matches, show the available field
availableFieldControl.setVisible(true);
} else {
// If it doesn't match, hide the available field
availableFieldControl.setVisible(false);
}
}

// Call the toggle function initially to set the correct visibility
toggleFieldVisibility();

// Add an event listener to the desired lookup field to trigger the function when it changes
Xrm.Page.getAttribute("desired_lookup_field").addOnChange(toggleAvailableField);
});

This code should be added under "Advanced" for the relevant webpage.

If this answer replies to your question, please mark it as verified answer.

Best Regards

Was this reply helpful? Yes No
Suggested answer

Fubar 8,338 Super User 2025 Season 2 on at

Like (1)

Report
Ignore the other post the "Xrm" object is not exposed in Power Pages (is also using deprecated features for Model Driven apps).

You will need to do it in JQuery or JavaScript, the basic show hide line is below - you would also need to hook up an on change event on the field that triggers the show/hide (and wrap in a JQuery document ready block).

$('#field_logical_schema_name').parent().parent().hide(); //.show() // another variation would be to use something like // $('#field_logical_schema_name').closest("td").find("div.control, div.info").hide();

Was this reply helpful? Yes No
TonjeWaasjo 216 on at

Like (0)

Report

Thanks for that Fubar,

This is my code. The field is hidden, but when I change the value of the field to "Ikke funnet" nothing happens. The field #ino_vessel_name is a lookup field from another table.

$(document).ready(function () {

$("#ino_vesseltempname_label").hide();

$("#ino_vesseltempname").hide();

$("#ino_vessel_name").on("change", onVesselChange);

});

function onVesselChange() {

var varChange = $('#ino_vessel_name').val()

if(varChange == "Ikke funnet") {

$("#ino_vesseltempname_label").show();

$("#ino_vesseltempname").show();

}

}

Was this reply helpful? Yes No
Suggested answer

steven99500 17 on at

Like (0)

Report
Hi TonjeWaasjo,

Thank you for your question regarding the conditional visibility of fields in Power Pages forms.

You are correct that business rules from Power Apps do not apply in Power Pages forms. Instead, you can achieve the desired functionality by using JavaScript to control the visibility of fields based on the selection made in the lookup field. Here’s a basic outline of how you can implement this:

Add JavaScript to Your Form:

You can include custom JavaScript in your Power Pages form to handle the visibility logic. This can be done by editing the form and navigating to the Form Properties.

Use theonChangeEvent:

Attach anonChangeevent to the lookup field. In the JavaScript function, check the selected value. If it is "B", make the additional field visible; otherwise, hide it.

Example Code:

function onLookupFieldChange() { var lookupField = document.getElementById("lookupFieldId"); // Replace with the actual ID var additionalField = document.getElementById("additionalFieldId"); // Replace with the actual ID if (lookupField.value === "B") { additionalField.style.display = "block"; // Show the field } else { additionalField.style.display = "none"; // Hide the field } } document.getElementById("lookupFieldId").addEventListener("change", onLookupFieldChange);

Testing:

After implementing the JavaScript, be sure to test it in your form to ensure that it works as expected.

If you need further assistance with the JavaScript or specific implementation details, please let me know!

Best regards,

Steven

Was this reply helpful? Yes No
Fubar 8,338 Super User 2025 Season 2 on at

Like (0)

Report

If the field in question is a lookup or choice the .val() will be the guid or id of the value not the text.

put a JavaScritpt 'debugger' key word in your code and then use your browsers debugger to check the values and if the change is being triggered.

Was this reply helpful? Yes No
TonjeWaasjo 216 on at

Like (0)

Report

Hi,

I have now changed my code so it is like this. "ino_vessel" is the logical name of the lookup field and "ino_vesseltempname" is the logical name of the field that should show or hide. The issue is still the same - the onLookupFieldChange is never called. Is it not the logical name of the lookup field that is the correct value for "lookupFieldId"?

$(document).ready(function () {

document.getElementById("ino_vessel").addEventListener("change", onLookupFieldChange);

});

function onLookupFieldChange() {

var lookupField = document.getElementById("ino_vessel"); // Replace with the actual ID

var additionalField = document.getElementById("ino_vesseltempname"); // Replace with the actual ID

if (lookupField.value === "Ikke funnet") {

additionalField.style.display = "block"; // Show the field

} else {

additionalField.style.display = "none"; // Hide the field

}

}

Was this reply helpful? Yes No
Verified answer

TonjeWaasjo 216 on at

Like (0)

Report

I figured it out and here is the code I ended up with. Hope it helps someone else =)

$(document).ready(function() {

console.log("document ready");

$("#ino_vesseltempname_label").hide();

$("#ino_vesseltempname").hide();

$('#ino_vessel').change(function() {

var type = $("#ino_vessel").find(":selected").val();

var varVessel = $("#ino_vessel").find(":selected").text();

if(varVessel === "Ikke funnet"){

$("#ino_vesseltempname_label").show();

$("#ino_vesseltempname").show();

} else {

$("#ino_vesseltempname_label").hide();

$("#ino_vesseltempname").hide();

}

});

});

Was this reply helpful? Yes No