Controls using PowerApps Components Framework

NN Checkboxes

Custom Switch

Date as checkbox

Simple Notification

Action Button

Linear Slider with steps

Year Dropdown

Lookup as Dropdown

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

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

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 or its identifier (see configuration) on the bound string attribute. If the bound attribute is a datetime, the current date is set as the attribute value. The developer needs to add an onChange event to this string or datetime attribute, check for the value of the attribute (can be the text or id of the action button for string attribute, current datetime for datetime attribute) 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 " %"

Download

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.

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

Download

The purpose of this control is to display a Dropdown that allows to select records from an entity. Records displayed are the ones returned by the view configured for the Lookup column.

This control has the following features:

• Localized label (optional) : If the table targeted has columns for specific language, the control can show the label for the user selected language. For example, if the targeted table has columns new_name1033 (for US English), new_name1036 (for French) and you configure the control to have a mask set to new_name{lcid}, the control will now what label to display if the user has set his language to US English or French.

• Most recently used items (optional) : Allows to display a specific number of recent items. This feature is handled by the lookup column configuration (which is technically unsupported, ie. not exposed by the PCF SDK). The PCF configuration can be used to limit the number of items to display

• Favorites (optional) : Allows to display some items first because they are the ones generally most used. Unique identifiers of items must be configured as a JSON array in the PCF

• Create new record (optional) : You can configure the control so that it shows a "Add new" option to open a new form for the targeted table. It also requires that the user has at least basic privileges for Create and Read on the targeted table.

• Lookup filtering (optional) : If the lookup is filtered by another lookup (and both targeted tables are in a 1N relationship), you can filter records available in the second dropdown, based on the first dropdown selected record.

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