PCF-Controls

Controls using PowerApps Components Framework

NN Checkboxes

Custom Switch

Date as checkbox

Simple Notification

Action Button

Linear Slider with steps

Year Dropdown

NN Checkboxes

Download

Purpose

The purpose of this control is to allow user to associate/disassociate records for a many-to-many relationship displaying all possible records as checkboxes or toggle switches

Samples

	Checkboxes	Switches
No color / Not grouped
Records Color / Not grouped
No color / Grouped
Records color / Grouped
Group color / Grouped

Configuration

This is the list of parameters that can be set on the control

Parameter	Description	Required	Bound to an attribute
DataSet/Label	Attribute to use as label for the checkbox	X	X
DataSet/Background color	Attribute to use as background color		X
DataSet/Color	Attribute to use as forecolor		X
DataSet/Group by	Attribute used to group records. If used, this attribute must be the first attribute used to sort the view used by this control		X
DataSet/Filter attribute	Filter attribute for related records. *If used, this attribute must be of the same type as the control parameter Filter attribute *		X
Filter attribute	Filter attribute for related records. *If used, this attribute must be of the same type as the control parameter DataSet/Filter attribute *		X
Relationship	Schema name of the relationship. required only if multiple many-to-many relationship exist for both related entities	?
Columns	Number of columns to display checkboxes	X
Layout	Choose the layout for the rendering	X
Switch Off color	Default background color when the switch is Off. This parameter is overriden by the parameter Background color		X
Switch On color	Default background color when the switch is On. This parameter is overriden by the parameter Background color		X
Allow to select a category	Indicates if links must be added for each category to select/unselect all records	X

⚠️Even if Lookup.Simple type of column can be selected for filter, do not use it until it is supported by Microsoft and the bug that breaks dataset content is fixed.

⚠️When using filter feature, the control won't disassociate related records that don't fit with the selected filter. It's your responsability to disassociate these records.

Custom Switch

Download

Purpose

The purpose of this control is to allow user to add switch for Two Options attribute and apply the color and shape they want to fit with the color of the company.

Samples

Configuration

This is the list of parameters that can be set on the control

Parameter	Description	Required	Bound to an attribute
Attribute	The attribute to display as a switch	X	X
Off color	Color used for the switch background when the value is Off
On color	Color used for the switch background when the value is On
Switch color	Color used for the switch
Layout	Square or Round	X
Display label	Indicates if selected option label must be displayed next to the switch

Date as checkbox

Purpose

As mentioned by MVP Gus Gonzalez in this 2 minutes Tuesday video, Two Options attribute could be replaced with Datetime attribute for some business needs. This PCF allows to transform a date time attribute in custom switch to keep the behavior of a checkbox while storing value as the current date time.

Samples

Configuration

See documentation of Custom Switch. This is the same.

Simple Notification

Purpose

Allows to display a notification or an helpful message to the user in a section. This should avoid to create static web resource to display information.

Samples

Configuration

Parameter	Description	Required	Bound to an attribute
Attribute	The attribute to use to display the control	X	X
Notification type	Type of notification	X
Message	Message to display	X
Display a link?	Indicates if an hypertext link must be added at the end of the message
Link text	Text to be used for the link
Link	Url to navigate to when clicking on the link

Action Button

Purpose

Allows to display a button to perform an action. To allow developer to do anything they want from the form, this button simply copies the text of the action button or its identifier (see configuration) on the bound string attribute. The developer needs to add an onChange event to this string attribute, check for the value of the attribute (should be the text of the action button) and perform the action needed.

Samples

Sample script to be implemented to execute an action when the button is clicked

function onChange(context){
  let attribute = context.getEventSource();
  let value = attribute.getValue();
  if(value === "Run this!"){
    Xrm.Navigation.openAlertDialog({text: "Action button has been triggered!"});
  }
  // Clear the value and avoid to submit data
  attribute.setValue(null);
  attribute.setSubmitMode("never");
}

Configuration

Parameter	Description	Required	Bound to an attribute	Additional info
Attribute	The attribute to use to display the control	X	X
ActionText	Text of the action button	X		Can be a static string or a json object with language id like {"1033":"Run this!","1036":"Exécute ça!"}
Button identifier	An identifier of your choice for the button
Send Identifier	Indicates if the identifier or the label should be sent when clicking on the button
Background color	Background color for default display
Border color	Border color for default display
Color	Text color for default display
Background color (hovered)	Background color when the mouse hovers the button
Border color (hovered)	Border color when the mouse hovers the button
Color (hovered)	Text color when the mouse hovers the button
Icon	Icon to use on the action button			Available icons

Linear Slider with steps

Purpose

Displays a linear slider that can be configured to allow only specific step. This control can also be configured to change the color of the slider, specify minimum and maximum values, and add text before and/or after the selected value. This control is an adaptation of the TSLinearInputControl sample from Microsoft

Samples

Slider with blue color, minimum 0, maximum 100, step by 5, prefix "Percentage: " and suffix " %"

Configuration

Parameter	Description	Required	Bound to an attribute	Additional info
Attribute	The attribute to use to display the control	X	X
Minimum	Minimum value for the slider control	X
Maximum	Maximum value for the slider control	X
Step	Step for the slider control	X
Color	Color of the slider
Label prefix	Define a text to be inserted before the value of the column
Label suffix	Define a text to be added after the value of the column
Label position	Position of the label under the slider	X		Left, Center or Right

Year Dropdown

Download

Purpose

The purpose of this control is to allow user to select a year in a dropdown and store the result in a DateTime, Whole number or Single line of text column.

Samples

Configuration

This is the list of parameters that can be set on the control

Parameter	Description	Required	Bound to an attribute
Target column	The column bound to this control	X	X
Years before	The number of years to add in the dropdown prior of current year
Years after	The number of years to add in the dropdown after of current year
Default month	Default month to generate the date when the target column is of type Date
Default day	Default day to generate the date when the target column is of type Date