无OData注解时修改SAPUI5 Smart Table列名与属性

Hey there! Since your OData service doesn't include any annotations, the Smart Table will default to using raw field names as column headers. But don't worry—there are two straightforward ways to get those friendly, spaced headers you want:

方法1：手动定义Smart Table的列 #

If you want full control over each column's header and content template, you can explicitly define the columns inside the Smart Table. This overrides the auto-generated columns from the OData metadata.

Here's how your XML view would look:

<smartTable:SmartTable 
  id="smartTable" 
  entitySet="YourEntitySet" 
  tableType="Table"
  useExportToExcel="true" 
  enableAutoBinding="true">
  <Table>
    <columns>
      <!-- Priority Name column -->
      <Column>
        <header>
          <Text text="Priority Name"/>
        </header>
        <template>
          <Text text="{PriorityName}"/>
        </template>
      </Column>
      <!-- Order Type column -->
      <Column>
        <header>
          <Text text="Order Type"/>
        </header>
        <template>
          <Text text="{OrderTypeType}"/>
        </template>
      </Column>
      <!-- Order Type Name column -->
      <Column>
        <header>
          <Text text="Order Type Name"/>
        </header>
        <template>
          <Text text="{OrderTypeName}"/>
        </template>
      </Column>
      <!-- Id column -->
      <Column>
        <header>
          <Text text="Id"/>
        </header>
        <template>
          <Text text="{Id}"/>
        </template>
      </Column>
      <!-- Date Open column -->
      <Column>
        <header>
          <Text text="Date Open"/>
        </header>
        <template>
          <Text text="{DateOpen}"/>
        </template>
      </Column>
      <!-- Hour Open column -->
      <Column>
        <header>
          <Text text="Hour Open"/>
        </header>
        <template>
          <Text text="{HourOpen}"/>
        </template>
      </Column>
      <!-- Brand Name column -->
      <Column>
        <header>
          <Text text="Brand Name"/>
        </header>
        <template>
          <Text text="{BrandName}"/>
        </template>
      </Column>
      <!-- Equipment Id column -->
      <Column>
        <header>
          <Text text="Equipment Id"/>
        </header>
        <template>
          <Text text="{EquipmentId}"/>
        </template>
      </Column>
      <!-- Equipment Number column -->
      <Column>
        <header>
          <Text text="Equipment Number"/>
        </header>
        <template>
          <Text text="{EquipmentNumber}"/>
        </template>
      </Column>
      <!-- Symptom Name column -->
      <Column>
        <header>
          <Text text="Symptom Name"/>
        </header>
        <template>
          <Text text="{SymptomName}"/>
        </template>
      </Column>
    </columns>
  </Table>
</smartTable:SmartTable>

Just replace YourEntitySet with the actual entity set name from your OData service. This approach lets you customize not just headers, but also the content of each cell (like adding date formatters or icons if needed).

方法2：补充本地注解模型 #

If you prefer to keep the Smart Table's auto-generation capabilities but just need to fix the headers, you can create a local annotation file to add missing Label annotations to your fields.

Step 1: Create a local annotation JSON file #

Make a file named localAnnotations.json in your project with this content:

{
  "$Version": "4.0",
  "$Reference": {
    "YourODataServiceAlias": {
      "$Uri": "/your/odata/service/url/$metadata"
    }
  },
  "Annotations": [
    {
      "$Target": "YourODataServiceAlias.YourEntityType/PriorityName",
      "com.sap.vocabularies.Common.v1.Label": "Priority Name"
    },
    {
      "$Target": "YourODataServiceAlias.YourEntityType/OrderTypeType",
      "com.sap.vocabularies.Common.v1.Label": "Order Type"
    },
    {
      "$Target": "YourODataServiceAlias.YourEntityType/OrderTypeName",
      "com.sap.vocabularies.Common.v1.Label": "Order Type Name"
    },
    {
      "$Target": "YourODataServiceAlias.YourEntityType/Id",
      "com.sap.vocabularies.Common.v1.Label": "Id"
    },
    {
      "$Target": "YourODataServiceAlias.YourEntityType/DateOpen",
      "com.sap.vocabularies.Common.v1.Label": "Date Open"
    },
    {
      "$Target": "YourODataServiceAlias.YourEntityType/HourOpen",
      "com.sap.vocabularies.Common.v1.Label": "Hour Open"
    },
    {
      "$Target": "YourODataServiceAlias.YourEntityType/BrandName",
      "com.sap.vocabularies.Common.v1.Label": "Brand Name"
    },
    {
      "$Target": "YourODataServiceAlias.YourEntityType/EquipmentId",
      "com.sap.vocabularies.Common.v1.Label": "Equipment Id"
    },
    {
      "$Target": "YourODataServiceAlias.YourEntityType/EquipmentNumber",
      "com.sap.vocabularies.Common.v1.Label": "Equipment Number"
    },
    {
      "$Target": "YourODataServiceAlias.YourEntityType/SymptomName",
      "com.sap.vocabularies.Common.v1.Label": "Symptom Name"
    }
  ]
}

Replace YourODataServiceAlias, YourEntityType, and the OData service URL with your actual values.

Step 2: Load the annotation model in your Component.js #

Add this code to your Component.js init method to bind the local annotations to your OData model:

init: function() {
  // Initialize your OData model first
  const oODataModel = new sap.ui.model.odata.v2.ODataModel("/your/odata/service/url", {
    useBatch: true
  });
  this.setModel(oODataModel);

  // Load the local annotation model
  const oAnnotationModel = new sap.ui.model.json.JSONModel();
  oAnnotationModel.loadData("localAnnotations.json");
  // Attach the annotation model to the OData model
  oODataModel.setAnnotationModel(oAnnotationModel);
}

Step 3: Update your Smart Table #

Now you can use the Smart Table with auto-generated columns, and it will pick up your custom labels:

<smartTable:SmartTable 
  id="smartTable" 
  entitySet="YourEntitySet" 
  tableType="Table"
  useExportToExcel="true" 
  enableAutoBinding="true"
  initiallyVisibleFields="PriorityName,OrderTypeType,OrderTypeName,Id,DateOpen,HourOpen,BrandName,EquipmentId,EquipmentNumber,SymptomName"/>

The initiallyVisibleFields property lets you specify which fields to display and their order.

内容的提问来源于stack exchange，提问作者Marcos mpguchii Posser