cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Qing
Level: Powered On

How to export file by PowerApps component framework

Hello Everybody, I have already found from API document. There has no function which could export csv or excel file to the page on the PowerApps component framework. Could you give me some ideas or sample codes ?
3 REPLIES 3
Community Support Team
Community Support Team

Re: How to export file by PowerApps component framework

Hi @Qing ,

Could you describe more clearly about what do you want?

Which one do you want

1)connect Excel with PowerApps?

2)import Excel to PowerApps?

3)import Excel/csv to CDS?

 

1)If you want to connect Excel with PowerApps, you need to upload your excel to one drive firstly.

And then, in the View pane, choose dat source, choose one drive, choose the file that you want to connect with.1028.PNG

After you connect with this file successfully, you could use its data in PowerApps.

 

2)If you want to import Excel to PowerApps, you just need to choose "import from Excel" in data source.10281.PNG

Then, you could display data of excel in PowerApps.

Please note that, in this situation, this is static data(read-only), you could only display data, can not update data.

 

3)If you want to import Excel/csv to CDS, you could choose "get data" in cds.10282.PNG

In the selection pane, you could choose excel or csv.10283.PNG

After you import data to CDS successfully, you could connect with this data in PowerApps by choosing related entity of CDS.

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
PowerApps Staff HemantG
PowerApps Staff

Re: How to export file by PowerApps component framework


@Qing wrote:
Hello Everybody, I have already found from API document. There has no function which could export csv or excel file to the page on the PowerApps component framework. Could you give me some ideas or sample codes ?

What are you trying to do ? render the data from excel in the PCF component ? Is this for canvas app, we do not have data set support yet in canvas apps but once it is added (coming soon) you can set the excel as data source. 

 

Hemant 

Qing
Level: Powered On

Re: How to export file by PowerApps component framework

@v-yutliu-msft @HemantG 

Thank you for your reply.

I want to create a component to export the data of the datatable component via PowerApps component framework .

Here is my custom code. But I don't know how to export a file in  getOutputs  method.

Could you give me some sample code?

 

import { IInputs, IOutputs } from "./generated/ManifestTypes";

export class ExportExcelComponent implements ComponentFramework.StandardControl<IInputs, IOutputs> {
	// PCF framework context, "Input Properties" containing the parameters, control metadata and interface functions.
	private _context: ComponentFramework.Context<IInputs>;

	// PCF framework delegate which will be assigned to this object which would be called whenever any update happens. 
	private _notifyOutputChanged: () => void;

	// Control's container
	private controlContainer: HTMLDivElement;

	// button element created as part of this control
	private exportButton: HTMLButtonElement;

	// label element created as part of this control
	private errorLabelElement: HTMLLabelElement;
	/**
	 * 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._context = context;
		this._notifyOutputChanged = notifyOutputChanged;
		this.controlContainer = document.createElement("div");

		//Create an upload button to call the forms recognizer api
		this.exportButton = document.createElement("button");

		// Get the localized string from localized string 
		this.exportButton.innerHTML = context.resources.getString("PCF_FormsRecognizerControl_Recognize_ButtonLabel");
		this.exportButton.addEventListener("click", this.onExportButtonClick.bind(this));

		// Create an error label element
		this.errorLabelElement = document.createElement("label");
		this.errorLabelElement.setAttribute("id", "lblError");

		// Adding the label and button created to the container DIV.
		this.controlContainer.appendChild(this.exportButton);
		this.controlContainer.appendChild(this.errorLabelElement);
		container.appendChild(this.controlContainer);
	}

	/**
	* This button event handler will allow the user to pick the file from the device
	* Export the results searched by end-user to excel file
	* @param event click event
	*/
	private onExportButtonClick(event: Event): void {
			$.ajax({
				method: "POST",
				url: "https://formsrecognizerpcf.cognitiveservices.azure.com/formrecognizer/v1.0-preview/custom/train",
				data: "",
				beforeSend: function(xhr) {
					xhr.setRequestHeader("Ocp-Apim-Subscription-Key", "dc2e05751ac1505b");
					xhr.setRequestHeader("Content-Type", "application/json");
				}
			});		
	}
	/**
	 * 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
}

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

 

  

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 148 members 5,374 guests
Please welcome our newest community members: