Skip to content
Browse files

Sample text box without React

  • Loading branch information...
dynamicscode committed Jun 27, 2019
0 parents commit e3b4793697d40647ad7b17c592b99d868307506b
Showing with 6,424 additions and 0 deletions.
  1. +10 −0 .gitignore
  2. +45 −0 PCF-ReactSample.pcfproj
  3. +37 −0 PCFReactSample/ControlManifest.Input.xml
  4. +92 −0 PCFReactSample/index.ts
  5. +6,212 −0 package-lock.json
  6. +19 −0 package.json
  7. +3 −0 pcfconfig.json
  8. +6 −0 tsconfig.json
@@ -0,0 +1,10 @@
# See for more about ignoring files.

# dependencies

# generated directory

# output directory
@@ -0,0 +1,45 @@
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="">

<Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" />
<Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.props" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.props')"/>


<!--Remove TargetFramework when this is available in 16.1-->

<PackageReference Include="Microsoft.PowerApps.MSBuild.Pcf" Version="0.*"/>

<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\.gitignore"/>
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\bin\**"/>
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\obj\**"/>
<ExcludeDirectories Include="$(OutputPath)\**"/>
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.pcfproj"/>
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.pcfproj.user"/>
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.sln"/>
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\node_modules\**"/>

<None Include="$(MSBuildThisFileDirectory)\**" Exclude="@(ExcludeDirectories)"/>

<Import Project="$(MSBuildToolsPath)\Microsoft.Common.targets" />
<Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.targets" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.targets')"/>

@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8" ?>
<control namespace="dynamicscode" constructor="PCFReactSample" version="0.0.1" display-name-key="PCFReactSample_Display_Key" description-key="PCFReactSample_Desc_Key" control-type="standard">
<!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
<property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
Property node's of-type attribute can be of-type-group attribute.
<type-group name="numbers">
<property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
<code path="index.ts" order="1"/>
<css path="css/PCFReactSample.css" order="1" />
<resx path="strings/PCFReactSample.1033.resx" version="1.0.0" />
<uses-feature name="Device.captureAudio" required="true" />
<uses-feature name="Device.captureImage" required="true" />
<uses-feature name="Device.captureVideo" required="true" />
<uses-feature name="Device.getBarcodeValue" required="true" />
<uses-feature name="Device.getCurrentPosition" required="true" />
<uses-feature name="Device.pickFile" required="true" />
<uses-feature name="Utility" required="true" />
<uses-feature name="WebAPI" required="true" />
@@ -0,0 +1,92 @@
import {IInputs, IOutputs} from "./generated/ManifestTypes";

export class PCFReactSample implements ComponentFramework.StandardControl<IInputs, IOutputs> {

private _value: string;
private _notifyOutputChanged:() => void;
private inputElement: HTMLInputElement;
private _container: HTMLDivElement;
private _context: ComponentFramework.Context<IInputs>;
private _refreshData: EventListenerOrEventListenerObject;

public refreshData(evt: Event) : void
this._value = (this.inputElement.value as any);

* Empty constructor.


* Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
* Data-set values are not initialized here, use updateView.
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
* @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
* @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
* @param container If a control is marked control-type='starndard', it will receive an empty div element within which it can render its content.
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
// Add control initialization code
this._context = context;
this._container = document.createElement("div");
this._notifyOutputChanged = notifyOutputChanged;
this._refreshData = this.refreshData.bind(this);

// creating HTML elements for the input type range and binding it to the function which refreshes the control data
this.inputElement = document.createElement("input");

// retrieving the latest value from the control and setting it to the HTMl elements.
this._value = context.parameters.sampleProperty.raw;
this.inputElement.setAttribute("value",context.parameters.sampleProperty.formatted ?
context.parameters.sampleProperty.formatted : "0");
// appending the HTML elements to the control's HTML container element.
var sample = document.createElement("div");

* Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
public updateView(context: ComponentFramework.Context<IInputs>): void
// Add code to update control view
this._value = context.parameters.sampleProperty.raw;
this._context = context;
this.inputElement.setAttribute("value",context.parameters.sampleProperty.formatted ? context.parameters.sampleProperty.formatted : "");

* It is called by the framework prior to a control receiving new data.
* @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
public getOutputs(): IOutputs
return {
sampleProperty : this._value

* Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
* i.e. cancelling any pending remote calls, removing listeners, etc.
public destroy(): void
// Add code to cleanup control if necessary
this.inputElement.removeEventListener("input", this._refreshData);

0 comments on commit e3b4793

Please sign in to comment.
You can’t perform that action at this time.