Use a generic TypeScript to Open Custom Pages

When you want to open a custom page from the command bar in a model-driven app you still need a small TypeScript or JavaScript for that. If you then have several pages in your app it can easily get cluttered with these JavaScripts that only open a specific page. So I asked one of my favourite Pro-Coders Benedikt Bergmann to write me a generic TypeScript that I can configure myself to open different pages with different settings. Sounds great huh?! Let’s go through how to use it.

Background

When I build model-driven apps I more often that not find that the OOB features and UI is not sufficient to my requirements and want to create a custom page. My usecases are usually to create a type of wizard to guide the user through a process and decrease the number of clicks or maybe even replace an OOB dialog that is not enough (like the “Close Case”-dialog that frankly sucks).

When you read the Microsoft Learn page on how you can open custom pages you can see that the instructions say you should add the custom page name in the JavaScript. By doing this you would hard code the name of the custom page into the JavaScript. This would mean you need one JavaScript per custom page that you want to open with a command, it would quickly muddle your solution with a lot of similar JavaScripts. Not a very nice way of working, so me and Benedikt had a talk about how we would prefer to work and what settings should be available and born was this amazing generic script, that has 8 different settings to open your custom page in different ways.

Solution!

Go to Benedikts blog and read how you should create this amazing TypeScript then come back here and let me show you how to use it 😅

Start with Modern Command

So hopefully now you have created and saved the script to your solution. Now in your app choose to edit the command bar of the table where you want your new button and choose whether you want it to be available from the grid or from the form.

Eight parameters to Define

First when you create your new command, choose action “Run JavaScript” and add your script you created based on Benno’s blog. Now what you here in depends on how you created the script. If you are using the TypeScript you should read Benedikts blog on those configs needed and if you follow his recommendation you should fill this in like this: prefix.nameofthescript.nameoffunction (for example for me sara.GeneralRibbon.OpenCustomPage).

If you want to keep it simple and just copy the JavaScript from his blog, it’s enough for you to only have the function name in this setting, in my example it would be OpenCustomPage.

Now let’s add those parameters!

Param 1 – specific page to open

Parameter 1 should be of type String and should be the Name of your page. Go to the makerportal to check what name you gave it and what dataverse added at the end afterwards 🙃

Param 2 – Title of the page

Paramater 2 should also be a string and is the title on top of the page when the custom page is opened

In my usecase it will look like this:

Param 3 and 4 – Table and Record context

These two I pick from the dropdown list of params, these I use in my custom page OnStart to send record specific information to my page to do relevant filtering for example.
This example is when I want my button to open in context from the form.

Param 5 and 6 – Size of dialog

These two parameters define the size of the dialog that is opened. You can either put then in as strings and put in a percentage of the screen size you want it to be, or you can put in number parameters and define the actual px.

Param 7 – full screen or dialog

The seventh parameter is where you define if you want the page to be opened as a full page (1) or as a dialog (2). Note that you can write what ever you want in parameter 5 and 6 if you want the page to be opened full screen, but they still need to be 5 and 6 for the script to work 😅

Make sure you put it in as a number parameter and not a string or any other type (uhm been there done that, thank you very much).

Param 8 – center or side pane

Parameter 8 should also be a number and this is where you define if it should be opened as a center dialog (1) or if it should be opened as a side pane dialog (2).

Side pane dialog looks more like a quick create form while the dialog can look very different depending on what size you choose and suit different usecases.

Helpful Tip!

Don’t forget to add the custom page to your app! It doesn’t matter how well you set all these parameters if it’s not in your app 😉 Been there done that too 🤷‍♀️

Summary

Now go out and use Benno’s amazing TypeScript to only have one single script to open all custom pages in your solution, de-clutter your current solutions by replacing those JavaScripts with this more generic one and see how flexible it is to change size, target and position within the modern command.

Please also let us know if you find the need for even more or different parameters, we are interested in your experiences 🙂

Ciao!