SAP Fiori Elements - Save Variant/Layout not working (and want to remove unnecessary column)

[ABAPMarty]

I have created an SAP Fiori Elements app. At first the list report would not even let me resize the columns (and they were very badly spaced out) but eventually I discovered that it would let me resize columns if I change the table to "Grid Table".

I am having two issues on the list report page:

1. When I resize the columns it allows me to save the layout but when I refresh, the layout I saved disappears.

2. There is an empty column on the left of the table that the user does not want as it takes up much needed space.

Any advice on these issues would be really appreciated.

The empty column on the left needs to be removed:

This is what I do to save the layout:

The new layout is saved:

But when I click on the drop down arrow:

And when I refresh, it is gone:

Additional information: I am working on an older SAP ECC system.

I implemented the annotations using a code-based backend implementation per this link

How to add annotations to an OData service using code based implementation 

And that looks like this:

Which means every time someone gives me a reference XML annotation I have to translate it into the code above. Then I have to clear all the caches on the GW server, re-load the metadata and then go into the app and refresh and save the metadata there too. Then run the app. This is time consuming and when it does work I don't know *why* it does not work. This makes it VERY difficult to move forward.

I am boxed into a corner - I can't save the layout of the table and I can't set the width of the columns which means that the app is not usable.

I tried doing one of the annotations on the frontend as per the suggestion below but it overwrote all my backend annotations not just the one I implemented (and it did not work). So that does not seem to be an option.

[Joel_John]

It should look something like this, where Property is the column

<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataField">
    <PropertyValue Property="Value" Path="Property" />
    <PropertyValue Property="Label" String="Property name" />
        <Annotation Term="com.sap.vocabularies.HTML5.v1.CssDefaults">
            <Record>
                <PropertyValue Property="width" String="8rem" />
            </Record>
        </Annotation>
</Record>
<Record Type="UI.DataField">
    <PropertyValue Property="Value" Path="Property2" />
    <PropertyValue Property="Label" String="Property2 name" />
</Record>
...
...
...
</Collection>
</Annotation>

[ABAPMarty]

Thanks Joel. I have my annotations on the backend with a code based implementation. Can I just add the "UI.DataField" annotation in the frontend for that property and have it overwrite the width? I will give it a try anyway but not sure.

[ABAPMarty]

My metadata file looks like this:

<Annotation Term="UI.LineItem"> <Collection> <Record Type="UI.DataField"> <PropertyValue Property="Label" String="Agent"/> <PropertyValue Property="Value" Path="SalesAgent"/> <Annotation Term="com.sap.vocabularies.HTML5.v1.CssDefaults"> <Record> <PropertyValue Property="width" String="8rem"/> </Record> </Annotation> </Record>

But it does not work. I get an error on "com.sap.vocabularies.HTML5.v1.CssDefaults" "Unknown Vocabulary. Do you mean 'com.sap.vocabularies.HTML5.v1' namespace? annotation-service(no-undefined-namespace)"

[ABAPMarty]

wow the "commenting" feature here really sucks.

[ABAPMarty]

When I substitute the recommended path I get: "Unknown Vocabulary. Do you mean 'com.sap.vocabularies.HTML5.v1' namespace? annotation-service(no-undefined-namespace)"

[Joel_John]

HTML5.v1.CssDefaults are a UI only annotation. They need an annotation.xml file to be applicable.

[Joel_John]

You can use a local annotation.xml file to control the column width and the sequence of the columns. A simple way is to generate this is to use the Guided Development on BAS. 
Use the "Add and edit table columns" guide to add/select the columns that you want to display, in the order you want them.

You can also add the following inside the UI.DataField annotation to control columns widths.

<Annotation Term="com.sap.vocabularies.HTML5.v1.CssDefaults"> 
  <Record>
    <PropertyValue Property="width" String="8rem" />
  </Record>
</Annotation> 

 To save the variants, the following ICF nodes should be activated. 

• /SAP/BC/UI5_UI5

• /SAP/BC/LREP

[ABAPMarty]

Thanks I will check this. I tried the "width" annotation and it did not work but maybe I did not implement it correctly I will try it again.

[ABAPMarty]

Hi Joel, I activated the UI5 ICF node (LREP was already active) but unfortunately it has made no difference to the ability of my app to save the layout/variant.