Show/Hide Form Sections in Power Pages

(0) Share

Report

Posted on by jordanbbardwell

How do you properly show/hide form sections in Power Pages?

I tried using a business rule and that didn't work.

I tried using Javascript based on a yes/no field called remote. Here is my form:

Screen Shot 2022-09-09 at 11.25.17 AM.png

Here is my Javascript&colon;

$(document).ready(function () {
 $("#cr92a_remote").change(function () { FieldChanged(); });
});

FieldChanged = function(){
 var selectedValue = $("#cr92a_remote").find("input[type='radio']:checked").val();
 if(selectedValue == true){
 $("table[data-name='sec_shipping']").parent().show(); /// and .hide();
 }
 else{
 $("table[data-name='sec_shipping']").parent().hide(); /// and .hide();
 }
};

My section name is sec_shipping on the form designer.

Categories:

General topics

I have the same question (0)

All responses (7)

Answers (0)

Sort by

ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!
Hi @jordanbbardwell

You can use vanilla JS / Jquery to hide your sections. In addition to "document. ready", try adding the trigger for the form by finding the form id. Adding sample below.

$(document).ready(function () { $("#EntityFormControl_enityformcontrolid").on("loaded", function () { // your logic }); });

Please give it a try and let us know.

Hope it helps.
------------

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

Was this reply helpful? Yes No
jordanbbardwell 6 on at

Like (0)

Report
Copy link

Link copied!

I'm not sure I follow. What does finding the form ID have to do with the section?

Was this reply helpful? Yes No
jordanbbardwell 6 on at

Like (0)

Report
Copy link

Link copied!

I'm not sure I follow. What does finding the form ID have to do with the section?

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

Hi @jordanbbardwell

Sections are part of the form. You have to get the form id and then the child section id to trigger your jquery properly.

Hope it helps.
------------

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

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

$("table[data-name='<section name>']").parent().hide(); // show();

Was this reply helpful? Yes No
shakirullah12 10 on at

Like (0)

Report
Copy link

Link copied!

Hi @ragavanrajan, If we want to hide the complete form with out any condition, Actually i want to hide out of the box form and add a custom HTML and than stored the data from the HTML form to the actual form?
If you could help me i will be very thankful.

Was this reply helpful? Yes No
GWham1 on at

Like (1)

Report
Copy link

Link copied!
/*********************************** ** HIDE FIELDSET BY NAME ***********************************/ // via js $("body").find("fieldset[aria-label='General']").hide(); // via css fieldset[aria-label="Hidden"]{ display:none; } /*********************************** ** HIDE SECTION BY NAME ***********************************/ // via js $("body").find(".section[data-name='General']").hide(); // via css .section[data-name="General"]{ display:none; } /*********************************** ** HIDE ROW BY FIELD-ID ***********************************/ // via js $("#fieldid").closest("tr").hide();

Was this reply helpful? Yes No