Resco Power Components

From Resco's Wiki
Jump to navigation Jump to search

Resco Power Components is a set of PCF controls developed by Resco. It enables developers and consultants to speed up and simplify building of applications for Microsoft Power Platform.

Inquiries and feature requests

Help us shape this product to better match your needs. If you have suggestions how to improve any of the existing PCF controls or have tips for other useful controls, let us know:

Request component

Installation

Follow this installation procedure for Resco Power Components:

  1. Download the components from Resco web.
  2. In Power Apps, import them as a solution to your Power Platform organization. Publish all customizations.
  3. Edit the form where you want to place the component.
  4. From the left menu, select Components > Get more components.
  5. On the Get more components pane, select the component you need and click Add.
  6. From the Components > More components pane, drag the component to your form.
  7. Select the component and set it up.

components pane in Power Apps

Getting started with PCF controls

If you are experimenting with PCF controls in Power Apps, here are some introductory tips:

  • PCF controls are used on forms. To add PCF, you need to edit the form.
  • PCF controls are bound to a particular field on a form.
  • Sometimes, the field is related to the function of the PCF. For example, the tree lookup PCF control must be used on a lookup field.
  • In other cases, it does not matter what field to choose for the PCF. You can select any field as your Component Binding Placeholder. For example, in the case of file upload PCF bound to a text field: instead of a text field, the upload button is displayed on the form. The PCF does not affect the value of the text field.
  • When you add a PCF control to the form, PCF properties are displayed. You can return to these properties later: Select the component, expand Components on the Properties pane, then click the PCF.
  • If your component binding field is unrelated to the PCF function, it can make sense to Hide label or modify it.
  • By default, the Table columns pane is configured to hide columns you already used on the form. Clear Show only unused table columns if you need to add a column multiple times (e.g., as a standard text field and as a PCF).

adding PCF controls to power apps

Date range picker

This PCF control allows you to display and select a date range. Select two date-only columns: start date and end date.

Date-range-display.png Date-range-edit.png

Mandatory parameters
  • Start – Select a table column of the type "Date and Time" (Format: "Date only") as the start day of the date range
  • End – Select a table column of the type "Date and Time" (Format: "Date only") as the end day of the date range
Optional parameters
  • Initial Date (Date And Time/static value) – If no value is set in the start and end fields, you can provide the initial date of the date range (selection in the calendar will start here)
  • Format (String) – Format of the date when rendered in the input field. E.g. "yyyy-MM-dd".
  • isoWeek (Static True/False or Two Options) – ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
  • minimumDate (Date And Time/static value) – Minimal date range start date, date sooner cannot be selected
  • maximumDate (Date And Time/static value) – Maximal date range end date, date after this cannot be selected
  • weekendOff(Static True/False or Two Options) – Weekends are disabled (Saturday and Sunday). Date ranges that include weekends cannot be selected.
  • disabledDatesEntityLogicalName (String) – The logical name of a table containing rows with disabled dates. The table must have a column with the name provided in the setting "disabledDatesEntityColumnName" or it will search for column with name new_day of type Date and Time (Date Only). All these records will be disabled in the date range picker. They cannot be selected, and the range cannot include them.
  • disabledDatesEntityColumnName (String) – Column name in disabledDatesEntityLogicalName, should be of type Date and Time (Date Only).

File uploader

The purpose of this component is to upload files as annotations directly from any table form. Annotations are automatically associated with the table row displayed in the form.

File-upload.png

Mandatory parameters
  • Component Binding Placeholder – Placeholder property to which the file uploader is bound
Optional parameters
  • Multiple Files Allowed – Select whether more than one file can be selected for upload.
  • Max File Count To Upload – Maximum number of files to be selected for upload at once. Default is 10.
  • Accepted File Type – Accepted file types. Comma-separated list of file extensions. Default ".png, .jpg, .pdf, .jpeg, .mp4".
  • Max Size – Maximum file size to upload in MB. No limit by default, however, subject to platform settings.

Kanban board

A Kanban board PCF control visualizes workflow progress by displaying tasks in different stages of completion. It can be used for project management, process optimization, and enhancing team collaboration.

Mechanically, you can display table rows on the board. The table must include a column of the type "option set".

Kanban-board.png

Mandatory parameters
  • Table and View – Define the list of table rows used as the kanban board's source.
  • Show labels – Show or hide column labels on the kanban card.
  • Property – Enter the logical name of the property of the type option set. It is used to generate the columns of your board.
Optional parameters
  • Colorcoding property – the property (type: option set) used for color coding of cards.
  • Colors – List of colors in the format "red,green,blue" or "#EEEEE, #0000" (or combined).

Tree view

Tree view displays data from multiple tables in a tree-like fashion. For example, you can show a list of accounts with their related contacts.

Tree view for Power Apps

You can expand and collapse the tree nodes, search the entire tree, display the form of any row, or use the plus buttons to create new table rows.

Mandatory parameters
  • Table – Select the primary table displayed in the tree.
  • View – Select which view to use.
  • Tree definition – Enter the tree definition in JSON format.
{
  "child": {
    "viewId": "375f3bb6-b357-ee11-be6e-6045bd9b9b87",
    "property": "parentcustomerid"
  }
}

For example, you can select "account" as the primary table. Then, in the tree definition, "viewId" identifies the view for the "contact" table and "property" is the reference (lookup) connecting accounts and contacts.

The full JSON schema is listed below. It can have parent, child, and recursive levels defined. 

