Custom Page is a way to get custom user interface inside Microsoft Power Platform Model-driven apps. I had used custom page twice in my blog examples with D365 email import and custom settings. I had technical session presentation back2back with my colleague Antti Jääskeläinen about custom pages inside Digia. There was couple things to be mentioned.
Debug – How to get context for app?
Custom page does not have the same context like Power Apps Canvas App, since it is usually a model dialog opening above some Dataverse row data. My way was to get some row ids and hard code them during development. It worked for me but it was quite ugly way of doing the development.
My colleague Antti did it much better way with debug functionality. He had debug info functionality showing all needed data for the ongoing Dataverse, D365 and other row data with SharePoint location data.
Besides that he implemented Debug button that created context for the Custom Page – list like my uncommenting the OnStart. His code for the Get SharePoint Documents is below. It checks if the parameters are empty, it will get guid from textboxes and populates the context for the Custom Page. Much better usability than my copy-paste-comment-uncomment way of getting context in the Power Apps editor.
btn_getDocuments // "Get Sharepoint Documents" - Executes the same as appOnStartin.
nfParameters = {
EntityName: If(IsBlankOrError(Param("entityName"));"email";Param("entityName"));
EntityId: If(IsBlankOrError(Param("recordId"));TextBox_debug_guid.Value;
GUID(
Mid(
Param("recordId");
2;
Len(Param("recordId")) - 2
)
))
};;
Opening in modal – is there choice for JavaScript?
As mentioned and code shared in my earlier post I used JavaScript because I wanted to check if the window open below the dialog was not saved. It saves the row and get the id for the row and passes it to the Custom Page.
It is also possible to open the modal dialog using Power FX. Carl De Souza blogged about this method and by Googling you can get a lot of different examples via YouTube how to open Custom Page in dialog above the Model-driven app.
Then there is Kimmo Koski solution for developers that does not want to use JavaScript and want to test different kind of possibilities open the dialog while the app is running in the context. Please see Kimmo’s post and shared demo solution in Understand custom pages with example playground solution
Scrollbars – How to get responsive dialog?
Once you finally get Custom Page open in dialog and data visible, you end up in test or production environment noticing that there are a lot of data. The scroll bars did not appear and scrolling might not work either.
I search but did not get one answer how to get the scroll bars. I end up solution where I have Container and inside there is Gallery which has scrollbars setting enabled.
Then I need to get the app settings and choose the Scale to fit setting off. Check that your app orientation is in line with the percentages how you open the dialog in the model-driven app. Then having good / enough test data meaning context while developing you can adjust the components and change the browser in Play mode so that you finally get the scrollbars working.
Yes – it needs you to figure it out in your context and is related on many things. There is not one solution just click the scrollbars on like in CSS overflow setting. Sadly yes, CSS before millennium change still works better but we do not live in perfect world 🙂
