Power Platform Community Forum Thread Details

I am building a PCF Control to export a Collection in PowerApp Canvas to an Excel File.
I use react framework to make the filed template control. The problem is whenever I try to assign data from Props to a variable or const, I always get the error:
[1:45:35 PM] [start] Running

import * as React from 'react';
import { MenuButtonProps } from '@fluentui/react-components';
import {
  SplitButton,
  Menu,
  MenuList,
  MenuItem,
  MenuPopover,
  MenuTrigger,
  FluentProvider,
  webLightTheme
} from '@fluentui/react-components';
// import * as ExcelJS from "exceljs";
// import { saveAs } from "file-saver";


export interface IExportTimeSheetProps {
  data: string;
  format: string | null;
  fileName: string | null;
  label: string | null;
}

export const ExportTimeSheetComponent: React.FC<IExportTimeSheetProps> = ({ data, format, fileName, label }) => {
  const GetData = () => {
    return data;
  };

  const HandleExport = (format1: string) => {
    const exportableData = GetData();
    console.log(exportableData);
    let items: Object[] = [];
    items = JSON.parse(exportableData);
    console.log(items[0]);
    if (!exportableData || exportableData.length === 0) {
      alert("Không có dữ liệu để xuất");
      return;
    }
    console.log(`Exporting as ${format1}`);
  };

  return (
    <FluentProvider theme={webLightTheme}>
      <Menu positioning="below-end">
        <MenuTrigger disableButtonEnhancement>
          {(triggerProps: MenuButtonProps) => (
            <SplitButton
              menuButton={triggerProps}
              primaryActionButton={{
                onClick: () => HandleExport("xlsx")
              }}
            >
              Export as Excel
            </SplitButton>
          )}
        </MenuTrigger>
        <MenuPopover>
          <MenuList>
            <MenuItem onClick={() => HandleExport("xlsx")}>
              Export as Excel
            </MenuItem>
            <MenuItem onClick={() => HandleExport("csv")}>
              Export as CSV
            </MenuItem>
          </MenuList>
        </MenuPopover>
      </Menu>
    </FluentProvider>
  );
};

ExportTimeSheetComponent.displayName = 'ExportTimeSheetComponent';

Anyone can help?

Categories:

Power Apps Pro Dev & ISV