Custom Hyperlinks in Dynamics 365 Portals
Microsoft's Dynamics 365 Portals offer a quick path for setting up rich interactive sites allowing external audiences to interact with Dynamics 365 data. While offering many UI configuration options on par with the choices supported by native Dynamics 365 interface, some of the features are missing from Portals.
One of them is the ability to represent Lookup fields as hyperlinks. This lack of support for lookups sometimes leads to cumbersome and too-linear design choices with no easy way to navigate to parent records from child records.
Let's imagine that we would like to display lists of Contacts and allow our portal users to edit individual Contacts. Each contact list item and entity form will have a lookup for a parent Account record. We'd like the ability to quickly navigate to the parent Account from both entity lists and entity forms of a Contact.
Luckily, this type of functionality can be implemented with just a bit of JavaScript.
For Entity Lists
Following code in 'Custom JavaScript' field of the Entity List record will iterate through each list item and will add a hyperlink tag to each cell representing parent Account. Hyperlink will open a new page (viewaccount) that contains an Entity Form for Account entity.
$(document).ready(function (){
$(".entitylist.entity-grid").on("loaded", function(){
$(this).children(".view-grid")
.find("td[data-attribute='parentcustomerid']")
.each(function(){
$(this).wrapInner("<a target='_blank' href='/viewaccount/?id="
+ $(this).data('value').Id + "'</a>");
})
});
});
After applying this code, Entity List for Contacts will display parent Account as a link leading to the Account page in a new window:
For Entity Forms
In this example, our Account form has a custom Contact lookup field (Manager). We would like our users to be able to view and edit this Contact directly from the Account Entity Form. To support this functionality, we will:
1. Create new Entity Form Metadata record for the Contact Lookup field
Set Type=Attribute and select attribute's logical name. Set 'Add Description' field to Yes, 'Use Attribute's Description Property' to No and add a hyperlink to View/Edit Account Web Page (editcontact) as the Description:
<a id='manageredit' target='_blank' href='/editcontact/?id=_managercontactid_'>Modify Manager Contact Information</a>
2. Add code to the 'Custom JavaScript' field of the Account Entity Form record.
The code will retrieve the guid of the Lookup field and will update the hyperlink displayed as field's Description based on the Contact ID value.
$(document).ready(function (){
// grab ID of the contact
var mcId = $("#isi_manager").val();
if (mcId != null ) {
var h = $("#manageredit"),
newHref = "/editcontact/?id=" + mcId;
h.attr("href", newHref);
}
});
Resulting Account screen looks like this:
Clicking on Modify link opens Contact view/edit page in a new window:
