Skip to content

Action Buttons

Paul Nieuwelaar edited this page Mar 25, 2021 · 11 revisions

/!\ Action Buttons is in beta. Download the solution and sample data to try it out, or Contact us for more information and feedback.


Contents

Overview

Action Buttons give super users and non-developers (and also developers) an easy way to build custom buttons and logic in Dynamics 365 without having to add and configure command bar buttons manually, and without having to write any code.

Action Buttons can be run by users from the 'Actions' flyout menu added to any entity forms or views where an activated Action Button has been added.

Inspired by the old (now deprecated) 'Dialog' processes which gave users the ability to create simple or complex wizards using a 'workflow-like' editor.

Each Action Button has a set of actions that will be executed when a user clicks the button. Each action can specify conditions, allowing you to create custom validation and branching within your process.

Actions can include displaying a dialog, which you can fully customise to include fields and buttons with further actions. Dialogs can be chained together to create a wizard or branching pages. Inputs will be passed through between pages, allowing you to easily create Back/Next buttons between pages.

Or you can trigger a Power Automate Cloud Flow to perform custom logic at the end of your process, passing through any inputs and context information collected during the process.

Developers can also make use of the JavaScript Function actions to do more advanced logic, while still benefiting from the Action Buttons and Dialogs to create the user interface.

Installation

  1. Ensure you have the latest version of Dialog Builder installed (at least v3.1.5). For production environments, you must also purchase a license.
  2. Download and import the Actions Buttons - beta solution through make.powerapps.com -> Solutions. During the import you'll need to create or map connections for Common Data Service (current environment) and Power Platform for Admins.
    import1
    • If you import using the classic import process, the flows will be off by default, and will need to be manually updated and turned on.
  3. Once installed, you'll be able to access the Action Buttons and other related entities within the Action Buttons app. It is also recommended to install the Sample Data (next section) as this includes some useful buttons and dialogs to help you build action buttons.

Sample Data

Download sample data The sample data includes 6 entity XML files, which can be imported individually in the order of Action Buttons, Dialogs, Dialog Actions, Dialog Conditions, Dialog Fields, Dialog Buttons. Or import the whole zip file and Dynamics 365 will sort out the dependencies/order.

3x Action Buttons are included in the sample data:

  • Quick Add Contact Displays a dialog to quickly add a contact to the selected account by capturing the first name, last name, and email address, then triggers a cloud flow with the captured inputs. This example shows you a simple-end to-end process using an action button, dialog, and flow, plus several other conditional actions, including validation to only be used on active accounts, and also to enforce a first or last name is entered.
    • After installing the sample data, you'll need to manually update the Flow Trigger URL on the Dialog Action named: 'Trigger flow, then show success dialog'. This should be updated to the HTTP POST URL from the example flow included in the Action Buttons solution, named: 'Account - Quick Add Contact (Action Button Example)'. This URL is different for each environment.
  • Preview Dialog Previews the selected dialog, without passing through any selected records. This is just a really useful button to have while editing a Dialog, as you can quickly preview the dialog without having to navigate away from where you are, so you can quickly validate you've got your dialog looking right.
  • Create Flow from Template Create a new Cloud Flow with an example HTTP Trigger and sample body. Another really useful button to have. While on a Dialog Action, you can use this button to trigger the creation of a new Cloud Flow with all the default paramaters from the current dialog passed through by default. There's also a toggleable field on the form which triggers the same logic.
    • Once a cloud flow has been created, you need to copy the HTTP POST URL back to the Flow Trigger URL.

Entities

Action Buttons

[Placeholder]

Dialogs

[Placeholder]

Dialog Fields

[Placeholder]

Dialog Buttons

[Placeholder]

Dialog Actions

[Placeholder]

Flow URL

[Placeholder]

Child Dialog

[Placeholder]

JavaScript Function

[Placeholder]

Dialog Conditions

[Placeholder]

Advanced Functions

