Button Control

Button Control

It's a most common ask to have a button on the Model driven form but there is no OOB (Out Of the Box) way.

When the PCF was introduced (4 years ago), I have created a [PCF control (https://github.com/ManirajKV/PCF) ] to achieve this requirement. It worked very well so far and thought of upgrading the button control to use the Fluent UI Button control. It will give similar look to the control in the Model Driven Apps.

Screenshots

How to Install

1. Download the latest solution from Releases folder
2. Import the latest solution in your environment

Configure the Control

Config Video: [(https://youtu.be/pbu5nei3K64)]

1. Once the soluton is installed
2. Navigate to the MDA form to configure the text field to show as button
3. Click Add Component and select Button Control

Note: This button control available only for the text field

4.Configure following propeties in the control

5. Button Properties

   • Type - There are 4 different type of butttons can be rendered using this control

     • 0 - Standard

     

     • 1 - Primary

     

     • 2 - Action

     

     • 3 - Icon

     

   • Label - It helps to configure the name for the button

   • Icon - It helps to configure the icon for the button and it supports only the fluent ui icons (https://uifabricicons.azurewebsites.net/)

Tip: use the tooltip to know more about the each input

These control can be configrued With / Without Icon / Text.

Configure click event

When the button clicked, it triggers the onchange event in the field by setting field value as Button label's value.

If there is no button label value in the control, control sets the value as Clicked

function onChange(executionContext) {
  // get formContext
  let formContext = executionContext.getFormContext();
  // get attribute
  var stdButtonAttr = formContext.getAttribute("bids_standardbutton");
  // get control value
  var stdValue = stdButtonAttr.getValue();

  if (stdValue == "Approve" || stdValue == "Clicked") {
    // alert scripts for demo
    var alertStrings = {
      confirmButtonLabel: "Yes",
      text: "You have Clicked, Standard Button",
      title: "On Click",
    };
    var alertOptions = { height: 120, width: 260 };
    Xrm.Navigation.openAlertDialog(alertStrings, alertOptions);
  }
  // prevent the value to be stored in the field.
  // otherwise it wont trigger onchange event,
  // bcoz the trigger value from control and field value remains same
  stdButtonAttr.setValue(null);
  stdButtonAttr.setSubmitMode("never");
}