sap.f.SemanticPage: adding more than 1 content control fails

I am trying to get three panels to show on my object page but for some reason it shows only the last panel like it is shown on the screenshot:

The Object.view.xml looks like the following:

<mvc:View controllerName="ns.mngportfolios.controller.Object" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.f.semantic" xmlns:form="sap.ui.layout.form">

  <semantic:SemanticPage id="page" headerPinnable="false" toggleHeaderOnTitleClick="false" busy="{objectView>/busy}" busyIndicatorDelay="{objectView>/delay}">

    <semantic:titleHeading>
      <Title text="{PORTFOLIO_NUMBER}" level="H2" responsive="true" />
    </semantic:titleHeading>

    <semantic:headerContent>
      <ObjectNumber number="{
                        path: 'EBITDA',
                        formatter: '.formatter.numberUnit'
                    }" />
      <ObjectAttribute text="{COMPANY_NAME}" />
    </semantic:headerContent>

    <Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>portfolioTitle}" expandable="{device>/system/phone}" expanded="true">
      <content>
        <form:SimpleForm id="objectForm">
          <form:content>
            <Label text="{i18n>portfolioSharesLabel}" />
            <Text text="{PORTFOLIO_SHARES}" />
            <Label text="{i18n>portfolioNameLabel}" />
            <Text text="{PORTFOLIO_NAME}" />
            <Label text="{i18n>portfolioDepreciationLabel}" />
            <Text text="{= ${DEPRECIATION} + ' ' + 'EUR'}" />
          </form:content>
        </form:SimpleForm>
      </content>
    </Panel>

    <Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>yearTitle}" expandable="{device>/system/phone}" expanded="false">
      <content>
        <List id="companyList">
          <items>
            <StandardListItem icon="sap-icon://building" title="Building1" />
            <StandardListItem icon="sap-icon://email" title="[email protected]" />
            <StandardListItem icon="sap-icon://world" title="google.com" />
            <StandardListItem icon="sap-icon://phone" title="+00123456789" />
            <StandardListItem icon="sap-icon://map" title="23 Wall st, 10005 NY" />
          </items>
        </List>
      </content>
    </Panel>

    <Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>mapTitle}">
      <Image src="{
                        parts: [
                            '23 Wall St',
                            '10005',
                            'New York',
                            'United States'
                        ],
                        formatter: '.formatter.formatMapUrl'
                    }" />
    </Panel>

    <semantic:sendEmailAction>
      <semantic:SendEmailAction id="shareEmail" press=".onShareEmailPress" />
    </semantic:sendEmailAction>


  </semantic:SemanticPage>

</mvc:View>

Can someone help me to identify the missing piece here?

Solution

"content" aggregation of sap.f.semantic.SemanticPage has a Cardinality of 0..1. This means we can add a maximum of one child control. To accomplish the task of displaying 3 panels, try embedding all three panels inside a container. A few examples of containers which could be used can be found in samples page under the category containers and layouts.

To provide an example :-

<mvc:View controllerName="ns.mngportfolios.controller.Object" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.f.semantic" xmlns:form="sap.ui.layout.form">
  <semantic:SemanticPage id="page" headerPinnable="false" toggleHeaderOnTitleClick="false" busy="{objectView>/busy}" busyIndicatorDelay="{objectView>/delay}">
    <semantic:titleHeading>
      <Title text="{PORTFOLIO_NUMBER}" level="H2" responsive="true" />
    </semantic:titleHeading>
    <semantic:headerContent>
      <ObjectNumber number="{
                        path: 'EBITDA',
                        formatter: '.formatter.numberUnit'
                    }" />
      <ObjectAttribute text="{COMPANY_NAME}" />
    </semantic:headerContent>
    <VBox>
    <items>
    <Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>portfolioTitle}" expandable="{device>/system/phone}" expanded="true">
      <content>
        <form:SimpleForm id="objectForm">
          <form:content>
            <Label text="{i18n>portfolioSharesLabel}" />
            <Text text="{PORTFOLIO_SHARES}" />
            <Label text="{i18n>portfolioNameLabel}" />
            <Text text="{PORTFOLIO_NAME}" />
            <Label text="{i18n>portfolioDepreciationLabel}" />
            <Text text="{= ${DEPRECIATION} + ' ' + 'EUR'}" />
          </form:content>
        </form:SimpleForm>
      </content>
    </Panel>

    <Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>yearTitle}" expandable="{device>/system/phone}" expanded="false">
      <content>
        <List id="companyList">
          <items>
            <StandardListItem icon="sap-icon://building" title="Building1" />
            <StandardListItem icon="sap-icon://email" title="[email protected]" />
            <StandardListItem icon="sap-icon://world" title="google.com" />
            <StandardListItem icon="sap-icon://phone" title="+00123456789" />
            <StandardListItem icon="sap-icon://map" title="23 Wall st, 10005 NY" />
          </items>
        </List>
      </content>
    </Panel>

    <Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>mapTitle}">
      <Image src="{
                        parts: [
                            '23 Wall St',
                            '10005',
                            'New York',
                            'United States'
                        ],
                        formatter: '.formatter.formatMapUrl'
                    }" />
    </Panel>
    </items>
    </VBox>
    
    <semantic:sendEmailAction>
      <semantic:SendEmailAction id="shareEmail" press=".onShareEmailPress" />
    </semantic:sendEmailAction>
  </semantic:SemanticPage>
</mvc:View>

Please choose the container control that best suits your layout demands.This is just an example.