McCoy
BLOGTECHNOLOGYSAP S/4 HANASAP EXTENDED WAREHOUSE MANAGEMENT
Ronald Janssen

Building Custom Fiori Overview Pages

Fiori Elements provide a powerful framework for building custom overview pages tailored to your specific needs. By leveraging Fiori Elements, you can easily create intuitive and user-friendly interfaces that display relevant information at a glance. In this guide, we will walk you through the process of building your own custom overview pages using Fiori Elements.

Why build custom overview pages?

One of the key advantages of building custom Fiori overview pages is the ability to provide a unique and tailored experience for each role within your organization. By customizing the layout, content, and functionality of the overview pages, you can ensure that users have access to the information they need most, improving productivity and efficiency. Whether it's a warehouse manager, a logistics coordinator, or a customer service representative, each role can have a personalized overview page that aligns with their specific responsibilities and objectives.

Our Custom Fiori Overview Page: The Clean Desk Cockpit

The Clean Desk Cockpit (CDC) proves that combining some McCoy-ingredients deliver a delicious dish. Profound business process knowledge, practical applicability in the workplace and hardcore technology skills lead to an oasis of peace in the warehouse and takes care of a complete overview of information. All of this facilitated by a state-of-the-art SAP app.

Take a deep dive with us in the technical depths of the Clean Desk Cockpit app. The follow-up on our previous blog, where we have highlighted the functional aspects of the app.

Building the Clean Desk Cockpit

Like stated before we used the Fiori Elements Overview Page-type, because we can easily display the status of a warehouse with graphics (cards) at a glance. A big advantage when using this app is that pain points in the warehouse are exposed quickly.

This technical description is for developers and architects. It shows how you can easily add a card to the Overview Page. Unlocking the data from the backend is done via CDS views, where Basic views assist in getting the data on the basis of card logic. The Integration view uses these Basic views, from which the Projection views arise with their annotations, which in the end become available as entity in the app.

In this blog we go deeper on the technical details behind the development and we focus on the technical execution of one specific card by means of the ‘Outbound Deliveries’ card. We made use of the Fiori Elements Overview Page-type, were by every card has been designed in the same way.

In the figure above there are no deliveries (doc) delivered in time (DocNotOverdue), but if they are delivered in time, then they will be displayed on top of the blue bar (Overdue deliveries). All objects have been created in a development package ZCDC.

Outbound deliveries are being count on four criteria, ‘In progress’, ‘Not started’, ‘Overdue’ and ‘Not overdue’. For getting the entries with status ‘In progress’ and ‘Not started’ basic CDS view ZB_CDC_OUTBOUND has been created with parameters STATUS_VALUE (1 is ‘Not started’ and 2 is ‘In progress’):

The CDS view mentioned above is called twice; once to get the outbound deliveries with status ‘Not started’ (P_STATUS_VALUE = ‘1’) and once to get the entries with status ‘In progress’ P_STATUS_VALUE = ‘2’). For this CDS view ZB_CDC_OUTBOUND_STATUS has been developed:

For getting the outbound deliveries who are processed too late (status ‘Overdue’) CDS view ZB_CDC_DELIVERY_OVERDUE has been developed:

For getting the outbound deliveries who are processed on time (status ‘Not overdue’) CDS view ZB_CDC_DELIVERY_NOT_OVERDUE has been developed:

By combining the CDS views ZB_CDC_OUTBOUND_STATUS, ZB_CDC_DELIVERY_OVERDUE and ZB_CDC_DELIVERY_NOT_OVERDUE via UNION we obtain per outbound delivery the status together with the fact if it is processed on time or too late. This result is obtained via CDS view ZB_CDC_OUTBOUND_UNION:

Attributes ‘DocCount’, ‘DocOverdueCount’ and ‘DocNotOverdueCount’ have been created to make it easy to summarize numbers.

Now that the basic CDS views (ZB…) have been created, the integration view can be created. This CDS view gets his data completely out of CDS view ZB_CDC_OUTBOUND_UNION:

