McCoy
BLOGTECHNOLOGYSAP S/4 HANASAP EXTENDED WAREHOUSE MANAGEMENT
Ronald Janssen

Creëer jouw eigen unieke Fiori Overview Pages

Fiori Elements biedt een krachtig framework voor het bouwen van aangepaste overzichtspagina's die zijn afgestemd op specifieke behoeften van rollen in de organisatie. Met behulp van Fiori Elements kun je gemakkelijk intuïtieve en gebruiksvriendelijke interfaces creëren die relevante informatie in één oogopslag tonen. In deze blog zullen we je begeleiden bij het proces van het bouwen van jouw eigen aangepaste overzichtspagina's met behulp van Fiori Elementen.

Waarom aangepaste Overview Pages bouwen?

Een van de belangrijkste voordelen van het bouwen van aangepaste Fiori Overview Pages is de mogelijkheid om een unieke en op maat gemaakte ervaring te bieden voor elke rol binnen uw organisatie. Door de lay-out, inhoud en functionaliteit van de overzichtspagina's aan te passen, kun je ervoor zorgen dat gebruikers toegang hebben tot de meest relevante informatie, wat de productiviteit en efficiëntie verbetert. Of het nu gaat om een magazijnmanager, een logistiek coördinator of een klantenservicemedewerker, elke rol kan een gepersonaliseerde overzichtspagina hebben die aansluit bij hun specifieke verantwoordelijkheden en doelstellingen.

Onze aangepaste Fiori Overview Page: The Clean Desk Cockpit

The Clean Desk Cockpit (CDC) bewijst dat het combineren van enkele McCoy-ingrediënten een heerlijk gerecht oplevert. Diepgaande kennis van bedrijfsprocessen, praktische toepasbaarheid op de werkplek en hardcore technologische vaardigheden leiden tot een oase van rust in het magazijn en zorgen voor een volledig overzicht van informatie. Dit alles wordt mogelijk gemaakt door een state-of-the-art SAP-app.

Duik met ons mee in de technische diepten van de Clean Desk Cockpit-app. Het vervolg op onze vorige blog, waarin we de functionele aspecten van de app hebben belicht.

Het bouwen van de Clean Desk Cockpit

Zoals eerder vermeld hebben we gebruik gemaakt van het Fiori Elements Overview Page-type, omdat we op een eenvoudige manier de status van een magazijn kunnen weergeven met behulp van grafieken (kaarten) in één oogopslag. Een groot voordeel bij het gebruik van deze app is dat knelpunten in het magazijn snel zichtbaar worden.

Hieronder volgt een technische beschrijving voor Developers en Architecten. Het laat zien hoe je op een redelijk eenvoudige manier een kaart toevoegt aan een Overview page. Het ontsluiten van de data vanuit het backend gebeurt met CDS views, waarbij via Basic views de data aan de hand van de kaart logica wordt opgehaald. De integation view maakt gebruik van deze Basic views, waaruit uiteindelijk de projection view ontstaat met annotaties, welke als entity beschikbaar komt in de app.

In dit blog gaan we dieper in op de technische details achter de ontwikkeling en richten we ons specifiek op de technische uitvoering van de ‘Outbound Deliveries’ kaart. We hebben gebruik gemaakt van het Fiori Elements Overview Page-type, waarbij elke kaart op gelijke wijze is vormgegeven.

In bovenstaande situatie zijn er geen deliveries (doc) die op tijd geleverd zijn (DocNotOverdue), maar als deze er zijn, dan worden ze bovenop de blauwe bar (Overdue deliveries) getoond.

Alle objecten zijn aangemaakt in een development package ZCDC.

De outbound deliveries worden geteld op basis van vier criteria, namelijk ‘In progress’, ‘Not started’, ‘Overdue’ en ‘Not overdue’. Voor het ophalen van de entries met status ‘In progress’ en ‘Not started’ is basic CDS view ZB_CDC_OUTBOUND aangemaakt met als parameter STATUS_VALUE (1 is ‘Not started’ en 2 is ‘In progress’):