These functions are used internally when an action button or dialog button is clicked, and are made available externally as well for developers to call these steps manually. These can be used in the 'JavaScript Function' callback from an action button or dialog. These can also be used anywhere else in your solution by adding a reference to mag_/js/actions.ribbon.js. A reference will also need to be added for mag_/js/alert.js if an action button wasn't clicked prior, and your action button has a child dialog action. Both of these libraries are automatically loaded when an action button is clicked from the Actions flyout menu.

triggerActionButton

Use this function to manually trigger an action button from custom code. The action button triggered does not have to be activated, allowing you to hide the action button from the default 'Actions' flyout menu.

Actions.triggerActionButton(actionButtonId, responseObj, formContext)

Parameters

actionButtonId

  • Type: String. The GUID of the Action Button record to trigger. This should be obtained dynamically unless the Action Button GUID's are maintained between environments (recommended).
"15b1c1b4-767a-eb11-a812-000d3ac89545"

responseObj

  • Type: Object. (Optional) The object passed between dialogs, and sent to the Cloud Flow at the end of the process. Contains all the inputs from the process, including the _userId, _entityType and _entityIds (if provided). Can also be used to pass through default values for dialog fields, or to pass through additional values to the flow at the end of the process. If _entityType is set, and _entityIds contains exactly one ID, the record will be retrieved to be used with dialog dynamic values.
{
    _entityType: "account", // Selected entity
    _entityIds: ["05bb87a6-e2fe-462c-aa8b-0a11757e9eec"], // Selected record(s)
    _userId: Xrm.Utility.getGlobalContext().userSettings.userId, // Current user
    firstName: "Paul", // Default value on dialog
    extraMetadata: 123456 // Extra value to send to flow
}

formContext

  • Type: Object. (Optional) The formContext obtained from the form or view. Used to automatically refresh the form/view after a cloud flow has been triggered.
executionContext.getFormContext()

Example

The following code sample triggers the 'Update Account Details' action button for the opened account record (i.e. from the form).

var formContext = executionContext.getFormContext();
var actionButtonId = "15b1c1b4-767a-eb11-a812-000d3ac89545"; // Update Account Details
var entityName = "account";
var entityId = formContext.data.entity.getId(); // Current record
var userId = Xrm.Utility.getGlobalContext().userSettings.userId; // Current user
var responseObj = { 
    _entityType: entityName,
    _entityIds: [entityId],
    _userId: userId
};

Actions.triggerActionButton(actionButtonId, responseObj, formContext);

triggerDialog

Use this function to manually trigger a dialog from custom code. This can be used independenly from an action button, allowing you to call directly into a dialog from anywhere.

Actions.triggerDialog(dialogId, entityObj, responseObj, formContext)

Parameters

dialogId

  • Type: String. The GUID of the Dialog record to trigger. This should be obtained dynamically unless the Dialog GUID's are maintained between environments (recommended).
"3bc21c4b-5c76-eb11-a812-000d3ac8b885"

entityObj

  • Type: Object. (Optional) The WebApi result for the selected record. This is used when dialog fields have default values from the record using {{fieldname}}. The object structure typically has the field schema name as the key, and the field value as the value. Lookups use _fieldname_value etc.
{
    accountid: "05bb87a6-e2fe-462c-aa8b-0a11757e9eec",
    name: "Frosty's",
    telephone1: "555-1234"
}

responseObj

  • Type: Object. (Optional) The object passed between dialogs, and sent to the Cloud Flow at the end of the process. Contains all the inputs from the process, including the _userId, _entityType and _entityIds (if provided). Can also be used to pass through default values for dialog fields, or to pass through additional values to the flow at the end of the process.
{
    _entityType: "account", // Selected entity
    _entityIds: ["05bb87a6-e2fe-462c-aa8b-0a11757e9eec"], // Selected record(s)
    _userId: Xrm.Utility.getGlobalContext().userSettings.userId, // Current user
    firstName: "Paul", // Default value on dialog
    extraMetadata: 123456 // Extra value to send to flow
}

