SAP UI5 - Fiori Element List Report - issue when more than 8 columns

[luc_olivier2]

Hello Experts,

For a customer project, we are using SCP with SAP Web IDE and OData coming from the XS Engine (without annotations).

We created a project using a Fiori Element ListReport Template connected to an Entity of the XS Engine OData.

We can connect, get the metadata and finish the Template. But when we run the project, above 8 columns in List, the other columns are displayed below the others and not next to them. We added a local annotation file, it is ok for text translation but not improving the display.

Here with 13 columns (strange layout)

Here with 8 columns (everything is fine)

If we change the type of Table to GridTable in the Manifest.json, it is better but no more responsive.

Did we miss something ?

Other small bonus question, how to add a tool tip (QuickInfo annotation) on the data of the Table ?

Thanks for any help,

Luc

[former_member182874 · Accepted solution]

Hi Olivier,

In Fiori list report , this is a default behavior. As the name says responsive table, the table will adjust with screen size, hence the data after 8 columns is shown below the first column. Actually there is no restriction of 8 columns, even if 4 columns are wide enough, it shows 4 in same line and rest wrapped up below the first. Reason being, on smartphone you can only see 1 column with all the data, and scrollable on smartphone will be weird when user has 20 columns.

Best way to show the data is using Grid Table which you already tried out. Grid table/ Analytical can work fine with tablet and desktop, but not smartphones. This is a default behavior of Grid.

For annotating the data field, you can go to annotation modeler in your webide project. If you use CDS it comes by default, but if you are using only Odata, you have to create a annotations folder and manually add : UI.Lineitem -> DataFieldWithIntentBasedNavigation , here you can pass the target app navigation details, like Semantic Object and Action (Semantic object can be created in tcode : /UI2/SEMOBJ). Action can be any user specfic name which shows your app quality, like display, create, update, open.

Hope I answered all your queries.

Regards,

Tejas

[Jocelyn_Dart]

Hi Luc,

You can use the UI Annotation IMPORTANCE (HIGH, MEDIUM or LOW), e.g. assign a data field to UI.lineitem.importance: LOW, to control which fields are demoted to the additional line for smaller screens. You can set this in the CDS View Metadata Extension or Local Annotation. See Prioritizing UI Elements.

And you can use the Web IDE UI Adaptation Editor to adjust the width of the columns in Smart Tables (as well as other things... as explained in Fiori elements export to excel via the UI Adaptation Editor )

Rgds

Jocelyn

[luc_olivier2]

Thanks, yes still of interest but the BIG problem as I told at the beginning is that we were using XS Engine Hana OData (xsjs) and it was not possible to add annotations.

Since, we scraped the Fiori Element as not relevant for us.

Luc

[luc_olivier2]

Hello all,

Sorry for the delay and thanks a lot for your help.

We tried the "importance" annotation but it was not helping so much on a normal PC screen.

At the end, we agreed with the customer which columns to display to stay on the same row and we put everything else is in the Object Detail Page.... More logical btw!

Now, another question on the same topic. Is it a local annotation or manifest.json parameter to hide the Search field ?

The Smart Filter Fields are working fine but not the Search and as the metadata file of XS Engine doesn't take sap:searchable="false"

Thanks again for any help.

Luc

[ThomasMundt]

I do not know if this is still of interest, but you should to set "searchable" on the Entity on your backend system.

[luc_olivier2]

Hello Jocelyn,

Thanks a lot also for your answer.

Can you give me an example of annotation for the QuickInfo ?

We tried with the SAPUI5 Visual Editor but we were not able to make it work 😞

We tried to adjust the Width property of the columns we created by annotation but ne result.

Should it be a % or rem or px value ?

Regards,

Luc

[nabheetscn]

If check the help you will the sample code for Priortizing UI element, adding here for reference. I think the other suggestion of UI adaptation editor makes more sense for you. Read the blog and you can adjust the width of the columns.

...
define view ZExample_SalesOrder as select from sepm_cds_sales_order as so {
  @UI.identification: [ { position: 10, importance: #HIGH } ]
  key so.sales_order_id as SalesOrder,
  
  @UI.identification: [ { position: 20, importance: #MEDIUM } ]
  so.customer.company_name as CompanyName,
  
  @UI.identification: [ { position: 30, importance: #LOW } ]
  so.currency_code as CurrencyCode, 
  
  @UI.identification: [ { position: 40 } ]
  so.gross_amount as GrossAmount


  ...
}
 

[luc_olivier2]

Hello Tejas,

Thanks a lot for your answer, it is very clear !

You think there is no way to "force" the size of some columns to fit the screen ?

I will speak with the customer to know if they prefer less columns or not responsive... Not a choice very Fiori 🙂

For the annotation, we did like you are explaining and it is working fine for the column names and adding Filter fields but not for the tool tips (QuickInfo).

Here is what I put and it is not working.

<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="TRANID"/>
<PropertyValue Property="Label" String="{@i18n>TRANSACTION_ID}"/>
<Annotation Term="Common.QuickInfo" Path="TRANID"/>
</Record>

Surely I missed something !

Thanks again,

Luc