Dynamics 365 portals – Extend Search Results with Handlebars

With the Adxstudio Portals v7 product I can’t count the number of times that Adoxio has had to extend the search functionality with enhancements for customer requirements. With the latest release of Dynamics 365 portals, Microsoft has really made extending and customizing the out of box search extremely easily and powerful. The search is now built on top an asynchronous call to ensure page load performance is fast and the results all rendered with Handlebars templates. They have really gone a step further by taking those Handlebars templates and making them accessible through the Web Templates functionality; results display, paging, sorting, and the new facets are all available as Web Templates that you can customize and configure.

You can read more about the new base search functionality from a blog post on the Dynamics Team MSDN Blog, Search enhancements in Portal capabilities for Microsoft Dynamics 365.

If you’re not familiar with Handlebars you might be wondering what it is. Handlebars is a JavaScript framework, in which you can build semantic templates, with no frustration, or so they say 😉 – read more about why semantic templates help developers from Martin Brennan, Semantic templates with Mustache.js and Handlebars.js. Think of a template as being a view of how you want each item in the results rendered; put the title in an H3, description text in a P, add this class, etc. Why this is important is that the framework has a lot of power that beyond just formatting that allows you to easily modify the templates so you can create your own views, but also extend the functionality by adding helper methods with custom logic.

With the functionality of Handlebars helpers you can build functions to process the data submitted to a template. So if you wanted to do some sort of conditional processing or format on each item rendered, building your own helper can help you meet a certain requirement. Recently on the Dynamics Community Forum a member was looking to extend each result item with additional data from the full entity itself. So if the result was a Knowledge Article they might want to also show the subject or other categorization metadata in the search result. The default data context returned by the search to keep performance high has a limited set of attributes that really only include what you see rendered in a result. With a Handlebars helper and the power of Liquid we actually have the capability to go get the detail data for that particular entity record result.

For this example the Handlebars helper is going to make a synchronous AJAX request passing the entity ID of the result item, which will be then processed by a Web Template using Liquid to go get additional data that will then be included in the result item. First we need to setup our Web Template that will take the entity ID and go get the additional data and format it for us.

{% assign eid = request.params['entityid'] %}
{% assign wpage = entities.adx_webpage[eid] %}

<p><strong>Name:</strong> {{wpage.adx_name}}</p> 

We are going to assume for this that the result is always a web page but you could easily add an additional parameter for the entity logical name and then have conditional branching to handle different entities. Basically the template just takes the query string parameter entityid, uses the liquid entities object to query the web page entity for the desired ID then displays the page name back. You could access any of the attributes in the web page or whatever entity you had queried.

Once the Web Template is created we now need to make it accessible to the AJAX call we are going to later configure. To do so we need to add a Page Template that uses this Web Template. Create a new Page Template from Portals > Page Templates. Ensure to set the Type to “Web Template”, select the Web Template as the template you just created, and deselect the “Use Website Header and Footer”. All we want this page to return is the HTML that is to be included in the result.

search_details_pagetemplate

Now to make your page template accessible via a URL you will need to create a Web Page that surfaces the Web Template your Page Template refers to.

search_details_webpage

You can test your template is accessible by just directly calling its URL in your browser with an ID included, https://testingportal0001.microsoftcrmportals.com/search-details/?entityid=94216ad7-7864-e611-80d7-00155db4fa48. All you should get back is the simple HTML in the template since we removed the Website Header and Footer.

Now we need to register our Handlebars helper that is going to request this template. To do so we need to add some custom JavaScript to the search results page. This can be easily done with the front-side editor or you can access the web page from the CRM (Portals > Web Pages > Search). If using the front-side editor, login with your Administrative account, run a search query and then select the Edit from the CMS control, select the Options tab, and then paste in the following to the custom JavaScript section.

Handlebars.registerHelper("search_details", function (obj) {
    return $.ajax({
      url: "/search-details/?entityid=" + obj.fn(this),
      type: "GET",
      async: false
    }).responseText;
});

Basically it makes a synchronous AJAX request (it needs to be synchronous as the it is already an asynchronous request for the results) to the URL we created with our Web Page passing the entityID. It will return the HTML as the responseText which is then returned as the result of the Handlebars helper. You would be able to put whatever logic you want within this function, whatever JavaScript allows you to, which is A LOT.

