Skip to content

Commit e851cdc

Browse files
markcunninghamukmarkcunninghamuk
committed
Make the control totally parameterised
1 parent dddc3cc commit e851cdc

4 files changed

Lines changed: 62 additions & 50 deletions

File tree

‎controls/pcfcontroldemo/InspectorPickerControl/ControlManifest.Input.xml‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎controls/pcfcontroldemo/MultiSelectControl/ControlManifest.Input.xml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<manifest>
3+
<control namespace="MultiSelectPCFControl" constructor="MultiSelectPCFControl" version="1.0.1" display-name-key="MultiSelectPCFControl" description-key="MultiSelectPCFControl description" control-type="standard">
4+
<!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
5+
<property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
6+
<property name="entityName" display-name-key="Entity Name" description-key="Name of the entity from which you want to return results" of-type="SingleLine.Text" usage="input" required="true" />
7+
<property name="filterField" display-name-key="FilterField" description-key="The field to do the filter on" of-type="SingleLine.TextArea" usage="input" required="true" />
8+
<property name="topCount" display-name-key="TopCount" description-key="Number of items to return (Above 50 not recommended)" of-type="SingleLine.Text" usage="input" required="true" />
9+
<property name="columns" display-name-key="Columns" description-key="Columns to be retrieved" of-type="SingleLine.Text" usage="input" required="true" />
10+
<property name="displayFieldLabel" display-name-key="labelField" description-key="Field shown in the select picker" of-type="SingleLine.Text" usage="input" required="true" />
11+
<property name="displayValueField" display-name-key="ValueField" description-key="The value to select when Item is selected" of-type="SingleLine.Text" usage="input" required="true" />
12+
<resources>
13+
<code path="index.ts" order="1"/>
14+
<!-- UNCOMMENT TO ADD MORE RESOURCES
15+
<css path="css/InspectorPickerControl.css" order="1" />
16+
<resx path="strings/InspectorPickerControl.1033.resx" version="1.0.0" />
17+
-->
18+
</resources>
19+
<feature-usage>
20+
<uses-feature name="WebAPI" required="true" />
21+
</feature-usage>
22+
</control>
23+
</manifest>

controls/pcfcontroldemo/InspectorPickerControl/InspectorReact.tsx renamed to controls/pcfcontroldemo/MultiSelectControl/MultiSelect.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import { release } from "os";
2-
import { relative } from "path";
31
import * as React from "react";
42
import AsyncSelect from 'react-select/async';
53

64
export interface IProps {
5+
displayValueField: any;
6+
displayFieldLabel: any;
7+
columns: any;
8+
topCount: any;
9+
filterField: any;
10+
entityName: any;
711
value: string;
812
onChange: (value:string) => void;
913
onSearch: (value:string) => void;
@@ -35,30 +39,30 @@ export class MultiSelectControl extends React.Component<IProps, IState> {
3539
return;
3640
};
3741

38-
var res = ob.map((e: { bookableresourceid: any; }) => e.bookableresourceid).join(",");
42+
var res = ob.map((e: any) => e[this.props.displayValueField]).join(",");
43+
3944
this.setState({value : res });
4045
this.props.onChange(res);
4146
}
4247

4348
loadOptions = async (inputValue: string) => {
44-
console.log(inputValue)
4549
const res = this.props.onSearch(inputValue);
4650
console.log("returning" + JSON.stringify(res));
47-
return res;
51+
return res;
4852
}
4953

