Resco Power Components

From Resco's Wiki
Jump to navigation Jump to search
Warning This page describes a function that has not yet been publicly released, or has been released in beta / preview quality. Subject to change.

Resco Power Components is an upcoming Resco product. It enables developers and consultants to speed up and simplify building of applications for Microsoft Power Platform.

Installation

Preliminary installation procedure for the preview version of 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

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
  • componentBindingPlaceholder (String column bound) – Placeholder property to which the file uploader will be bound
Optional parameters
  • multipleFilesAllowed (True/False or Two Options column) – Select whether more than one file can be selected for upload.
  • maxFileCountToUpload (Number) – Maximum number of files to be selected for upload at once. Default is 10.
  • acceptedFileType (String) – Accepted file types. Comma-separated list of file extensions. Default ".png, .jpg, .pdf, .jpeg, .mp4".
  • maxSize (Number) – 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
}

Image gallery

Image gallery simplifies the work with image and video annotations in Power Platform.

image gallery pcf control

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 generate image

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