Open Power Apps Custom Page from Dataverse Subgrid

In the dynamic world of PowerApps, the ability to easily navigate between components is most important. One powerful feature that elevates user experience is the capability to open custom pages directly from a Dataverse subgrid. This functionality not only streamlines processes but also empowers users with a more personalized interface.

REQUIREMENT

In this situation, there’s a subgrid labeled ‘Case Discussion’ within a powerapps form. When a user clicks on a record within this subgrid, a button titled ‘Get Case Details’ should dynamically appear. Upon clicking this button, it should trigger the opening of a custom page containing comprehensive details regarding all the records present within the ‘Case Discussion’ subgrid.

STEPS

1. Create a Custom Page

Navigate to the PowerApps solution and initiate the creation of a blank custom page. Assign a name to the custom page upon saving it.

Now to add the above created custom page into the model-driven application, access the App designer and utilize the ‘Add Page’ button. Alternatively, you have the option to directly generate a custom page within the app designer itself.

2. Generate JavaScript Code for the Button

function RunOnSelected(data) {
    var selectedRecordID = data;
 
 // Inline Page
 var pageInput = {
     pageType: "custom",
     name:"ethp_casediscussionsubgridcontent_9bf8a",
     recordId: selectedRecordID
 };
 var navigationOptions = {
     target: 2, 
     position: 1,
     width: {value: 50, unit:"%"},
     title:  "Case Discussion"
 };
 
 Xrm.Navigation.navigateTo(pageInput, navigationOptions)
     .then(
         function () {
             // Called when page opens
         }
     ).catch(
         function (error) {
             // Handle error
         }
     );
 }

• pageType: "custom" indicates that the page to be opened is a custom page.
• name: "ethp_casediscussionsubgridcontent_9bf8a" specifies the name of the custom page.
• recordId: selectedRecordID provides the ID of the records in the subgrid to the page.
• target: 2 specifies that the page should be opened in the content area.
• position: 1 indicates the position of the page in the content area.
• width: { value: 50, unit: "%%" } sets the width of the page to 50%.
• title: "Case Discussion" sets the title of the page.

3. Setting the Custom page

Add the below piece of code to the App OnStart of custom page.

• Filter('Case Discussions', ...) retrieves records from the ‘Case Discussions’ data source based on specified criteria.
• 'Case Discussion' in colSplittedIds checks if the ‘Case Discussion’ field exists in the colSplittedIds collection.
• ClearCollect(CaseDetails, ...) stores the filtered records into a collection named CaseDetails.

In short, this code segment extracts record IDs passed, splits them into individual IDs, and then filters records from the ‘Case Discussions’ data source based on whether their ‘Case Discussion’ field matches any of the IDs. The filtered records are collected into a collection named CaseDetails, which can be further utilized within the custom page for display or manipulation.

You can proceed by adding the CaseDetails collection into a gallery or any other control as per your needs, enabling you to showcase the record details on the custom page. Design the custom page to align with your specific requirements.

4. Add Custom Button to the Subgrid Ribbon using Ribbon Workbench

Add a button to the Subgrid via Ribbon Workbench. Specifically, we’re adding a button titled ‘Get Case Details’ to the ‘Case Discussion’ Subgrid.

Following that, add a command for the button, and within the command, add a JavaScript action. Additionally, add a CRM parameter to the JavaScript action to retrieve the IDs of all records within the Subgrid.

Next, establish the visibility settings for this button. This can be accomplished by adding an enable rule, which will control when the button is displayed. Specifically, the button will only be visible if at least one record is selected.

RESULT

When the ‘Get Case Details’ button is clicked, it will trigger the opening of the custom page titled ‘Case Discussion’.