CAP Fiori Elements List Report table not full width

[Former Member]

Hi,

I have created a fiori elements list report using UI5 generator for my CAP application.

When testing the app with FLP sandbox the table spans only half the screen. Any ideas how to fix this?

Thanks in advance,

T

[rounak_roy · Accepted solution]

Hello Tim,

Kindly refer to the document.

You can use cssDefault annotation for each and every column to provide suitable width as per your requirement.

Regards,

Rounak

[Former Member · Accepted solution]

Hi Rounak,

I would expect that lists would extend full width by default. My app follows the instructions of this blog where also no additional annotations are used.

Your link points to SAP Jam to which I don't seem to have access to. It would be great if you could give an example here showing how to use the cssDefault in the context of an sap cap app (hopefully this is set in manifest.json list object settings as default behavior and not for each and every column :S ).

Best,

Tim

[rounak_roy]

Thanks Tim

[rounak_roy]

FE LROP/ALP applications with responsive tables columns can now have an appropriate default width(enableAutoColumnWidth=true). Additionally, the end-user gets an option to resize the column width by click and drag.

The default column width can be annotated with HTML5.v1.CssDefaults Annotation for each fields in Lineitem.

Example:

<Annotation Term="com.sap.vocabularies.HTML5.v1.CssDefaults">

<Record>

<PropertyValue Property="width" String="10rem" />

</Record>

</Annotation>

As a consequence of the above change, responsive tables with fewer columns might see a visible change of table not occupying complete available space. This is the expected behavior as per the Design concept.

However, this will not have any impact on the functional behavior. Tables with more columns may not observe visual change as they occupy the available section width.

Ex: Table with only 3 columns launched in big screen.

[Former Member]

Hi Rounak,

Figured out how to use the annotation in the cap context. Thanks for your help.

Posting the solution (2 screenshots) here for others. Needed to:

1. update the annotations.xml of the app (frontend) with the html5 namespace

2. add the annotation in annotations.cds (backend)

Best,

T