Search code examples
uitableviewexportsapui5

Download table to spreadsheet


I have a sap.m.Table created. I need to download it to excel. For that I have followed this sample. Yet the file, although exported, it only contains the titles of each column, rows seem to be kind of known by the file but cells are empty (check image below).

enter image description here

In my controller I have the following:

        onExport : function () {
        var oTable = this.getView().byId("lineItemsList"),
            oRowBinding, aCols, oSettings, oSheet;
            
        oRowBinding = oTable.getBinding("items");
        aCols = this.createColumnConfig();
        
        oSettings = {
            workbook: {
                columns: aCols
                //hierarchyLevel: 'Level'
            },
            dataSource: oRowBinding,
            fileName: "WBS Elements.xlsx"
            //worker: false // We need to disable worker because we are using a MockServer as OData Service
        };

        oSheet = new Spreadsheet(oSettings);
        oSheet.build().finally(function() {
            oSheet.destroy();
        });

    },

Then the Column Config in controller:

        createColumnConfig: function() {
        var aCols = [];

        aCols.push({
            //label: 'Nivel',
            property: "Level",
            type: EdmType.String,
        });

        aCols.push({
            label: "WBS Element",
            property: "WBS Element",
            type: EdmType.String,
        });

        aCols.push({
            property: "Description",
            type: EdmType.String
        });

        aCols.push({
            property: "Basic Start",
            type: EdmType.Date
        });

        aCols.push({
            property: "Basic Finish",
            type: EdmType.Date
        });

        aCols.push({
            property: "Actual Start",
            type: EdmType.Date,
        });

        aCols.push({
            property: "Actual Finish",
            type: EdmType.Date
        });

        aCols.push({
            property: "Plan PoC%",
            type: EdmType.Number
        });
        
        aCols.push({
            property: "Act PoC%",
            type: EdmType.Number
        });
        
        aCols.push({
            property: "Plan Cost",
            type: EdmType.Number
        });

        aCols.push({
            property: "Actual Cost",
            type: EdmType.Number
        });
        
        aCols.push({
            property: "Budget",
            type: EdmType.Number
        });
        
        aCols.push({
            property: "Curr. Year Budget",
            type: EdmType.Number
        });
        
        aCols.push({
            property: "Status",
            type: EdmType.String
        });
        
        aCols.push({
            property: "Currency",
            type: EdmType.String
        });
        return aCols;
    }

And last, the table definition in XML View (took away toolbar definition and other stuff so to focus on relevant):

        <semantic:content>
        <Table
            id="lineItemsList"
            width="auto"
            items="{
                path: '/ItProjWbsSet',
                sorter: {
                    path: 'Pspid',
                    descending: false
                }
            }"              
            mode="MultiSelect"
            updateFinished=".onUpdateFinished"
            selectionChange="onSelectionChange"
            noDataText="{i18n>detailLineItemTableNoDataText}"
            busyIndicatorDelay="{detailView>/delay}">               
            <columns>
                <Column demandPopin="false" minScreenWidth="Phone">
                     <Text text="Level"/>
                </Column>
                <Column demandPopin="false" width="12em"  minScreenWidth="Phone">
                     <Text text="WBS Element"/>
                </Column>
                <Column demandPopin="false"  minScreenWidth="Tablet" visible="{= !${device>/system/phone}}">
                     <Text text="Basic Start"/>
                </Column>
                <Column demandPopin="false"  minScreenWidth="Tablet" visible="{= !${device>/system/phone}}">
                     <Text text="Basic Finish"/>
                </Column>   
                <Column demandPopin="false"  minScreenWidth="Tablet" visible="{= !${device>/system/phone}}">
                     <Text text="Actual Start"/>
                </Column>
                <Column demandPopin="false"   minScreenWidth="Tablet" visible="{= !${device>/system/phone}}">
                     <Text text="Actual Finish"/>
                </Column>   
                <Column demandPopin="false"   minScreenWidth="Phone" visible="{= !${device>/system/phone}}">
                     <Text text="Plan PoC%"/>
                </Column>
                <Column demandPopin="false"   minScreenWidth="Phone" visible="{= !${device>/system/phone}}">
                     <Text text="Actual PoC%"/>
                </Column>   
                <Column demandPopin="false"   minScreenWidth="Tablet" visible="{= !${device>/system/phone}}">
                     <Text text="Plan Cost"/>
                </Column>
                <Column demandPopin="false"   minScreenWidth="Tablet" visible="{= !${device>/system/phone}}">
                     <Text text="Act.Cost"/>
                </Column>                   
                <Column demandPopin="false"   minScreenWidth="Tablet" visible="{= !${device>/system/phone}}">
                     <Text text="Budget"/>
                </Column>
                <Column demandPopin="false"   minScreenWidth="Tablet" visible="{= !${device>/system/phone}}">
                     <Text text="Curr.Year Budget"/>
                </Column>
                <Column demandPopin="false"   minScreenWidth="Tablet" visible="{= !${device>/system/phone}}">
                     <Text text="Status"/>
                </Column>   
            </columns>
            <items>
                <ColumnListItem id="listLayout">
                    <cells>
                        <Text text="{Stufe}"/>
                        <ObjectIdentifier
                            title="{Pspid}"
                            text="{Post1}"/>
                        <Text text="{path : 'Pstrt', 
                                     type : 'sap.ui.model.type.Date',
                                     formatOptions: { style : 'short'}}"/>
                        <Text text="{path : 'Pende', 
                                     type : 'sap.ui.model.type.Date',
                                     formatOptions: { style : 'short'}}"/>
                        <Text text="{path : 'Istrt', 
                                     type : 'sap.ui.model.type.Date',
                                     formatOptions: { style : 'short'}}"/>
                        <Text text="{path : 'Iende', 
                                     type : 'sap.ui.model.type.Date',
                                     formatOptions: { style : 'short'}}"/>
                        <ObjectNumber
                            number="{
                                parts:[{path:'PlanCost'},{path:'CurrKey'}],
                                type: 'sap.ui.model.type.Currency',
                                formatOptions: {showMeasure: false}
                            }"
                            unit="{CurrKey}" />
                        <ObjectNumber
                            number="{
                                parts:[{path:'ActualCost'},{path:'CurrKey'}],
                                type: 'sap.ui.model.type.Currency',
                                formatOptions: {showMeasure: false}
                            }"
                            unit="{CurrKey}" />
                        <ObjectNumber
                            number="{
                                parts:[{path:'Budget'},{path:'CurrKey'}],
                                type: 'sap.ui.model.type.Currency',
                                formatOptions: {showMeasure: false}
                            }"
                            unit="{CurrKey}" />
                        <ObjectNumber
                            number="{
                                parts:[{path:'CurrYrBud'},{path:'CurrKey'}],
                                type: 'sap.ui.model.type.Currency',
                                formatOptions: {showMeasure: false}
                            }"
                            unit="{CurrKey}" />
                        <Text text="{Status}"/>                             
                    </cells>                        
                </ColumnListItem>
            </items>
        </Table>
    </semantic:content>

Solution

  • You need to use as property name the exact same string as it is called in your viewModel/oData service.

    aCols.push({
        label: "Actual Cost"
        property: "ActualCost", // Needs to be property name
        type: EdmType.Number
    });
    

    For the budget it already matched and therefore a '0' was shown in the excel.