{
	"$schema": "http://json-schema.org/draft-07/schema#",
	"type": "object",
	"properties": {
		"parents": {
			"type": "array",
			"items": { "$ref": "#/definitions/TreeLevelConfiguration" }
		},
		"child": { "$ref": "#/definitions/TreeLevelConfiguration" },
		"recursive": { "type": "string" }
	},
	"definitions": {
		"TreeLevelConfiguration": {
			"type": "object",
			"properties": {
				"property": { "type": "string" },
				"viewId": { "type": "string" },
				"parents": {
					"type": "array",
					"items": { "$ref": "#/definitions/TreeLevelConfiguration" }
				},
				"child": { "$ref": "#/definitions/TreeLevelConfiguration" },
				"recursive": { "type": "string" }
			},
			"required": ["property", "viewId"],
			"additionalProperties": false
		}
	},
	"additionalProperties": false
}

Tree lookup

The component is bound to a lookup field and displays a dropdown (combobox) component that allows the user to select a value for the lookup field. The available options can form a tree structure, allowing the selected option to be nested under a parent option. For example, a Task can be nested under its parent Task, or an Account can be nested under its parent Location or Account (using recursion). Selection from the options is limited to the correct entity type specified by the lookup field configuration.

tree view drop PCF control

Mandatory parameters
  • Lookup – A form field of type Lookup. This is the field that the component is bound to. Changes to this field are reflected in the component, and the user can use the dropdown to change the value of this field.
  • Tree Definition – Dropdown tree definition JSON. See below to see the format.

The Tree Definition parameter adheres to the same schema as above. It can have parent, child, and recursive levels defined. The property property is a reference (lookup) property to parent or child level. The viewId property is an id of the view used for the level in the tree.

Example of a tree definition config
{
  "parents": [
    {
      "viewId": "location-view-id",
      "property": "parentLocationId",
      "parents": [
        {
          "viewId": "organization-view-id",
          "property": "parentOrganizationId"
        }
      ]
    }
  ],
  "child": {
    "viewId": "appointment-view-id",
    "property": "accountId",
    "child": {
      "viewId": "task-view-id",
      "property": "appointmentId"
    }
  },
  "recursive": "parentAccountId"
}

This example configuration for the Account lookup field shows that the tree dropdown will list:

  • Account entities - of main level (the main level is not listed in the configuration as it comes directly from the lookup view).
  • Each Account will be nested under its parent Location via parentLocationId property, using the location-view-id view.
  • Each Location will be nested under its parent Organization via parentOrganizationId property, using the organization-view-id view.
  • Each Account will have child Appointments via accountId property, using the appointment-view-id view.
  • Each Appointment will have child Tasks via appointmentId property, using the task-view-id view.
  • The tree structure can be recursive based on the parentAccountId property, meaning that each Account which has a parent Account via parentAccountId property, will be nested under the parent.

Note that each parent level can only be configured with another parent level, not a child level. Similarly, each child level can only be configured with another child level, not a parent level. However, every level can have recursion configured.

The viewId can be retrieved from URL of the view. Navigate to Tables / Entity, click Views, click the desired view, and copy the view id from the end of the URL.

Image gallery

The image gallery simplifies work with image and video annotations in Power Platform. Optionally, the gallery can include image editing and AI retouching features. The latter requires an OpenAI API key to function.

image gallery pcf control

Mandatory parameters
  • Component Binding Placeholder: Placeholder property to which the image gallery is bound
Optional parameters
  • Filter – enter OData query filter if you want to restrict which notes to include
  • Show Thumbnails – display image thumbnails under the previewed image
  • Image Editor – allow users to edit images from the gallery
  • API Key – enter the OpenAI API key (necessary only if you need AI image tweaks)

Multiselect dropdown list

This PCF control allows multiple options selection in the form of a dropdown. The selected options are displayed as chips. They are saved (serialized) in JSON format in your chosen table column.

multi drop down list in action

Mandatory parameters
  • View Id – Enter the id of view used as a source of options to select from. (Ids can be found in the URL of views.)
  • Selected Options – Select the column where the selected options are saved (in JSON format). For example: [{"id":"042b6a27-89fd-e711-a836-000d3a33a7cb","label":"Maria Campbell (sample)"},{"id":"0c2b6a27-89fd-e711-a836-000d3a33a7cb","label":"Paul Cannon (sample)"}]
Optional parameters
  • Enabled – Enable or disable the component for changes. The default is true.
  • Minimum Number of Selections – Define the minimum number of selected options. The default is 0.
  • Maximum Number of Selections – Define the maximum number of selected options. The default is 2^53-1.
  • Placeholder – Enter the placeholder text. The default is an empty string.

AI translate field

An AI Translate PCF control translates input text into another language using OpenAI, making it useful for applications requiring real-time language translation.

AI translate power component

Mandatory parameters
  • Input Text – A text field to translate.
  • Output Text – A text field where the result is saved.
  • API Key – Enter the OpenAI API key.
  • Target Language – Enter the language code of the target language, for example "en" for English. You can also enter language name directly, for example, "Spanish" or "Klingon".

AI generate image

AI Image Generator PCF control uses OpenAI to generate images from text descriptions, such as creating user avatars based on specific inputs.

AI generate image power component.png

Mandatory parameters
  • Input Text – a text field used as the prompt.
  • API Key – enter the OpenAI API key.

View inspection reports

This control displays reports from all questionnaires related to the parent table. Users don’t need to open each related questionnaire to find the report in its timeline. The two buttons allow you to open the file directly or go to the annotation form.

PCF control displaying reports of related questionnaires

Mandatory parameters
  • Component Binding Placeholder – Placeholder property to which the control is bound
Retrieved from "https://docs.resco.net/mediawiki/index.php?title=Resco_Power_Components&oldid=11264"