Call HTML WebResource on click of Button in Dynamics 365 | Power App
In this blog post, I will demonstrate how to open a popup UI (HTML Web Resource) when a button is clicked. I will guide you through the process of creating a custom button using Ribbon Workbench, generating an HTML Web Resource, and writing the necessary JavaScript code to integrate the HTML content seamlessly into Dynamics 365 from scratch.
Step 1: Create an HTML Web Resource
Click on Customize the System.
In the Solution Explorer, expand the Components node, right-click on Web Resources, and then click New.
Choose HTML as the Type, and provide a Name for your web resource.
<!DOCTYPE html>
<html>
<body>
<h1>TEST PAGE</h1>
</body></html>
Save and Publish the web resource.
Step 2: Create a JavaScript Function
Create a new JavaScript web resource.
Write a JavaScript function that will be triggered when the button is clicked. For example:
pageType: "webresource",
webresourceName: "cr985_DynamixPower" //filename of your html webresource
};
var navigationOptions = {
target: 2,
width: 500, // value specified in pixel
height: 400, // value specified in pixel
position: 1
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
function success() {
// Run code on success
},
function error() {
// Handle errors
}
);
Step 3: Create a Ribbon Button
- Select Entity and choose the entity to which you want to add the ribbon button.
- Drag your custom button to the desired location on the entity form (e.g., the ribbon bar).
- In the Properties window for the button, specify a unique Id, Label, and optional Tooltip.
- In the Command Core section, Create a command and add it in your button
- Specify the Command created for the button.
- In the Actions section, add a JavaScript Function action. Select the JavaScript function you created earlier (onButtonClick in this example).
- Save and Publish the ribbon customization.
- Select Entity and choose the entity to which you want to add the ribbon button.
- Drag your custom button to the desired location on the entity form (e.g., the ribbon bar).
- In the Properties window for the button, specify a unique Id, Label, and optional Tooltip.
- In the Command Core section, Create a command and add it in your button
- Specify the Command created for the button.
- In the Actions section, add a JavaScript Function action. Select the JavaScript function you created earlier (onButtonClick in this example).
- Save and Publish the ribbon customization.
Save and Publish the ribbon customization.
Return to your CRM and open the form where you added the button. Clicking the button should trigger a popup window as shown below. If it doesn't appear, please refer to the video above for troubleshooting steps.
No comments:
Post a Comment