Adding a Command Bar Button with JavaScript Integration using Power Apps

 

This guide will demonstrate how to add a custom command bar button called "Renewal Subscription" to the "Subscription" entity in Power Apps. This button will trigger a JavaScript function to update the renewal date of a subscription and display a pop-up notification about the renewal status. Follow these steps:

1. Open the Power Apps App

  • Navigate to the Power Apps home page.

  • Go to Apps and select the app where you need to make the changes. In this example, the app is "Sales Trail".


2. Locate the Target Entity

  • Search for the entity where you want to add the custom button. For this example, search for and select the Subscription entity.




3. Access the Command Bar Editor

  • Click on the three dots (...) next to the entity name to open options.

  • Select Edit Command Bar, then click on Edit.


4. Choose the Main Form

  • In the Command Bar Editor, select Main Form (since the custom button needs to be added inside the form).

  • Click Edit to proceed.

5. Create a New Command Button

  • In the editor, click New and select Command to create a new button.

  • Configure the following for the button:

    • Label: Enter the name of the button (e.g., "Renewal Subscription"). This name will appear on the form.

    • Icon: (Optional) Add an icon to represent the button visually.

    • Action: Choose Run JavaScript as the button’s action.

    • Click Add Library to link a JavaScript file.




6. Add a New Web Resource

  • Click New Web Resource to add the JavaScript code.

  • If adding a JS file, ensure the file has a .js extension.

  • Add a name to the web resource (e.g., "SubscriptionRenewal.js") and a display name for easy identification.

  • Attach a file or paste your JavaScript code in the Code field.

    • You can use code editors like Visual Studio Code or any online editors to write the JavaScript code before uploading.

  • Save and publish the web resource.




7. Link the JavaScript File to the Button

  • Search for the JavaScript file added earlier by its display name and select it.

  • Click Add to link the file to the button.

  • Under the Library dropdown, select the JavaScript file.

  • Specify the function name you want to execute when clicking the button in the Function Name field.

  • Ensure you select Primary Control as the parameter. This allows access to the form’s data.


8. Save and Publish

  • Click Save & Publish to save and implement the changes in your model-driven app.
  • Refresh the form in the app to view the newly added button.


Your custom button is now ready to use! It will execute the linked JavaScript function and perform the desired action when clicked.







Comments

Post a Comment

Popular posts from this blog

Customizing Dynamics 365 with JavaScript

Image
 Microsoft Dynamics 365 (D365) is a great tool for managing business processes, but to make it work best for your organization, using JavaScript can be very helpful. JavaScript lets you add custom features that improve how users interact with the system and make tasks easier to complete. In this post, we'll look at some simple JavaScript code examples for D365 that can help you do things like show or hide fields, check user input, create alert messages, and automatically set field values. 1. Controlling Field Visibility           Dynamic forms improve the user experience by showing only the fields that are relevant based on the user’s input. For example, you can use JavaScript to control which fields are displayed depending on the user's selections. In the following example, we'll look at how to show or hide a field based on the country selected from an option set. If the user chooses "UK," an additional field will appear, allowing them to select citie...
Read more

Global Option Set in Dynamics 365

Image
Global Option Sets are preferred when you need to use the same set of options across multiple entities within your Dynamics 365 environment. Creating a global option set makes it easy to maintain consistency and ensure that any changes made to the options are reflected across all entities that use that option set. On the other hand, local option sets are specific to a single entity. They are useful when you need to define options that are unique to a particular entity and are not applicable elsewhere in your Dynamics 365 solution. To create a Global Option Set to use in multiple entities in Dynamics 365, you can follow these steps: 1. Navigate to the desired solution in Dynamics 365. 2. Select "Option Sets" in the left menu bar. This will bring up a list of existing option sets. 3. Click on the "New" button to create a new option set. 4. Enter the "Display Name" for the option set. This is the name that will be displayed to users when they interact with fi...
Read more

Difference between Background and Real-Time Workflows

Background Workflow Operates in the background, requiring users to refresh pages to see changes after saving records, however, this doesn't interrupt users' ability to continue their work. If a step fails in the background workflow, the process halts at the failure step, and changes made by previous steps are kept.  Errors do not appear as pop-ups; administrators must check system job logs to identify failed processes. Background workflows are designed to minimize resource usage, ensuring they do not disrupt system processing. Troubleshooting background workflows is straightforward as it's easy to monitor which process failed at which point. Real-Time Workflow Changes are instantly reflected upon saving a record, without requiring page refreshes. Users may need to wait briefly for the process to complete, but it's not typically noticeable. If a step fails in a real-time workflow, a pop-up error message notifies users of the failed process. Real-time workflows typically ...
Read more