Build a Custom Page using Power Platform Creator Kit

This blogpost is the beginning of a series about combining Custom Pages and Custom APIs, but also using the Creator Kit and a bit of TypeScript in the process.

I’ll show you how to start and how to build the UI and the custom logic, and finally I will show you how combine them by telling you my business scenario.

This first blogpost is about the UI, I mean how to create a Custom Page using the Creator kit and the next one will be about how to delegate all the heavy work to a custom API. So let’s start.

A couple of months ago I was working on a Dynamics 365 Sales project, now we know that the normal sales process goes from Lead, opportunity, then we have to create an offer, and when the customer approves it, that offer becomes an order and later becomes an invoice.

Well, in my case I have a specific requirement which is to allow the user to split the payment of the quote, like 50% by card and 50% in cash. But this splitting process must be based on the products in the quote. That is, the user can split the cost of a quote product into multiple payments.

In short, I have to provide an interface for the user to choose one or more quote products and allow them to create one or more payments.

Crazy, right? Because what I did know up to that point is about requirements to split the total cost of a quote or invoice into multiple payments, for example sometimes we want to pay 50% cash and 50% by card. Well, now with this requirement this logic should be applied let’s say at line level instead of header level.

This kind of features do not come by default inside Dynamics 365 Sales, so I was thinking well how can I achieve this requirement?

To start with, I would like to recommend you to write a small paragraph about the requirement, as the general idea of what the user wants.

So, I wrote this, “The user should be able to enter the desired Quote, from there they should be able to click a button on the Quote ribbon and it will open the Custom Page as a modal, then they can select one or more products from the quote, and they also has to specify some data to the selected records and then the payment records should be created automatically”.

After all I’ve said, you now have a general picture about what the user wants, and I bet you’re also thinking about the ribbon button on the quote form and the logic to create all the payment records automatically.

Well don’t worry let’s focus first on the UI by creating the Custom page in this blogpost and in the next one I will show you how to create the other technical components to meet this requirement.

So let’s start.

Enable Power Apps component framework for canvas apps

First thing first, we will be using components from the Creator Kit solution, so we need to enable this feature in order to be able to add the required components in the Custom page.

You have to go to the URL: https://admin.powerplatform.microsoft.com/

From there you have to select Environments:

Select your desired environment, then go to Settings:

Under Product, select Features:

Then enable the PowerApps component framework for canvas apps:

Download both Power Platform creator Kit solutions

The next step is to go to this URL: https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/setup, download the core solution and the CreatorKitReference(MDA) solution.

Finally install first the core solution and then the MDA solution. Now let me explain to you what these solutions are for, the core solution contains ready to use components like DetailsList, CommandBar, SearchBox, ProgressIndicator, etc. And of course we’ll be using the DetailsList component our Custom Page.

The CreatorKitReference(MDA) solution contains Model Driven Apps and Custom Pages templates to create them in a few clicks, and guess what we will create a Custom Page using a template.

This is going to help us to save a lot of time creating it from scratch. So first go to your solution and from there click in “Add an existing Page”:

Then Select Custom Page Template and add it:

Next is to open that Custom Page and save it as, and put it a new name:

Finally you have to remove the Custom Page Template:

Now open your Custom Page, you will get a message saying that your page contains unsafe code, but don’t worry because you are using a solution supported by Microsoft, so just click in Open app:

There you go, a Custom Page with a command bar, a search box components ready to use and containers to make it responsive in just a few clicks, impressive right? This will save you a lot of time.

Modifying OnStart property

Now first thing first, specify the corresponding variables and collections in the OnStart property:

Set(var_recordId,Substitute(Substitute(Param(“recordId”), “{“, “”), “}”,””));
Set(var_quoteRecord,LookUp(Quotes,Quote = GUID(var_recordId)));
ClearCollect(coll_quoteProducts,Blank());
ClearCollect(coll_PaymentAllocations,Blank());
Set(var_NewRecord,Defaults(AddColumns(DropColumns(‘Payment Allocations’,”_cre19_customer_value”,”_ownerid_value”),”PaymentMethodid”,””,”RecordProductId”,”InternalId”,”ContactId”,””,”AccountId”,””)));
Set(var_varNumber,0);
Set(var_totalAmount,0);

In my case I have added a table called Payment Allocations, and underneath that table there are a few fields that help to specify the payment information, like:

Funding type (Account or contact)
Payment Method (Card, Invoice, Cash)
Customer which will actually make the payment
Start Date and End Date to specify the range of time that the payment can be made
The percentage of the payment and the amount of the payment

Now, let me explain to you why I’m using these variables and collections.

Var_recordId: It is to store the GUID of the record from the Model Driven app on which the user is clicking the button. In this case it will be the GUID of the appointment.

var_quoteRecord: It is to store all the Quote columns, retrieving them by using the previous variable.

coll_quoteProducts: This collection will help us to store all the Quote products that has been selected by the user.

coll_PaymentAllocations: This collection will help us to store all the Payment Allocation records the user creates every time they click on +Add button.

var_NewRecord: It is to add a new record in the previous collection. This variable is a copy of a Payment Allocation record, but with the difference that all fields are empty.

var_varNumber: Is to give a unique ID to each record on the coll_PaymentAllocations collection.

var_totalAmount: It is to add up the cost of all selected Quote products, this will help to calculate the percentage and amount of the Payment Allocations on the selected records.

Now remember we are trying to create a Custom Page to allow the user to select one or more Quote Products in order to split them into one or more payments. Having said that let’s add two other main items, the DetailsList component on the left and a vertical Gallery on the right.

Adding some containers

So let’s add two horizontal container under ContentContainer_HS:

Let’s call ContainerDetailsList to the first container and ContainerPaymentAllocation to the second container

Now we have to change the ContentContainer_HS container a little bit, make sure it’s a Horizontal container and all the following properties:

Now it’s the turn for ContainerDetailsList container, make sure Width property is Parent.Width/3 and Height property is Parent.Height:

Finally is the turn for ContainerPaymentAllocation container, make sure Width property is Parent.Width and Height property is Parent.Height:

With those updates to the containers now the Custom Page should looks like:

Adding DetailsList component

Next step is to import the DetailsList component: