Skip to content
Permalink
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 https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules

# generated directory
**/generated

# output directory
/out
@@ -0,0 +1,45 @@
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<PowerAppsTargetsPath>$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(VisualStudioVersion)\PowerApps</PowerAppsTargetsPath>
</PropertyGroup>

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

<PropertyGroup>
<Name>PCF-ReactSample</Name>
<ProjectGuid>ca94fdcb-5def-43fa-8d97-e17289048cfd</ProjectGuid>
<OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
</PropertyGroup>

<PropertyGroup>
<TargetFrameworkVersion>v4.6.2</TargetFrameworkVersion>
<!--Remove TargetFramework when this is available in 16.1-->
<TargetFramework>net462</TargetFramework>
<RestoreProjectStyle>PackageReference</RestoreProjectStyle>
</PropertyGroup>

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

<ItemGroup>
<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\**"/>
</ItemGroup>

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

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

</Project>
@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<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.
Example:
<type-group name="numbers">
<type>Whole.None</type>
<type>Currency</type>
<type>FP</type>
<type>Decimal</type>
</type-group>
<property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
-->
<resources>
<code path="index.ts" order="1"/>
<!-- UNCOMMENT TO ADD MORE RESOURCES
<css path="css/PCFReactSample.css" order="1" />
<resx path="strings/PCFReactSample.1033.resx" version="1.0.0" />
-->
</resources>
<!-- UNCOMMENT TO ENABLE THE SPECIFIED API
<feature-usage>
<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" />
</feature-usage>
-->
</control>
</manifest>
@@ -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);
this._notifyOutputChanged();
}

/**
* Empty constructor.
*/
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");
this.inputElement.addEventListener("input",this._refreshData);
this.inputElement.setAttribute("id","inputText");

// 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.
this._container.appendChild(this.inputElement);
container.appendChild(this._container);
var sample = document.createElement("div");
container.appendChild(sample);
}


/**
* 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.