Added getVisible and getDisabled support

Author: markcunninghamuk

controls/pcfcontroldemo/MultiSelectControl/MultiSelect.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import AsyncSelect from 'react-select/async';
 
 export interface IProps {
+	isControlVisible: boolean;
+	isControlDisabled: boolean;
 	displayValueField: any;
 	displayFieldLabel: any;
 	columns: any;
@@ -55,6 +57,8 @@ export class MultiSelectControl extends React.Component<IProps, IState> {
 	{		
 		const selectStyles = { menuPortal: (zindex: any) => ({ ...zindex, zIndex: 9999}) };
 
+		if (this.props.isControlVisible)
+		{
         return (
 			<div>
 			<AsyncSelect
@@ -65,8 +69,13 @@ export class MultiSelectControl extends React.Component<IProps, IState> {
 			getOptionValue={e => e[this.props.displayValueField]}
 			loadOptions={this.loadOptions}
 			defaultOptions
+			isDisabled={this.props.isControlDisabled}
 			onChange={this.onChange}		
 			/></div>
-        );
+		)
+		}
+		else{
+			return (<></>);
+		};
 	}
 }

controls/pcfcontroldemo/MultiSelectControl/index.ts

@@ -19,7 +19,9 @@ export class MultiSelectPCFControl implements ComponentFramework.StandardControl
 		columns: "",
 		topCount: "",
 		filterField: "",
-		entityName: ""	
+		entityName: "",
+		isControlVisible: true,
+		isControlDisabled: true	
 	};
 	private _context: ComponentFramework.Context<IInputs>;
 
@@ -77,6 +79,9 @@ export class MultiSelectPCFControl implements ComponentFramework.StandardControl
 
 	private renderElement()
 	{
+		this.props.isControlDisabled = this._context.mode.isControlDisabled;
+		this.props.isControlVisible = this._context.mode.isVisible;
+
 		ReactDOM.render(
 			React.createElement(MultiSelectControl, this.props)
 			, this._container