PCF control to export excel

exportexcel/.gitignore

@@ -0,0 +1,14 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# generated directory
+**/generated
+
+# output directory
+/out
+
+# msbuild output directories
+/bin
+/obj

exportexcel/excelexport/ControlManifest.Input.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<manifest>
+  <control namespace="contoso" constructor="excelexport" version="0.0.1" display-name-key="excelexport" description-key="excelexport description" control-type="standard">
+    <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
+    <property name="dataToExport" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
+    <property name="ButtonText" display-name-key="Property_ButtonText" description-key="Property_ButtonText" of-type="SingleLine.Text" usage="bound" required="true" default-value = "Export to Excel" />
+    <property name="FileName" display-name-key="Property_FileName" description-key="Property_FileName" of-type="SingleLine.Text" usage="bound" required="true" default-value = "exportResult"/>
+    <property name="ButtonHeight" display-name-key="Property_ButtonHeight" description-key="Property_ButtonHeight" of-type="SingleLine.Text" usage="bound" required="true" default-value = "60"/>
+    <property name="TextColor" display-name-key="Property_TextColor" description-key="Property_TextColor" of-type="SingleLine.Text" usage="bound" required="true" default-value="white"/>
+    <property name="TextSize" display-name-key="Property_TextSize" description-key="Property_TextSize" of-type="SingleLine.Text" usage="bound" required="true" default-value="15px"/>
+    <property name="Font" display-name-key="Property_Font" description-key="Property_Font" of-type="SingleLine.Text" usage="bound" required="true" default-value="verdana"/>
+    <property name="BackgroundColor" display-name-key="Property_BackgroundColor" description-key="Property_BackgroundColor" of-type="SingleLine.Text" usage="bound" required="true" default-value="Purple"/>
+
+
+    <!-- 
+      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/excelexport.css" order="1" />
+      <resx path="strings/excelexport.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>

exportexcel/excelexport/index.ts

@@ -0,0 +1,135 @@
+import {IInputs, IOutputs} from "./generated/ManifestTypes";
+import { Injectable } from '@angular/core';
+import * as XLSX from 'xlsx';
+
+const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+const EXCEL_EXTENSION = '.xlsx';
+
+export class excelexport implements ComponentFramework.StandardControl<IInputs, IOutputs> {
+	private button: HTMLButtonElement;
+	private filename:string;
+	private _notifyOutputChanged: () => void;
+	private printable:string;
+	private testss:JSON;
+
+	/**
+	 * 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='standard', 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.button = document.createElement("button");
+		// Get the localized string from localized string
+		if(context.parameters.ButtonText.raw)
+		{
+			this.button.innerHTML = context.parameters.ButtonText.raw;
+		}
+		this.button.classList.add("SimpleIncrement_Button_Style");
+		if(context.parameters.BackgroundColor.raw){
+			this.button.style.backgroundColor = context.parameters.BackgroundColor.raw;
+		}; 
+		if(context.parameters.TextColor.raw)
+		{
+			this.button.style.color = context.parameters.TextColor.raw;
+		};
+		if(context.parameters.TextSize.raw)
+		{
+			this.button.style.fontSize = context.parameters.TextSize.raw;
+		};
+		if(context.parameters.Font.raw)
+		{
+			this.button.style.fontFamily = context.parameters.Font.raw;
+		};
+		this._notifyOutputChanged = notifyOutputChanged;
+		//this.button.addEventListener("click", (event) => { this._value = this._value + 1; this._notifyOutputChanged();});
+		this.button.addEventListener("click", this.onButtonClick.bind(this));
+		// Adding the label and button created to the container DIV.
+		this.button.style.width = container.style.width;
+		if(context.parameters.ButtonHeight.raw)
+		{
+			this.button.style.height = context.parameters.ButtonHeight.raw + "px";
+		};
+
+		container.id = "containerid";
+		container.appendChild(this.button);
+	}
+
+
+	/**
+	 * 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
+		if(context.parameters.dataToExport.raw)
+		{
+			this.printable = context.parameters.dataToExport.raw;
+		};
+		if( context.parameters.FileName.raw)
+		{
+		this.filename = context.parameters.FileName.raw+".xlsx";
+		};
+		if(context.parameters.ButtonText.raw)
+		{
+			this.button.innerHTML = context.parameters.ButtonText.raw;
+		};
+		if(context.parameters.BackgroundColor.raw){
+			this.button.style.backgroundColor = context.parameters.BackgroundColor.raw;
+		}; 
+		if(context.parameters.TextColor.raw)
+		{
+			this.button.style.color = context.parameters.TextColor.raw;
+		};
+		if(context.parameters.TextSize.raw)
+		{
+			this.button.style.fontSize = context.parameters.TextSize.raw;
+		};
+		if(context.parameters.Font.raw)
+		{
+			this.button.style.fontFamily = context.parameters.Font.raw;
+		};
+		if(context.parameters.ButtonHeight.raw)
+		{
+			this.button.style.height = context.parameters.ButtonHeight.raw + "px";
+		};
+	}
+
+	private onButtonClick(event: Event): void {
+		var testss = JSON.parse(this.printable);
+		const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(testss);
+    	const workbook: XLSX.WorkBook = {Sheets: {'data': worksheet}, SheetNames: ['data']};
+    	XLSX.writeFile(workbook,this.filename);
+	}
+
+	/** 
+	 * 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 {};
+	}
+
+	/** 
+	 * 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
+	}
+}

exportexcel/exportexcel.pcfproj

@@ -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>exportexcel</Name>
+    <ProjectGuid>59381591-a23a-40d8-829a-187923b8f989</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="1.*"/>
+  </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>