Bovenstaande CDS view wordt twee keer aangeroepen; een keer om de outbound deliveries met status ‘Not started’ op te halen (P_STATUS_VALUE = ‘1’) en een keer voor de entries met status ‘In progress’ P_STATUS_VALUE = ‘2’). Hiervoor is CDS view ZB_CDC_OUTBOUND_STATUS ontwikkeld:

Voor het ophalen van de outbound deliveries die te laat zijn vewerkt (status ‘Overdue’) is CDS view ZB_CDC_DELIVERY_OVERDUE ontwikkeld:

Voor het ophalen van de outbound deliveries die tijdig zijn vewerkt (status ‘Overdue’) is CDS view ZB_CDC_DELIVERY_NOT_OVERDUE ontwikkeld:

Door het combineren van de CDS views ZB_CDC_OUTBOUND_STATUS, ZB_CDC_DELIVERY_OVERDUE en ZB_CDC_DELIVERY_NOT_OVERDUE via UNION krijgen we per outbound delivery de status en of deze te laat dan wel op tijd is verwerkt. Dit resultaat wordt verkregen via CDS view ZB_CDC_OUTBOUND_UNION:

De attributen ‘DocCount’, ‘DocOverdueCount’ en ‘DocNotOverdueCount’ zijn aangemaakt om gemakkelijk aantallen te kunnen sommeren.

Nu de basic CDS views (ZB…) zijn aangemaakt, kan de integration view worden aangemaakt. Deze CDS view haalt zijn data volledig uit CDS view ZB_CDC_OUTBOUND_UNION:

Normaal gesproken wordt bij een integration view andere data erbij gehaald, maar dat is nu niet nodig.

Als laatste CDS view van de card is de projection view nodig, ZC_CDC_OUTBOUND, waarin via annotaties wordt aangegeven op welke attributen gesommeerd moet worden. In dit geval op de ‘Count’ attributen:

In de Fiori app zijn voor deze card als dimensies gedefinieerd ‘In Progress’ en ‘Not started’, terwijl als measurements ‘DocOverdueCount’ en ‘DocNotOverdueCount’ zijn gedefinieerd. Over de measurements moet worden gesommeerd, vandaar dat dit als annotatie is toegevoegd aan de projection view ZC_CDC_OUTBOUND (zie hierboven).

Alle ontwikkelde cards van deze app hebben een gemeenschappelijk zoek attribuut: Warehouse number. Om dit attribuut te tonen in de Fiori app is een metadata extensie toegevoegd:

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

Alle cards die attribuut WarehouseNumber in de projection view hebben, worden dan automatisch gefilterd op dit attribuut.

Na het toevoegen van projection view ZC_CDC_OUTBOUND aan de service definitie kan de card aan de app worden toegevoegd. Dit gebeurt via Business Application Studio, de SAP ontwikkelomgeving. Aan de manfiest.json wordt de card toegevoegd:

"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 annotations.xml zijn de dimensie (Status) en measurements (DocOverdueCount en DocNotOverdueCount) gedefinieerd. Tevens zijn de measurements gedefinieerd als stackedcolumn; dit betekent dat deze bovenop elkaar worden getoond:

<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>

Ontwikkelde cards

  • Aantal entries in Inbound Queue.

  • Aantal outbound deliveries ‘Overdue’ en ‘Not overdue’ voor ‘In progress’ of ‘Not started’.

  • Aantal inbound deliveries en returns met dezelfde dimensies en measurements als outbound deliveries.

  • Aantal handling units op de staging lanes (inbound).

  • Aantal handling units op de staging lanes (outbound).

  • Aantal open warehouse taken (replenishment) in het laatste uur.

  • Aantal open warehouse taken (pick) in het laatste uur.

  • Aantal open warehouse taken (putaway) in het laatste uur.

  • Aantal active physical inventory documents.

  • Aantal physical inventory documents.

  • Aantal bezette deuren.

  • Aantal actieve transportation units.

  • Aantal actieve resources.

  • Aantal stock op resources.

  • Aantal Idoc errors van de laatste 7 dagen.

Alle bovengenoemde cards staan op 1 pagina, de Fiori Elements Overview Page.

Mocht je meer informatie willen hebben over deze app of over Fiori Elements in het algemeen, dan kun je contact opnemen met McCoy & Partners, BU technology of met Ronald Janssen.