Power Apps Portals – View Quick View Subgrid Data

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.

Published by arpitpowerguide

My name is Arpit Shrivastava, who is a Microsoft MVP in the Business Applications category. I am a Microsoft Dynamics 365 and Power Platform enthusiast person who is having a passion for researching and learning new things and acquiring immense knowledge. I am providing consistent help, support, and sharing my knowledge through various Social Media Channels along with my Personal Blog, Microsoft Community, conducting online training and attending various 365 Saturday Events worldwide and sharing the best Solutions to the readers helping them achieve their goals and objectives in Customer Relationship Space.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: