setting-the-default-column-width-a765253.md

Setting the Default Column Width

You can customize the width of a column defined in a line item using the com.sap.vocabularies.HTML5.v1.CssDefaults UI annotation in SAP Fiori elements for OData V4.

SAP Fiori elements automatically calculates the default width of columns. The calculation algorithm takes into account numerous metadata parameters such as type, column label, referenced properties and text arrangement. Providing a more precise maxLength value for the String type or Precision value for numeric types can help this algorithm to produce better results. The lower limit is set to 3 rem and the upper limit is set to 20 rem.

The default width of columns containing different controls/UI elements is as follows:

---

Columns with Controls/UI Elements	Default Width
Images	5 rem
Rating indicator	6.875 rem
Progress indicator	6.875 rem
Charts	20 rem

• Using the CssDefaults annotation

  The sample code below shows how to set the column width using the com.sap.vocabularies.HTML5.v1.CssDefaults annotation.

  Sample Code:

  XML Annotation

  <Annotation Term="UI.LineItem">
      <Collection>
          <Record Type="UI.DataFieldWithIntentBasedNavigation">
              <PropertyValue Property="SemanticObject" String="EPMSalesOrder" />
              <PropertyValue Property="Action" String="display_sttabupa" />
              <PropertyValue Property="Value" Path="bp_id" />
                  <Annotation Term="com.sap.vocabularies.HTML5.v1.CssDefaults">
                      <Record>
                          <PropertyValue Property="width" String="10rem"/>
                      </Record>
                  </Annotation>
          </Record>
          <Record Type="UI.DataField">
              <PropertyValue Property="Value" Path="currency_code" />
                  <Annotation Term="com.sap.vocabularies.HTML5.v1.CssDefaults">
                      <Record>
                          <PropertyValue Property="width" String="15rem"/>
                      </Record>
                  </Annotation>
          </Record>
      </Collection>
  </Annotation>

  Sample Code:

  CAP CDS Annotation

  LineItem : {
  	{
  		$Type : 'UI.DataFieldForIntentBasedNavigation',
  		SemanticObject : 'EPMSalesOrder',
  		Action : 'display_sttabupa',
  		Value: 'bp_id',
  		Label : 'IBN',
  		![@HTML5.CssDefaults] : {width : '10rem'}
  	},
  	{
  		$Type : 'UI.DataField',
  		Value : currency_code,
  		![@HTML5.CssDefaults] : {width : '15rem'}
  	},
  }
  
  

• Using the manifest.json configuration

  You can also configure the width of a column in the manifest:

  Sample Code:

  manifest.json

  "controlConfiguration": {
      "_Item/@com.sap.vocabularies.UI.v1.LineItem": {
          "columns": {
              "DataField::SalesOrderItemCategory": {
                  "width": "10em"
              }
          }
      }
  }
  
  

  The column key ("DataField::SalesOrderItemCategory" in our sample code above) is used to identify the column for which you want to set the width.

Note:

• When the application is rendered in mobile phones, the table column width is adjusted automatically so that the displayed columns can occupy the complete available width.

• You can use em, rem, or % (relative to the table width) to specify the width of a column using a CssDefaults annotation or settings in the manifest.json.

More Information

For more information about how to find the right key for a column, see Finding the Right Key for the Anchor.

For information about custom columns on list report pages and object pages, see Extension Points for Tables.

Note:

For information about SAP Fiori elements for OData V2, see Setting the Default Column Width.