Microsoft Dynamics 365 | Integration, Dataverse...

PowerApps Portal Show Section based on Choice

(0) Share

Report

Posted on by Sunny21

Good Day. Thank you for your interest.

We have a business requirement where where we want to display a Section on a Form depending on the drop down selection the customer makes. In our scenario, It is a Student Application form, customer can apply for a single student, dual enrollment or triple. So we want to be able to display one or more sections on the portal form depending on customers selection. We have successfully implemented this with fields but is it possible to do so with an entire section on the a form??

The choice column is highlighted below: logical name: "new_studentsiblingsapplying"

The student information fields are named the same way except that the logical name for is each is incremented by numerical digits.

Any ideas on how accomplish this would be greatly appreciated. Thank you again

Best Regards,

Sunny

All responses (3)

Answers (0)

Suggested answer

Community Member Microsoft Employee on at

Like (0)

Report
RE: PowerApps Portal Show Section based on Choice

Hi Sunny21,

Go to Settings > Customizations > Customize the system > entities > Opportunity > Fields:

--881990000 is value of the single student option for the "students siblings applying" field.

Then I roughly recreated your scenario:

1.Tab and sessions name

2.Code:

function showOrHideSection(executionContext) { var formContext = executionContext.getFormContext(); var studentSiblingsApplying = formContext.getAttribute("custom_studentsiblingsapplying").getValue();//replace your field name new_studentsiblingsapplying var tabObj = formContext.ui.tabs.get("General_Information");//Replace your tab name var sectionObj2 = tabObj.sections.get("General_Information_section_2");//Replace your section2 name var sectionObj3 = tabObj.sections.get("General_Information_section_3");//Replace your section3 name if (studentSiblingsApplying != null && studentSiblingsApplying == 881990000) //replace your field 'single student' option1 value { sectionObj2.setVisible(false); sectionObj3.setVisible(false); } else if (studentSiblingsApplying != null && studentSiblingsApplying == 881990001)//dual students option value { sectionObj2.setVisible(true); sectionObj3.setVisible(false); } else { sectionObj2.setVisible(true); sectionObj3.setVisible(true); } }

3.Add js to field OnChange event:

(1)Double-click the field to open one dialog to add new:

(2)Create new web resource:

(3)Add the new created web resource:

(4)Save and publish.

4.Test
Sunny21 90 on at

Like (0)

Report

RE: PowerApps Portal Show Section based on Choice

Thank You Leah. This is very helpful.

*sorry this may be a novice question but what is the field value? and how do I find it?

More importantly the "students siblings applying" is a choice field with 3 options: (single student, dual students, and triple). As you can see in my original post, there are 3 sections, one for each student. How do I adjust the code to show sections corresponding to the choice selection. For example, if the customer selects only (single) student, then I would need sections 2 and 3 hidden. Likewise if the customer chooses (dual) students, then I would need only sections 1 and 2 to be shown but section 3 hidden? Thank you again. your help is very much appreciated

Regards,
Suggested answer

Community Member Microsoft Employee on at

Like (1)

Report
RE: PowerApps Portal Show Section based on Choice

Hi Sunny21,

Yes, you can display one or more sections based on one field value through js code.

1.Functions:

formContext.ui.sections (Client API reference) in model-driven apps - Power Apps | Microsoft Docs

Syntax to get the section object:

var tabObj = formContext.ui.tabs.get(arg);

var sectionObj = tabObj.sections.get(arg);

Syntax to show/hide section:

sectionObj.setVisible(bool);

2.Get name of tab and section:

Go to Settings > Customizations > Customize the system > entities > Opportunity > Forms:

3.Code

function showOrHideSection(executionContext) { var formContext = executionContext.getFormContext(); var studentSiblingsApplying = formContext.getAttribute("new_studentsiblingsapplying").getValue(); var tabObj = formContext.ui.tabs.get("Summary");//Replace your tab name var sectionObj = tabObj.sections.get("Summary_CadenceWidget");//Replace your section name if (studentSiblingsApplying != null && studentSiblingsApplying == 267460000) //replace your field value { //show the section sectionObj.setVisible(true); } else { //hide the section sectionObj.setVisible(false); } }

Note: how to call an event on OnChange of the field:

How to use Javascript on Dynamics CRM 2011/2013/2015 form | Customer and Employee Engagement Blog (c5insight.com)