The new Custom Page component can be opened as a dialog in a model driven app. This feature will allow app makers to quickly create intuitive dialogs without code with a rendering that is close to the standard model driven app’s dialogs, since it uses Fluent UI controls that are also used by Model Driven Apps.
In today’s post, we’ll see how we can pass an object from a Custom page opened as a dialog to the parent Model Driven App.
To learn how to build this type of dialog, how to open and close them, please refer to this blog written by DIANA BIRKELBACH ~ PCFLADY
To close a dialog, the Back function is called in a custom page. The Back function closes the current page and returns to the last model-driven app or custom page in the model-driven app.
Based on the investigations I’ve done, we can’t currently return data from a custom page to the parent context, which is the Model Driven App. In fact, the PowerFx Back() function does not accept a parameter that returns an object to the parent context.
To share the data between the custom page and the model driven app, I propose to use the Widnow.sessionStorage object. Indeed, this standard object allows us to store data on the browser and each tab of the browser has its own sessionStorage.
You can refer to the following documentation for more information about the sessionStorage object.
Save an object from the Custom page to the browser’s sessionStorage:
The PCF I used contains two inputs:
- Data: this input represents the data to be stored on the sessionStorage.
- sessionStorageKey: this input represents the key used when writing and reading from the sessionStorage.
If you notice, the Data input is of type Object. This type of input is not yet documented by Microsoft. I took the opportunity to play with it during the development of my PCF control. Of course, we can use a text input to stay in the standard.
To activate this type of input, simply go to the file node_modules/pcf-scripts/featureflags.json. Then look for the line “pcfObjectType” and change “off” to “on”.
I would like to thank Cathal Noonan for proposing an alternative way to override the pcfObjectType value without manually changing the node_modules files
There’s another way to set the value to “on” without needing to modify files inside the node_modules folder…
If you create a file called “featureconfig.json” next to the control’s package.json, you can set the properties that you want to override
In this case, the contents of the file would be
The benefit of this approach is that there are no manual steps after cloning the source code
The logic of the control is as follows:
- During the initialization, it clears the sessionStorage based on the key used.
- When the Data input is updated, the control checks if the data object contains the result property which should be equal to true. If yes, it stores the Data object on the sessionStorage.
The control is used on the custom in the following way:
- The PCF has no rendering, it can be considered as a renderless component.
- The “data” input receives Data object.
- The sessionStorageKey input takes the string “dialogKey”.
The Data object is initialized when the canvas apps is started:
Once the “Confirm” Button is clicked:
Once the “Cancel” Button is clicked:
The PCF’s source code: https://github.com/melamriD365/CanvasApps-Controls/tree/main/ValueTurner
Unmanaged solution: https://github.com/melamriD365/CanvasApps-Controls/releases
Get the shared object from sessionStorage in the Model Driven App:
The custom page opened as a dialog is done with the function Xrm.Navigation.navigateTo(). We can retrieve the Data object from the sessionStorage on the successCallback function using the same key “dialogKey”.
Hope it helps…