formContext

  • Type: Object. (Optional) The formContext obtained from the form or view. Used to automatically refresh the form/view after a cloud flow has been triggered.
executionContext.getFormContext()

Example

The following code sample triggers the 'Quick Add Contact' dialog for the opened account record (i.e. from the form), and sets the default value of the firstName dialog field to 'Paul'.

var formContext = executionContext.getFormContext();
var dialogId= "3bc21c4b-5c76-eb11-a812-000d3ac8b885"; // Quick Add Contact
var entityName = "account";
var entityId = formContext.data.entity.getId(); // Current record
var userId = Xrm.Utility.getGlobalContext().userSettings.userId; // Current user
var entityObj = await Xrm.WebApi.retrieveRecord(entityName, entityId);
var responseObj = { 
    _entityType: entityName,
    _entityIds: [entityId],
    _userId: userId,
    firstName: "Paul"    
};

Actions.triggerDialog(dialogId, entityObj, responseObj, formContext);

triggerHttpFlow

Use this function to manually trigger a Power Automate HTTP Flow from custom code. This can be used independenly from an action button, allowing you to call directly into a flow from anywhere, and get the response.

Actions.triggerHttpFlow(flowUrl, responseObj, formContext, successCallback, errorCallback)

Parameters

flowUrl

  • Type: String. The HTTP POST URL obtained from a Power Automate Flow trigger step 'When a HTTP request is received'.
"https://prod-13.australiasoutheast.logic.azure.com:443/workflows/xxxx/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=xxxx"

responseObj

  • Type: Object. (Optional) The object sent to the Cloud Flow. This object is posted to the flowUrl as JSON. Typically contains the values from the action button/dialog, but can be used to send any values to the flow.
{
    _entityType: "account", // Selected entity
    _entityIds: ["05bb87a6-e2fe-462c-aa8b-0a11757e9eec"], // Selected record(s)
    _userId: Xrm.Utility.getGlobalContext().userSettings.userId, // Current user
    firstName: "Paul", // Default value on dialog
    extraMetadata: 123456 // Extra value to send to flow
}

formContext

  • Type: Object. (Optional) The formContext obtained from the form or view. Used to automatically refresh the form/view after the cloud flow has been triggered.
executionContext.getFormContext()

successCallback

  • Type: Function. (Optional) The function to call after the flow has been triggered. If the flow has an HTTP Reponse step, this will be once the flow has completed successfully, and will contain the response from the flow. If there is no HTTP Response step, the success callback will run immediately after the flow is triggered, regardless of whether it completes successfully.
function (response) {
    // Do something with the flow response
    console.log(response);
}

errorCallback

  • Type: Function. (Optional) The function to call if the flow encounters an error. Contains the error message returned from flow, as well as the full response. If there is no HTTP Response step in the flow, the error callback will not run, as the success callback will fire before the flow finishes running.
function (error, response) {
    // Do something with the error
    console.error(response);
    alert(error);
}

Example

The following code sample triggers the 'Quick Add Contact' flow for the opened account record (i.e. from the form), and passes through values for firstName, lastName, and email.

var formContext = executionContext.getFormContext();
var flowUrl = "https://prod-13.australiasoutheast.logic.azure.com:443/workflows/xxxx/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=xxxx"; // Quick Add Contact
var entityName = "account";
var entityId = formContext.data.entity.getId(); // Current record
var userId = Xrm.Utility.getGlobalContext().userSettings.userId; // Current user
var responseObj = { 
    _entityType: entityName,
    _entityIds: [entityId],
    _userId: userId,
    firstName: "Frosty",
    lastName: "Stevens",
    email: "[email protected]"
};

Actions.triggerHttpFlow(flowUrl, responseObj, formContext, function (response) {
    // Success
    console.log(response);
}, function (error, response) {
    // Error
    console.error(response);
    alert(error);
});
Clone this wiki locally