Now that we have our helper function, and our template, its time to modify the search results Web Template that is provided out of the box to include a call to our new helper. Navigate in CRM to Portals > Web Templates, open the “Faceted Search – Results Template” and you want to add the following within the {{#each items}} where you want your extra details to show up: {{#search_details}}{{entityID}}{{/search_details}}. This will call our helper method passing the entity ID of the result item.

{{#each items}}
 <li>
  <h3><a title="{{title}}" href="{{url}}">{{title}}</a></h3>
  <p class="fragment">{{{fragment}}}</p>
  {{#search_details}}{{entityID}}{{/search_details}}
  <div>
   {{#each tags}}
    <span class="{{cssClass}}">{{./label}}</span>
   {{/each}}
  </div>
 </li>
{{/each}}

With Dynamics 365 portals you also need to be very aware of entity permissions. Our liquid query will return nothing if we do not provide permission to that entity. You will need to decide exactly how to configure the entity permission, for this example I am just adding an entity permission for Web Page with a Global scope and the Web Roles Anonymous and Authenticated User. It is important to be careful and aware of what you configure with entity permissions as they are what gate and protect the data in your CRM.

Now that it is all configured, head back to the portal and refresh your search results or perform a search query. Your results should now include your extra template on each and every result.

search_details_results

My template for this example was simple, but with the power of liquid querying you could really include anything here. This example also focused on adding additional details but Handlebar helpers can be used for a lot more.

Dynamics 365 trials now include portals!

If you create a new Dynamics 365 trial since around the holiday time frame you may have noticed that a portal can be configured as part of this trial. If not read on for instructions on how to configure your portal as part of the trial.

Once you have created your Dynamics 365 trial, (suggested to select the “All of these” option when provisioning your trial) you should be taken to your Dynamics 365 instance.

trial_options

You will need to get to the Dynamics 365 Administration Center to be able to configure your portal as part of the trial. You can do so by navigating to the Office 365 Admin Center or by directly going to the following URL – https://port.crm3.dynamics.com/g/manage/index.aspx. You may need to change crm3 to whichever region your instance resides in, ie CRM for NA/USA, CRM3 for Canada – the full list of regions can be found here – http://www.xrmcoaches.com/2016/01/current-list-of-dynamics-crm-online-regions/.

Once into the administration center, select Applications from the top and you should have a number of applications listed if you selected the “All of these” choice when provisioning your demo including a Not Configured portal! Highlight the portal application called “Portal Add-On” in the list and select Manage.

portal_applications

You should now be able to continue configuring your portal with your desired configuration for your demo or trial.

If you have not had a portal add-on added automatically to your trial you can still request a trial key from the the CRM Managed Trial site – https://crmmanagedtrials.dynamics.com/.

Thanks to Adoxio’s Kunal Tripathy for pointing out this great addition to trials.

Note: This post also appears on Adoxio Business Solutions Team Blog.

Using your Dynamics 365 portal in an iframe

There might be certain scenarios where you want to utilize certain parts of Dynamics 365 portals functionality within other applications. Most often this is where another content management system (CMS) is already in place but you want to enhance its abilities and add new functions that work with your CRM. Instead of writing customizations in that CMS it can be easy to configure your desired functionality with the out of box functionality of Dynamics 365 portals.

With Dynamics 365 portals through you might run into a issue with embedding the site in an iframe. If trying to embedding your portal in an iframe you will end up with a blank frame. Opening up Chrome’s developer tools and view the console you will notice the following error providing a hint as to the issue.

Refused to display 'https://mps155013.microsoftcrmportals.com' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

X-Frame-Options is part of the HTTP response header and can be used by the web server to control who can display your content directly in an iframe. This is important if you want to prevent any sort of embeds of your site as well as limit it to an allowed list of sites. You can read more about X-Frame-Options on the Morilla Developer Network Documentation.

The following are the X-Frame-Options directive options:

  • DENY – blocks all iframe requests
  • SAMEORIGIN – allows iframe’s from the origin site
  • ALLOW-FROM https://example.com/ – allows iframe’s from the URL

You can manipulate the X-Frame-Options of your Dynamics 365 portal through the site setting HTTP/X-Frame-Options, inserting in the value one of the options above. New portals should include the setting by default in all portals with the default value set to SAMEORIGIN. If you do not have the site setting from an older portal that has upgraded, you can add it but it requires the supporting portal code version (v8.2).

Some other considerations when embedding your portal will also be the display of the page. Most likely the site your embedding into will already have a header with navigation and also a footer, so it might not make sense to include these type of components on the pages your iframe will display.

You can handle this in various ways with the portal, either through simply putting some CSS only on iframe pages that hide elements, keep in mind that the Bootstrap CSS uses the width of your frame and not the parent window so you may be in a mobile layout inside the iframe. Another option is to use the Page Template with the Use Website Header and Footer when using the Web Template type. Leaving this option set to false will only render the contents of the liquid template, it will leave out all portal scaffolding like Bootstrap CSS, and JavaScript libraries. If you need those type of components you will need to add them back through your own references in your web template. The web template option is great for data display type options, if you want to use entity form or list then you will require that portal scaffolding for those components to work.

usewebsiteheaderfooter

There is a hidden rewrite template that does not have a header or footer you can use if your only need is an entity form. Create a new page template with the type Rewrite and set the Rewrite Url to ~/Areas/Portal/Pages/Form.aspx. This page template is used by entity list to display modal dialog forms for entity list create and edit functions. This page template if you look at the v7 code only contains an entity form control and sets the content controls for header and footer to blank, it does not even include the page copy.

norewrite

Based on the functions you want to accomplish and the security you require for the content in your iframe you will need to select the best method for displaying your page.

What’s New in Dynamics 365 portals

A number of the Dynamics 365 application services; Field Service, Project Service and portals, all became generally available this week following the release of Dynamics 365 earlier this month. These all offer a number of improvements and new features from their previous iterations under Dynamics CRM. Previously called CRM portals, now Dynamics 365 portals, has received some significant updates, even some functionality that starts to bring the 3 application services together with Project and Field Service functionality now in some portals. Let’s take a look at some of the largest changes in this release:

  • Multilingual support for a single portal
    Any of the now 43 languages can be configured on a portal and no longer requires a completely separate portal service for each language.  This functionality also significantly differs from how multilingual support was included in the legacy Adxstudio Portals. You will find a new entity, Website Languages that adds an additional layer, this instead of duplicating the entire web site using the old web site copy tool.  The page copy section is no longer directly on the web page information form but now available through a localized content relationship which will display the web page in a new content mode and other content data entities like content snippet or site settings also have new relationships to the website language.

    mlp_webpage
    There are also new liquid extensions to support this functionality within your own templates, website.languages will provide a collection of all the language items, pages.languages is a list of languages for the current page available, and website.selected_language will identity what language the site is currently being shown in.
  • Charts displayed in the portal
    You can now embed your CRM/Dynamics 365 charts directly on the web with a new liquid extension.  For an example of charts, if you install the latest partner portal there is a new web template called “Partner Dashboard” that provides an example of embedding multiple charts, entity lists and other components on a single page to give a rich interface to portal users. The liquid extension makes it very easy to add a chart anywhere in a page, all you need is the chart ID and view ID the chart should use for its data source.

    {% chart id:"chart-guid-without-braces" viewid:"view-guid-without-braces" %}
    
    <!-- Est. Revenue by Est. Close Date (Day) - Opportunities Closing Next Month --> 
    {% chart id:"EB02E9AA-5580-E611-80D8-00155DFE75F9" viewid:"00000000-0000-0000-00AA-000010003002" %}
    

    portalcharts

  • Content Access Level Security for Knowledge Management Articles
    Content Access Level or CAL is a feature that has been added to allow for securing access to knowledge articles to different groups of users. In Dynamics 365 with a portal installed you will find some sample CALs but you can also define your own and associate them to contacts and articles. Article content will be secured regardless of how you try accessing the content, either browsing via navigation elements, direct URL or via the Portal Search, all will respect the security rules defined by the CAL.
  • Project Service and Field Service Portal Extensions
    If you provision a new Partner Portal and have either Project Service or Field Service installed you will see some new options available that allow you to enable portal functionality for these components, there are also new actions if you have an existing portal to install the new portal extensions.

    provision_psaThese extensions bring some components to the portal, with PSA your able to view customer and partner related projects or resources. With Partner Field Service extension you can see related field service agreements, assets, service requests, and work orders.
  • Partner Portal Improvements
    There are a number of improvements and new functionality added to the popular partner portal including a new partner onboarding/application, multi-partner collaboration, and also deal registration.

These are all great improvements for this release and continue to look forward to further updates with the monthly updates to Portal Service in the new year. If you want to check out these features and more you can try the latest version yourself by requesting a trial.

For more information about what’s new for Field Service and Project Service a breakdown is available on the What’s New for Dynamics 365 Help and Training site.

Note: This post also appears on Adoxio Business Solutions Team Blog.