Dynamics 365 Portals – Exporting Data

Dynamics 365 Portals provides us with very quick and simple ways to expose data from the D365 system into an external portal. Often, we have requirements to export or print the data using current Word Templates present in D365, but unfortunately there is no OOB feature (currently) for performing this task.

In this post, I will describe what is available using the OOB configuration from the portal, and how to extend it in order to export the data in the application. The idea of this post is not explain the Portal objects (Web Template,  Entity List etc), you can find content on the Dynamics 365 Portals on the following link:

https://docs.microsoft.com/en-us/dynamics365/customer-engagement/portals/configure-portal

For this demo, we will be using the following setup:

  • Dynamics 365 Trial (Version 1612 9.0.1.621)
  • Dynamics 365 Portals (Version 8.4.0.275)
    • Custom Portal
    • Audience: Customer

As a starting point, we will create an Entity List and Web Page record to present a list of the Active Contacts:

exportdata_1

exportdata_2

And this is how the list will be rendered by default in your Portal page:

exportdata_3

For Entity List records, we have the option (OOB) to add an Export to Excel button, this can be achieved by:

  • Open your Entity List record
  • Navigate to tab Options
  • In the Grid Configuration add a “Download” action and add a labelexportdata_4

This is how the button is shown on the Portal, and once clicked, you will download an Excel file with the list content:

exportdata_5

exportdata_6

Unfortunately, this excel file is rendered just like our Advanced Find Export to Excel feature, which is not bad, but usually when we have a Website, we (and our customers) want this information to be presented in a friendlier way.

So now, we are going to the fun part, let’s extend this by creating our custom “Print Button”, which will use the standard JavaScript function to print a Page.

For the purpose of this demo, we will create a new Page Template and Web Template. All Web Pages are linked to a Page Template record, which is also linked to a Web Template:

exportdata_7

exportdata_8

For the Web Template record, I basically copied the content from the OOB Web Template “Full Page” and removed a few lines, leaving only the condition that will render the Entity List.

Now I am going to update my Web Page records* pointing to the new created Page Template.

*remember that once we create a Web Page, in the background Dynamics 365 creates actually 2 records, so make sure both records are updated

At this moment, nothing has changed and our Web Page is behaving exactly the same way as before.

Now, we are going back to our recently created Web Template, and add the following instructions:

  • Give a name for the Div that is holding your Entity List
    <div id="listResultsPrint">
  • Create a variable with the total records in your Entity List (optional)
    {% entitylist id:page.adx_entitylist.id %}
       {% entityview id:params.view, search:params.search, order:params.order, page:params.page, pagesize:params.pagesize, metafilter:params.mf %}
         {% assign totalRecords = entityview.total_records %}
       {% endentityview %}
    {% endentitylist %}
  • Add the Button for printing (outside the div)
    {% if totalRecords > 0 %} 
    <form id="printForm">
      <input id="btnPrint" class="entitylist-download btn btn-info action" type="button" value="Print Contacts" />
    </form>
    {% endif %}
  • Add the JavaScript code that will actually perform the printing
    <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
    $("#btnPrint").live("click", function () { 
      var divContents = $("#listResultsPrint").html(); 
      var printWindow = window.open('', '', 'height=600,width=800');
      printWindow.document.write('Active Contacts'); printWindow.document.write(''); 
      printWindow.document.write(divContents); printWindow.document.write(''); 
      printWindow.document.close(); printWindow.print(); 
    });
    

Now this is the result we are getting:

exportdata_9

exportdata_10

Ok, now we can print, but what happened to my layout or any from the website???

Well, in the .JS code, we are actually creating a new HTML document, so we need to reference the .css there.

What I am also going to do, is add a new hidden DIV in the page with a custom logo (just create a Web File and upload your Logo in the notes), we can play around with showing/hiding the DIVs as we want in the JavaScript function, just make sure to set it up back to normal before the user closes the print window.

  • Add the following DIV inside your print DIV
    <div id="dvLogo" style="text-align:center; display:none">
      <img style="width: 300px;" src="/company-logo.png">
    </div>
    
  • Show the Logo before setting the HTML content, also hide the Command Bar which will contain your Search Box / View Selector / Create or Download button (in case you setup any of those)
    document.getElementById('dvLogo').style.display = 'block';
    document.getElementsByClassName("view-toolbar grid-actions clearfix")[0].style.display = 'none';
  • After setting the HTML Content, Hide the Logo and show again the Command Bar
    document.getElementById('dvLogo').style.display = 'none';
    document.getElementsByClassName("view-toolbar grid-actions clearfix")[0].style.display = block;
  • In the top of the HTML, before the, add:
    printWindow.document.write('<link rel="stylesheet" href="/bootstrap.min.css" />');

Now we have our Logo being shown only for the printed window, and we have the same layout as the Portal webpage.

exportdata_11

The following is the final code for the Web Template:

{% extends 'Layout 1 Column' %} 

{% block main %} 
  {% include 'Page Copy' %} 

  <div id="listResultsPrint">
    <div id="dvLogo" style="text-align: center; display: none;">
      <img style="width: 300px;" src="/company-logo.png" />
    </div>

    {% if page.adx_entitylist %} 
      {% include 'entity_list' key: page.adx_entitylist.id %} 
      
      {% entitylist id:page.adx_entitylist.id %} 
        {% entityview id:params.view, search:params.search, order:params.order, page:params.page, pagesize:params.pagesize, metafilter:params.mf %} 
          {% assign totalRecords = entityview.total_records %} 
        {% endentityview %} 
      {% endentitylist %} 
    
    {% endif %}

  </div>

  {% if totalRecords > 0 %}

  <form id="printForm">
    <input id="btnPrint" class="entitylist-download btn btn-info action" type="button" value="Print Contacts" />
  </form>

  {% endif %}

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript">
    $("#btnPrint").live("click", function () { 
      document.getElementById('dvLogo').style.display = 'block'; 
      document.getElementsByClassName("view-toolbar grid-actions clearfix")[0].style.display = 'none'; 
      
      var divContents = $("#listResultsPrint").html(); 
      document.getElementsByClassName("view-toolbar grid-actions clearfix")[0].style.display = 'block'; 
      document.getElementById('dvLogo').style.display = 'none'; 
      
      var printWindow = window.open('', '', 'height=600,width=800'); 
      printWindow.document.write(''); printWindow.document.write('Active Contacts'); 
      printWindow.document.write(''); 
      printWindow.document.write(divContents); 
      printWindow.document.write(''); 
      printWindow.document.close(); printWindow.print(); 
    });
  </script>
 
{% endblock %}

Conclusion

You can also use the same implementation to any other Web Page in your Portal, this way you can, for example, create a custom Web Template for your entity, displaying the information the way you need and add the Print button, showing and hiding anything on the Web Page if required, like logos, sensitive information, etc.

Maybe in the future Microsoft provides us a way to export using Word or Excel templates, which would be a very nice feature.

I hope this post has been helpful to you and your Dynamics 365 Portal implementation.

About Portal Hero: Wendy Walter Watson

The Portal Hero of the Dynamics 365 Heroes team. A millennial with loads of “social media” friends, I do all my shopping online, have a fear of cats, love to sneak into events and places without paying and advocate that we can create and live our own reality. When someone asks me about my main qualities the answer is always “responsive and adaptive”. My special powers: can create vortexes and parallel realities. I can also decipher Dynamics 365 licensing model!

Leave a Reply