Normally the purpose of an integration view is to get data from other sources, but in this situation this is not necessary.

After all the projection view has to be created for the card, ZC_CDC_OUTBOUND, in which we can supply with annotations on which attributes we have to summarize. In our case this is on the ‘Count’ attributes.

For this card as dimensions have been defined ‘In Progress’ and ‘Not started’, while as measurements ‘DocOverdueCount’ and ‘DocNotOverdueCount have been defined. Over measurement attributes is being summarized. That’s why the annotation has been added to the projection view ZC_CDC_OUTBOUND (see above).

All developed cards of this app have a common attribute to search for: Warehouse number. To display this attribute in the Fiori app the following metadata extension has been added:

{
  @UI: { selectionField: [ { position: 10 } ] }  
    WarehouseNumber;   
}

All cards that have attribute WarehouseNumber in the projection view, will be automatically filtered on this attribute.

After adding the projection view ZC_CDC_OUTBOUND to the service definition then the card can be added to the app via Business Application Studio (BAS), the SAP development environment. The card is being added to the file manifest.json:

"card_003": {
                "model": "mainService",
                "template": "sap.ovp.cards.charts.analytical",
                "settings": {
                    "title": "Outbound deliveries",
                    "entitySet": "zc_cdc_outbound",
                    "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#DocCountQual",
                    "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#outbound_delivery_qual"
                }
            }

In file annotations.xml are the dimension (Status) and measurements (DocOverdueCount en DocNotOverdueCount) defined. The measurements are defined as stackedcolumn; this means that they will be shown on top of each other:

<Annotations Target="cds_zui_clean_desk_cockpit.zc_cdc_outboundType">
    <Annotation Term="UI.Chart" Qualifier="outbound_delivery_qual">
        <Record>
            <PropertyValue Property="Title" String="Outbound deliveries"/>
            <PropertyValue Property="MeasureAttributes">
                <Collection>
                    <Record Type="UI.ChartMeasureAttributeType">
                        <PropertyValue Property="Measure" PropertyPath="DocOverdueCount"/>
                        <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
                    </Record>
                    <Record Type="UI.ChartMeasureAttributeType">
                        <PropertyValue Property="Measure" PropertyPath="DocNotOverdueCount"/>
                        <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
                    </Record>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="DimensionAttributes">
                <Collection>
                    <Record Type="UI.ChartDimensionAttributeType">
                        <PropertyValue Property="Dimension" PropertyPath="Status"/>
                        <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>
                    </Record>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="ChartType" EnumMember="UI.ChartType/StackedColumn"/>
            <PropertyValue Property="Description" String="REPLACE_WITH_CHART_DESC"/>
        </Record>
    </Annotation>
    <Annotation Term="UI.DataPoint" Qualifier="DocCountQual">
        <Record Type="UI.DataPointType">
            <PropertyValue Property="Value" Path="DocCount"/>
        </Record>
    </Annotation>
</Annotations>

Developed cards

  • Number of entries in the Inbound Queue.

  • Number of outbound deliveries ‘Overdue’ and ‘Not overdue’ for ‘In progress’ of ‘Not started’.

  • Number of inbound deliveries and returns with the same dimensions and measurements as outbound deliveries.

  • Number of handling units on de staging lanes (inbound).

  • Number of handling units on de staging lanes (outbound).

  • Number of open warehouse tasks (replenishment) in the last hour.

  • Number of open warehouse tasks (pick) in the last hour.

  • Number open warehouse tasks (putaway) in the last hour

  • Number of active physical inventory documents.

  • Number of physical inventory documents.

  • Number of occupied doors.

  • Number of active transportation units.

  • Number of active resources.

  • Number of stock op resources.

  • Number of Idoc errors until 7 days ago.

All cards mentioned above are on 1 page, the Fiori Elements Overview Page.

For more info about this app or about Fiori Elements developments in general, you can contact McCoy & Partners, BU Technology or with Ronald Janssen.