Action Button PCF Virtual Control

Action Button PCF Virtual Control

In this post, I will review a recently created Action Button control that provides the ability to display an Action button on the form in multiple variations and bind it to an additional control to enable or disable the control on the form

The control has multiple properties that allow the customization of the control so that it can be displayed in a manner that is best suited for the end user. The table below shows the different properties of the control and explains how to use them

PropertyData TypeDescription
buttonAttributeSingle Line of Text (Bound)This is the property of the control that is bound to an attribute on the form
buttonTextSingle Line of TextThis is the text that will be displayed on the control.
If the button type is Compound, this will contain the first line of text that is displayed on the compound control.
buttonStatusTwo Options This is the Status of the control that is bound to a Two Options field, so that the control can be displayed as Enabled or Disabled
buttonIconSingle Line of TextThis is an Icon that will be displayed inside of the Action Button.
To get the list of available icons, refer to the following link: https://developer.microsoft.com/en-us/fluentui#/styles/web/icons
buttonTypeEnumerationThe button Type property is an enumeration of the type of button to be used.
You can specify the Default button which is a 1 line button or the Compound button which is a two-line button, displaying the second line in a smaller text
buttonStyleEnumerationThe button Style property is an enumeration of the style of the button to be used.
You can specify Standard button or Primary button. The Standard button is the default White/Gray button, while the Primary button is displayed in blue. This of course is based on the Theme as well.
secondaryTextSingle Line of TextThe secondary text is the second line of text that will be displayed on the button itself.

The following section shows how some of the buttons might appear on the form:

image
Button Type: Default, Button Style: Primary
image
Button Type: Default, Button Style: Primary, buttonIcon: Message
image
Button Type: Default, Button Style: Standard
image
Button Type: Default, Button Style: Standard, buttonIcon: Message
image
Button Type: Compound, Button Style: Primary
image
Button Type: Compound, Button Style: Standard
image
Button Type: Default, Button Style: Primary, Button Status: Linked to Disabled Option

The source code and the managed solutions for the PCF controls can be found in the github repository below:

PowerPlatform/PCF/ActionButton at master ยท ariclevin/PowerPlatform (github.com)