How to open a related record entity form conditionally in Power Apps Portals/ Dynamics 365 Portals

It’s been sometime that I have written a blog on PowerApps Portals. And today I am going to share something interesting to my blog readers.

The requirement is very simple here. I have Entity A and Entity B with 1:N relationship.

On entity form for Table A, I want a button to create a child record of Table B. Quite simple stuff. In this blog I am not going to cover how to create a Related record button in entity form. It’s pretty simple and you can find it here.

I have configured the button as you can see in the below screenshot.

And when I click on the “Create new B record” button, the related entity form for Table B show up.

Now the question comes – why this blog? Isn’t it OOB functionality>

Then answer is a big YES. It’s OOB functionality. But wait. Things are not always that simple in a real life requirement. What if you need to open the related record dialog based on condition. If a certain criteria is met, you open the related record entity form. Else you show up an alert of some kind.

Before I go ahead and do this, let’s explore the underlying HTML structure using developer tools (F12) of any browser.

Check for the screenshot below.

The highlighted ‘Create new B record‘ has an attribute data-filtercriteriaid. And observer the section below which has the modal div. It has the same value for data-filtercriteriaid.

So basically it is the data-filtercriteriaid value acting as the link here. When the button is clicked, based on the value of the attribute, the system find the appropriate dialog to show.

So let’s get dirty with some cool script here.

$(window).on("load", onEntityFormLoad);

function onEntityFormLoad() {
   var createNewRecordButton = $(".create-related-record-link");
   var btnClone = createNewRecordButton.clone();
   btnClone.appendTo(createNewRecordButton.parent());
   btnClone.on("click", validateRecordCreate);
   createNewRecordButton.hide();
}

function validateRecordCreate() {
   // perform your logic here. If it is successful then open the dialog using the below code.

   if(logic === true){ // show the popup
   var filterCriteriaId = $(".create-related-record-link").attr("data-filtercriteriaid");
   $("section[data-filtercriteriaid=" + filterCriteriaId + "]").modal('show');
}
else{

    // do something else.
}
}

So what am I doing here? I am binding an event on load of webpage and then inside the method I am cloning the related record button and attaching a custom click event to the button.

On click of the button, I then perform my custom validation logic and depending on that I decide to open the related entity form. The code in bold and italics does the actual trick of opening the related record form dynamically.

Also as a final step, you need is to put this code in the Custom Javascript section of the Web page of your parent table entity form.

Well that’s it. It should do the trick.

Hope this helped!

Debajit Dutta
Business Solutions MVP