5054
public render(): JSX.Element
5155
{
52-
const selectStyles = { menuPortal: (zzz: any) => ({ ...zzz, zIndex: 9999}) };
56+
const selectStyles = { menuPortal: (zindex: any) => ({ ...zindex, zIndex: 9999}) };
5357

5458
return (
5559
<div>
5660
<AsyncSelect
5761
isMulti={true}
5862
menuPortalTarget={document.body}
5963
styles={selectStyles}
60-
getOptionLabel={e => e.name}
61-
getOptionValue={e => e.bookableresourceid}
64+
getOptionLabel={e => e[this.props.displayFieldLabel]}
65+
getOptionValue={e => e[this.props.displayValueField]}
6266
loadOptions={this.loadOptions}
6367
defaultOptions
6468
onChange={this.onChange}

controls/pcfcontroldemo/InspectorPickerControl/index.ts renamed to controls/pcfcontroldemo/MultiSelectControl/index.ts

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {IInputs, IOutputs} from "./generated/ManifestTypes";
22
import * as React from "react";
33
import * as ReactDOM from "react-dom";
4-
import { IProps, MultiSelectControl } from "./InspectorReact";
4+
import { IProps, MultiSelectControl } from "./MultiSelect";
55

6-
export class InspectorPickerControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
6+
export class MultiSelectPCFControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
77

88
private _value: any;
99
private _notifyOutputChanged:() => void;
@@ -13,7 +13,13 @@ export class InspectorPickerControl implements ComponentFramework.StandardContro
1313
value : "",
1414
onChange : this.notifyChange.bind(this),
1515
onSearch : this.notifySearch.bind(this),
16-
records: []
16+
records: [],
17+
displayValueField: "",
18+
displayFieldLabel: "",
19+
columns: "",
20+
topCount: "",
21+
filterField: "",
22+
entityName: ""
1723
};
1824
private _context: ComponentFramework.Context<IInputs>;
1925

@@ -40,7 +46,13 @@ export class InspectorPickerControl implements ComponentFramework.StandardContro
4046
this._notifyOutputChanged = notifyOutputChanged;
4147
this._container = document.createElement("div");
4248
this.props.value = context.parameters.sampleProperty.raw || "";
43-
49+
this.props.entityName = context.parameters.entityName.raw || "";
50+
this.props.filterField = context.parameters.filterField.raw || "";
51+
this.props.topCount = context.parameters.topCount.raw || "";
52+
this.props.columns = context.parameters.columns.raw || "";
53+
this.props.displayFieldLabel = context.parameters.displayFieldLabel.raw || "";
54+
this.props.displayValueField = context.parameters.displayValueField.raw || "";
55+
4456
container.appendChild(this._container);
4557
console.log("init");
4658
}
@@ -55,14 +67,14 @@ export class InspectorPickerControl implements ComponentFramework.StandardContro
5567
async notifySearch(newValue: string)
5668
{
5769
console.log("called notifySearch");
58-
59-
return this._context.webAPI.retrieveMultipleRecords("bookableresource","?$select=name,bookableresourceid&$filter=contains(name, '" + newValue + "')")
70+
console.log(this.props.entityName,`?$select=${this.props.columns}&$filter=contains(${this.props.filterField}, '${newValue}')&$top=${this.props.topCount}`);
71+
72+
return this._context.webAPI.retrieveMultipleRecords(this.props.entityName,`?$select=${this.props.columns}&$filter=contains(${this.props.filterField}, '${newValue}')&$top=${this.props.topCount}`)
6073
.then(function (results) {
6174
return results?.entities;
6275
})
6376
}
6477

65-
6678
private renderElement()
6779
{
6880
ReactDOM.render(
@@ -81,6 +93,14 @@ export class InspectorPickerControl implements ComponentFramework.StandardContro
8193
// Add code to update control view
8294
this._value = context.parameters.sampleProperty.raw;
8395
this.props.value = this._value;
96+
97+
this.props.topCount = context.parameters.topCount.raw;
98+
this.props.columns = context.parameters.columns.raw;
99+
this.props.filterField = context.parameters.filterField.raw;
100+
this.props.displayFieldLabel = context.parameters.displayFieldLabel.raw;
101+
this.props.displayValueField = context.parameters.displayValueField.raw;
102+
this.props.entityName =context.parameters.entityName.raw;
103+
84104
this.renderElement();
85105
}
86106

@@ -103,10 +123,5 @@ export class InspectorPickerControl implements ComponentFramework.StandardContro
103123
*/
104124
public destroy(): void
105125
{
106-
// Add code to cleanup control if necessary
107-
108126
}
109127
}
110-
111-
112-
//https://github.com/dynamicscode/PCF-ReactSample/blob/master/PCFReactSample/index.ts

0 commit comments

Comments
 (0)