Recently, while working on portal I had a requirement to display Quick View Form which had subgrid of related records. Usually, when we display subgrid on portal, it can be configured through Basic/Advanced Form Metadata like we can add Create action, Download action and View details action. However, Quick View Subgrid is quite different with the normal subgrid because it displays the related record one level deeper. For example, I have a Account form on the portal and I use quick view form to display the related cases of primary contact of that account, then the relationship is one level deeper i.e. Account > Contact > Case. Therefore, these types of subgrid can not be configured using Basic Form Metadata.
Requirement
Add Hyperlink/View Details icon to view record in Subgrid rendered within Quick View form.
Why Quick View Subgrid is different from normal Subgrid?
Quick View Subgrid rendered within IFrame on portal form, while normal subgrid rendered directly on the portal page. Also, Quick View Subgrid can not be configured same like normal subgrid like adding create button, adding download button and adding view details button is not possible using Basic/Advanced form metadata.
Business Logic
In order to add the View Details icon next to each table row, we need to loop through the subgrid (table) rows rendered within IFrame. However, getting IFrame content is not easy as other HTML controls. I couldn’t find a way to get subgrid (table) load event within iFrame same as normal Subgrid. Therefore I have used logic to wait until table (or its rows) element exists and then add a new table row (td) to show View icon.
JQuery Code
iframeid:
data-entity (<attribute_schemaname>):
var checkQuickViewIFrameLoaded = setInterval(function() {
if($("#<IframeId>").contents().find('[data-entity="<Attribute_SchemaName>"]').length > 0) {
console.log("Iframe contents are loaded!");
$("#<IframeId>").contents().find('[data-entity="Attribute_SchemaName"]').each(function() {
var recordId = $(this).attr("data-id");
var path= "https://"+window.location.host+window.location.pathname+"<Detailed page partial name>";
$(this).append("<td><a target='_blank' href="+path+"?id="+recordId+"><span class="glyphicon glyphicon-new-window"></span></a></td>");
})
clearInterval(checkQuickViewIFrameLoaded);
}
}, 100); // check every 100ms
Note: Update the highlighted code with your HTML controls element in the above code snippet.
Arpit Power Guide 