Controls using PowerApps Components Framework

NN Checkboxes

Custom Switch

Date as checkbox

Simple Notification

Action Button

Linear Slider with steps

Download

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

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

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

Download

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.

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

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.

See documentation of Custom Switch. This is the same.

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.

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 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.

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");
}

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

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