Fiori Elements: Workflow Overview Page (OVP) in S/4?

Hello,

As you know, Overview Pages are a “part” of SAP Fiori Elements. There are many Overview Pages that comes in S/4, but i was missing one for some specific Workflow information, as most Workflow Administrators needs. So as i’ve been talking about Flexible Workflows here for the past few weeks, i’ve decided to create a specific OVP (Overview Page) for Workflow informations. My Goal here is to show you how you can start your project like i did, and customize it like i will. In another words, it can serve you as a “base” page to be incremented.

In the end, here is what we’re going to do:

Basically there are 4 Cards:

1. Total of Workflows per Workflow ID;
2. Same as above but in a Pie Chart format;
3. Workflows that are currently with the ERROR Status, waiting to be reprocessed (like in SWPR);
4. Overall status of Workflows.

To accomplish the 4 cards above i’ve created 3 CDS Views, all getting data from the SWWWIHEAD table (Main Workflow table, in S/4 or not).

If you haven’t played around with a OVP App, you can place the Cards anywhere you want on the screen:

And some Cards even stretch to show more data or columns:

So let’s get to it, here is what i’ve used to create this “base” project:

• S/4 1809 as the Backend (where i’ve created my CDS Views, using ADT);
• SAP Cloud Platform Trial Neo Account (Web IDE);
• Cloud Connector, connecting my Neo Account to the S/4 Environment.

First, let’s create the 3 CDS Views below:

@AbapCatalog.sqlViewName: 'ZOVPWF1'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP CDS 1'
@OData.publish : true
@UI.chart: [{
      qualifier: 'Q2',
      title: 'Workflow Count',
      chartType: #DONUT,
      dimensions: ['id'],
      measures: ['total'],
      dimensionAttributes: [{ dimension: 'id', role: #CATEGORY }],
      measureAttributes: [{ measure: 'total', role: #AXIS_1, asDataPoint: true }]
      }]
define view
  ZOVP_WF1_I
  as select from swwwihead as Header // Master Workflow Table
  {
    @UI.lineItem: [{position: 10, label: 'Workflow ID', qualifier: 'Q1'}]
    key wi_rh_task as id, // Workflow ID

    @UI.dataPoint: {title: 'Total',
        criticalityCalculation: {
        improvementDirection: #TARGET,
        deviationRangeHighValue: 2000, // Just Playing around with some numbers here...
        toleranceRangeLowValue: 50 // Just Playing around with some numbers here...
        }}
        @UI.lineItem: [{position: 20, label: 'Total', qualifier: 'Q1', type: #AS_DATAPOINT}]
    count(*) as total // Couting Total Workflows
  }

  where
    wi_type = 'F' // As we only want the Father Work items...
  group by
    Header.wi_rh_task

@AbapCatalog.sqlViewName: 'ZOVPWF2'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP CDS 2'
@OData.publish : true
define view
  ZOVP_WF2_I
  as select from swwwihead as Header // Master Workflow Table
  {
    @UI.lineItem: [{position: 10, label: 'Work Item ID' }]
    key wi_id as id, // Work item ID
    @UI.lineItem: [{position: 20, label: 'Text' }]
    wi_text as text, // Workflow TEXT
    @UI.lineItem: [{position: 30, label: 'Date' }]
    wi_cd as wfdate, // Workflow Date
    @UI.lineItem: [{position: 40, label: 'Time' }]
    wi_ct as wftime, // Workflow Time
    @UI.lineItem: [{position: 50, label: 'Workflow ID' }]
    wi_rh_task as task // Workflow ID
  }
  where
        wi_type = 'F' // Workflow Type F, part of the Flow itself no thte father...
    and wi_stat = 'ERROR' // Only Workflow with Error Status...

@AbapCatalog.sqlViewName: 'ZOVPWF3'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP CDS 3'
@OData.publish : true
@UI.chart: [{
      qualifier: 'S2',
      title: 'Status Count',
      chartType: #DONUT,
      dimensions: ['status'],
      measures: ['total'],
      dimensionAttributes: [{ dimension: 'status', role: #CATEGORY }],
      measureAttributes: [{ measure: 'total', role: #AXIS_1, asDataPoint: true }]
      }]
define view
  ZOVP_WF3_I
  as select from swwwihead as Header
  {
    @UI.lineItem: [{position: 10, label: 'Status', qualifier: 'S1'}]
    key wi_stat as status, // Work Item Status...
    @UI.dataPoint: {title: 'Total',
            criticalityCalculation: {
            improvementDirection: #TARGET,
            deviationRangeHighValue: 2000, // Just Playing around with some numbers here...
            toleranceRangeLowValue: 50 // Just Playing around with some numbers here...
            }}
        @UI.lineItem: [{position: 20, label: 'Total', qualifier: 'S1',type: #AS_DATAPOINT}]
    count(*) as total // Counting the Totals..
  }
  where
    wi_type = 'F' // As we only want the Father Work items...
  group by
    Header.wi_stat

As you know, all CDS Views with the @OData.publish : true Annotation, can be published as OData service, like described here. If you don’t now nothing about CDS, you can get started here.

So i’ve published mine:

Don’t forget to test your OData service:

Now, you need to clone the Github repository here. Or you can try to create o Overview Page App using the Web IDE template from scratch, consuming this new OData services that we’ve just created.

If you clone, here is the project on Web IDE:

Don’t forget to change the neo-app.json file pointing to your specific Destination:

Created/configured here (Cloud Connectors and Destinations):

If everything is correct, you shall see something like this (with your environment data of course):

So what’s next? As i’ve sad, this can serve you as a “base” project for you to improve with new data and functionalities, like:

1. Filters;
2. Actions (like SWPR restart);
3. Cards regarding Approvers;
4. Navigation between other Element pages or Apps, etc.

I’m planning on using the ones above and many more!

Enjoy!

Regards.