Custom Page Implementation in Model-Driven Apps
Scenario: Yesterday, someone from WhatsApp group asked me to help on below scenario, How to implement a requirement where clicking a button opens a dialog box in Model-Driven Apps, allowing users to input values for two fields and save the record in a Dataverse table.
Steps to Implement
1. Set Up the Custom Page Navigation
- Add a button to the ribbon or command bar of your Model-Driven App.
- Use Power Fx or JavaScript to configure the button’s OnSelect action.
- Trigger the navigation to the Custom Page dialog.
Power Fx Code:
Navigate(
'YourCustomPageName',
ScreenTransition.None,
{
entityId: ThisItem.PrimaryId,
entityLogicalName: "YourTableLogicalName"
}
)
2. Open the Custom Page as a Dialog
Use the Xrm.Navigation.navigateTo() API in a JavaScript web resource.
JavaScript Code:
function openCustomPageDialog() {
var pageInput = {
pageType: "custom",
name: "your_custom_page_name"
};
var navigationOptions = {
target: 2, // Opens in a dialog
width: { value: 50, unit: "%" }, // Dialog width
height: { value: 50, unit: "%" } // Dialog height
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions);
}
Bind this JavaScript function to the button in the ribbon.
3. Enable Save Functionality
Pass the record ID (entityId) of the record from which the custom page was called. This ensures updates in the custom page are applied to the correct Dataverse table record.
Power Fx Code:
Patch(
Table(TableName),
LookUp(Table(TableName), Table(TableName).PrimaryId = RecordId),
{
Field1: TextInput1.Text,
Field2: TextInput2.Text
}
);
Display Notifications:
Success Message:
Notify("Record saved successfully!", NotificationType.Success);
Error Message:
Notify("Failed to update the record. Please try again.", NotificationType.Error)
Combined Power Fx Code:
If(
Patch(
Table(TableName),
LookUp(Table(TableName), Table(TableName).PrimaryId = RecordId),
{
Field1: TextInput1.Text,
Field2: TextInput2.Text
}
),
Notify("Record updated successfully!", NotificationType.Success),
Notify("Failed to update the record. Please try again.", NotificationType.Error)
)
No comments:
Post a Comment