To implement Accordion Pane functionality in Dynamics 365 CE using Custom Web resources#

Often, businesses require customized functionalities to streamline processes and enhance user experience. I got to work on one such customization is to implement an accordion pane like functionality using custom Webresources(html and js). Let’s walk through the steps to implement accordion pane functionality in Dynamics 365 forms, allowing users to toggle between sections of related content.

Create HTML Web Resources

For accordion button, create a HTML web resource. This web resource will contain the HTML and JavaScript code to handle the accordion functionality.

Add a Html button.
Add a function to handle button click event.
Add CSS styles.
Add a function to pass formcontext from Dynamics 365 Form onLoad.

<!DOCTYPE html>
<html>
<style>
  a {
    font: 13px "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin: 1em;
    text-decoration: none;
    width: 100%;
    display: block;
    height: 70%;
  }
 
  .button1 {
    color: white;
    background-color: #2d7eff;
    border: 5px solid transparent;
  }
 
  .button1:hover {
    color: #2d7eff;
    background-color: white;
    border: 5px solid #2d7eff;
  }
</style>
 
<body>
 
  <a href="#" class="button1" onclick="handleClick(this)">Show</a>
 
</body>
<script>
  const urlParams = new URLSearchParams(window.location.search);
  const myParam = urlParams.get('data');
 
  var formContext;
 
  function setFormContext(_formContext) {
    formContext = _formContext;
    if (myParam == "button1") {
      document.getElementsByClassName('button1')[0].innerText = "Show All Accounts"
    } else if (myParam == "button2") {
      document.getElementsByClassName('button1')[0].innerText = "Show Related Accounts"
    }
  }
 
//In the HTML web resources for the button sections, implement JavaScript code to handle button click events. When a button is clicked, it should show its corresponding content section and hide the other content sections.
  function handleClick(btn) {
    if (myParam == "button1") {
 
      if (formContext.ui.tabs.get("general").sections.get("general_section_4").getVisible() != true) {
        document.getElementsByClassName('button1')[0].innerText = "Hide All Accounts"
        formContext.ui.tabs.get("general").sections.get("general_section_4").setVisible(true);
      } else {
        document.getElementsByClassName('button1')[0].innerText = "Show All Accounts"
        formContext.ui.tabs.get("general").sections.get("general_section_4").setVisible(false);
      }
 
      var wrControl2 = formContext.getControl("WebResource_new_2");
      if (wrControl2) {
        wrControl2.getContentWindow().then(
          function (contentWindow) {
            contentWindow.document.getElementsByClassName('button1')[0].innerText = "Show Related Accounts"
          }
        )
      }
      formContext.ui.tabs.get("general").sections.get("general_section_6").setVisible(false);
 
    } else if (myParam == "button2") {
 
      if (formContext.ui.tabs.get("general").sections.get("general_section_6").getVisible() != true) {
        document.getElementsByClassName('button1')[0].innerText = "Hide Related Accounts"
        formContext.ui.tabs.get("general").sections.get("general_section_6").setVisible(true);
      } else {
        document.getElementsByClassName('button1')[0].innerText = "Show Related Accounts"
        formContext.ui.tabs.get("general").sections.get("general_section_6").setVisible(false);
      }
 
      var wrControl1 = formContext.getControl("WebResource_new_1");
      if (wrControl1) {
        wrControl1.getContentWindow().then(
          function (contentWindow) {
            contentWindow.document.getElementsByClassName('button1')[0].innerText = "Show All Accounts"
          }
        )
      }
      formContext.ui.tabs.get("general").sections.get("general_section_4").setVisible(false);
 
    }
  }
</script>
 
</html>

Add the button web resource to Dynamics 365 Solution.

Customize the Form

Open the Power platform Form editor and add the HTML web resources to the respective sections on the form.

ref1

Design the Sections

Section 1: Button web resource for the first accordion pane
Section 2: Content for the first accordion pane
Section 3: Button web resource for the second accordion pane
Section 4: Content for the second accordion pane

Pass formContext

For passing the formContext from the form to the button web resource, create a Form onLoad() function.

function form_onload(executionContext) {
    var formContext = executionContext.getFormContext();
    var wrControl1 = formContext.getControl("WebResource_new_1");
    if (wrControl1) {
        wrControl1.getContentWindow().then(
            function (contentWindow) {
                contentWindow.setFormContext(formContext);
            }
        )
    }
    var wrControl2 = formContext.getControl("WebResource_new_2");
    if (wrControl2) {
        wrControl2.getContentWindow().then(
            function (contentWindow) {
                contentWindow.setFormContext(formContext);
            }
        )
    }
}

Add Library to Dynamics 365

Add the Form events by uploading the JavaScript file to Dynamics 365 and add the form_onload function to the form events.

ref1

Test the Accordion Functionality

Save and publish your form customization changes, then test the accordion functionality within the Dynamics 365 environment. Verify that clicking the buttons toggles the display of content sections as expected.

Conclusion

Implementing accordion pane functionality in Dynamics 365 forms enhances user experience by providing an organized and clutter-free layout for displaying content. By following the steps outlined in this tutorial, you can customize your forms to include accordion panes and improve usability.