Show TOC

Step 6: Extending the Detail PageLocate this document in the navigation structure

In this step, we will extend the detail page of our app to show more information of a given product with various UI controls. We will enrich the header area and display further attributes in an info panel for information about the supplier.

Preview
Figure 1: Detail page with more product information
Coding

You can view and download all files in the Explored app in the Demo Kit under Worklist App - Step 6.

webapp/view/Object.view.xml

...
<mvc:View
   controllerName="myCompany.myApp.controller.Object"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns:semantic="sap.m.semantic"
   xmlns:form="sap.ui.layout.form"

   xmlns="sap.m">
   <semantic:FullscreenPage
      id="page"
      busy="{objectView>/busy}"
      busyIndicatorDelay="{objectView>/delay}"
      navButtonPress="onNavBack"
      showNavButton="true"
      title="{i18n>objectTitle}">
      <semantic:content>
         <ObjectHeader
            id="objectHeader"
            intro="{ProductID}"
            title="{ProductName}"
            numberUnit="PC"
            numberState="Success"

            number="{
               path: 'UnitsInStock',
               formatter: '.formatter.numberUnit'
            }">
            <attributes>
               <ObjectAttribute
                  title="{i18n>ObjectPriceTitle}"
                  text="{
                     path: 'UnitPrice',
                     formatter: '.formatter.numberUnit'
                  } EUR"/>
            </attributes>
            <statuses>
               <ObjectStatus
                  text="{i18n>ObjectDiscontinuedStatusText}"
                  state="Error"
                  visible="{path:'Discontinued'}"/>
            </statuses>
         </ObjectHeader>
         <Panel
            class="sapUiContentPadding"
            headerText="{i18n>ObjectSupplierTabTitle}">
             <content>
                <form:SimpleForm
                  minWidth="1024"
                  maxContainerCols="2"
                  editable="false"
                  layout="ResponsiveGridLayout"
                  labelSpanL="3"
                  labelSpanM="3"
                  emptySpanL="4"
                  emptySpanM="4"
                  columnsL="1"
                  columnsM="1">
                  <form:content>
                     <Label text="{i18n>ObjectSupplierName}"/>
                     <Text text="{Supplier/CompanyName}"/>
                     <Label text="{i18n>ObjectSupplierAddress}"/>
                     <Text text="{Supplier/Address}"/>
                     <Label text="{i18n>ObjectSupplierZipcode} / {i18n>ObjectSupplierCity}"/>
                     <Text text="{Supplier/PostalCode} / {Supplier/City}"/>
                     <Label text="{i18n>ObjectSupplierCountry}"/>
                     <Text text="{Supplier/Country}"/>
                  </form:content>
               </form:SimpleForm>
             </content>
         </Panel>

      </semantic:content>
      <semantic:sendEmailAction>
         <semantic:SendEmailAction
            id="shareEmail"
            press="onShareEmailPress"/>
      </semantic:sendEmailAction>
   </semantic:FullscreenPage>
</mvc:View>
...

Initially, the detail page content only consists of an sap.m.ObjectHeader control that displays the product name and its price. We will make it more flexible for small screen devices by setting the responsive property. As you have seen in the table example before, some SAPUI5 controls contain features to tweak and configure the responsiveness. Additionally, we add the same information that is shown in the worklist table to the detail page. The intro text is the ID of the product.

Next, we define some additional attributes for the product with two sap.m.ObjectAttribute controls, one for the UnitsInStock and one for the Discontinued flag. These are important product attributes for us, so we want to include them in our header area.

Below the object header we can use sap.m.Panel to display some additional information in a nice layout on the page. Inside the panel we use sap.ui.layout.form.SimpleForm to have the labels and texts we want to display aligned to each other.

webapp/i18n/i18n.properties

...
#Price per unit text
ObjectPriceTitle=Price

#Discontinued text
ObjectDiscontinuedStatusText=Discontinued

#Supplier tab title
ObjectSupplierTabTitle=Supplier Info

#Supplier company name
ObjectSupplierName=Name

#Supplier contact person name
ObjectSupplierContact=Contact

#Supplier contact address
ObjectSupplierAddress=Address

#Supplier zip code
ObjectSupplierZipcode=ZIP Code

#Supplier city name
ObjectSupplierCity=City

#Supplier country
ObjectSupplierCountry=Country


#~~~ Footer Options ~~~~~~~~~~~~~~~~~~~~~~~
...

As before, we add new i18n texts to the resource bundle.

Save all the changes and run the application. Click on any product and see the product details displayed on the detail page.