Fiori Elements : Display a Table and field group vertically in object page section

[Dipankar]

I have a requirement where I need to display a table and 2 field group facets vertically in a object page section.

I have added the line item ref. facet and fieldgrp facet inside a collection facet to display but it comes side by side.

Also please let me know how to handle the update incase of custom section?

[dlwbolintoa]

I came across this while looking for a solution for the same problem. As mentioned in the documentation, second level references will appear next to each other (side-by-side) so that is really the standard. But to get around that, here's how I did it just in case anyone is encounters the same problem. 

Disclaimer: I'm not sure if this goes against the Fiori Design Guidelines since I remember reading way back that using a custom CSS is discouraged. Anyway:

1. Put your Reference Facets under separate Collection Facets. Following code is a CDS annotation:

@ui.facet: [
  {
    id: 'ThisIsYourSection',
    type: #COLLECTION,
    label: 'Section'
  },
  {
    id: 'ThisIsYourFieldGroupContainer',
    parentId: 'ThisIsYourSection',
    type: #COLLECTION,
    label: 'Field Group Container',
    position: 10
  },
  {
    id: 'ThisIsYourFieldGroup',
    parentId: 'ThisIsYourFieldGroupContainer',
    purpose: #STANDARD,
    type: #FIELDGROUP_REFERENCE,
    label: 'Field Group',
    targetQualifier: 'IfYouNeedAQualifier',
    position: 10
  },
  {
    id: 'ThisIsYourTableContainer',
    parentId: 'ThisIsYourSection',
    type: #COLLECTION,
    label: '', //note on the blank label, this can be omitted as well
    position: 20 //so that it appears after the field group sub section
  },
  {
    id: 'ThisIsYourTable',
    parentId: 'ThisIsYourTableContainer',
    purpose: #STANDARD,
    type: #LINEITEM_REFERENCE,
    label: 'Table',
    targetElement: '_YourAssociation',
    position: 10
  }
]

Note that the Object Page subsection menu will show a blank item in there due to the blank label from the annotation:

If you don't want that blank area, you will need a custom CSS file in your project. As of this writing, the following CSS classes will target this menu. Note however that this is based on browser compatibility and may not work on older browsers. In the custom CSS file, include the following snippet:

.sapUiMnuItm:has(.sapUiMnuItmTxt:empty) {
    display: none !important; /* hide blank subsection menus if possible */
}

[sandeep_rs]

Hi,

It should already come one below the other if the table is defined so that there are no other "peer" ReferenceFacets i.e. there is only the table within the CollectionFacet that encloses the LineItem corresponding to the table. This is also the recommended way as mentioned in the very beginning part of the V4 specific documentation in link.

Best Regards,

Sandeep