Power Platform Community Forum Thread Details

Hello Everyone,

I want to make a component by code in PowerApps Component Framework, which could export the datas of the datatable to Excel.

But I don't know how to export a file in getOutputs method. Could you give me some advice?

Here is my sample code.

/**
	 * 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 {
		var currentUserMail= null;
			$.ajax({
				method: "POST",
				url: "https://formsrecognizerpcf.cognitiveservices.azure.com/formrecognizer/v1.0-preview/custom/train?mail="+currentUserMail,
				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 {};
}

Hi @Qing ,

Do you want to export a file in getOutputs method within the .ts file?

If you want to export a file in getOutputs method within the .ts file, I afraid that there is no way to achieve your needs in PowerApps currently.

The getOutputs method within the .ts file is required to provide an object as a return result. Please check the following article for more details:

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/control/getoutputs

Based on the needs that you mentioned, I think you still could achieve your needs wthin the onExportButtonClick function/method within your .ts file. Please check and see if the following article would help in your scenario:

https://stackoverflow.com/questions/16670209/download-excel-file-via-ajax-mvc

Best regards,