Skip to Content

Introducing the latest Fiori element: Worklist. Think of it as a “task processing” version of the List Report.  You will find out how to create a worklist, and when to use a worklist instead of a List Report.  

The latest floorplan to be added to Fiori elements is the Worklist – added in SAPUI5 1.50.  In many respects, a Worklist is very similar to a List Report. There are many similar features for the business user.  And it’s even created in a similar way by the developer, with similar annotations. So why this new template? It’s really comes down to the purpose of your list.

This is why when you are selecting the Fiori element that best fits your use case, you want to start by looking at the Fiori Design Guidelines, and read the details of the Worklist floorplan:

“A worklist displays a collection of items that are to be processed by the user. Working through the item list usually involves reviewing details of the list items and taking action. In most cases, the user has to either complete a work item or delegate it.

The focus of the worklist floorplan lies on processing the items. This differs from the list report floorplan, which focuses on filtering content to create a list.”

In other words you want to use a Worklist when you want your business user is to process most/all of the items in the list.  Compared to a List Report, where you want your business user to filter on a potentially large list of items and act only on a small number of the items.

The main differences in the Worklist, compared to a List Report, are:

  • Variant management is hidden to create more space for the list
  • Smart filter bar (with the search filter fields) is hidden to create more space for the list
  • A keyword search replaces the filter
  • Multiple selection of items is turned on by default, provided you have defined at least one action that uses multiple selection
    • Note: If all actions are line item actions, then the table uses the “no selection” mode
  • Sort, filter, group icons are promoted for quick access to the Table toolbar (shown below) so the business user can quickly prioritize their items for processing
    • Alternatively, they can still adjust column selection and other settings using the Settings icon as they do for List Report

You will also find that by default:

  • Export to Excel feature is turned off (set to false)
  • Fixed Layout is enabled
  • Growing via scrolling is enabled

Most other features and behaviours of Worklist are the same as for List Report. You can find more information on the full capabilities for Worklist in the SAPUI5 SDK help on Developing Apps with SAP Fiori Elements.

You start creating a worklist, much like you do for List Report – by creating your OData Service.  If following the recommended ABAP Programming Model for SAP Fiori that means you will:

  • Create and activate a CDS View Data Definition
  • (Optionally) link your CDS View to BOPF Business Object
  • Add UI annotations in a metadata extension of your CDS View
  • Expose your CDS View as OData Service

TIP: If you want to use the default Responsive mode for the table, make sure your CDS View is a simple view and not an analytical view, e.g. does NOT contain any @DefaultAggregation annotations.  If you do you the Worklist will appear as an analytical table as explained in Fiori elements – List Report – Sorting, Grouping, and Table Types.

And now to the good bit… let’s look at:how you can create a Worklist using SAP Fiori elements, and which Annotations you need, and finish with a little glimpse behind the scenes.  Before you start, you will first need to understand some prerequisites for the keyword Search field.

Prerequisites: SAPUI5 1.50

Prerequisites for using the default Search field

Because you will not have the Smart Filter bar available, you will need to especially make sure the Search field will find something.  In your CDS View itself you will need to:

  • Mark your CDS View as searchable using the annotation @Search.searchable: true
  • And you will need to mark at least one field that is searchable via the default Search field by adding the annotations @Search.defaultSearchElement: true

If you need more than one field to be searchable, just add the @Search.defaultSearchElement: true against each field in your metadata extension.

TIP: It is best to check with your business users what they are likely to search on, as any field that is NOT marked as a defaultSearchElement will not be available for searching.

You will find more explanations in the ABAP Programming Model for SAP Fiori on pages:

TIP: If you are using a List Report instead of a Worklist, the Search field works the same way, and the same prerequisites apply.

Creating a Worklist

IMPORTANT: You will already have set up your SAP Cloud Platform Cloud Connector and Destination before you start.

In SAP Cloud Platform Web IDE, start with File > New > Project from Template

Select the Fiori elements category and choose template Worklist / Object Page

Enter the Basic Data  – much like you would for List Report

Configure your Data Connection – just as you would for List Report

Confirm any inherited annotations, just as you would for List Report.

And select your OData entities and navigation path just as you would for List Report

So far, the only thing different from List Report was the template you chose.  It’s only when you run the app (from Component.js of course) that you will see the difference.

Annotations for the Worklist 

You will need the following annotations as a minimum.  They can come from your CDS View or local annotations or both. Remember local annotations override default annotations from the CDS View.

  • UI.HeaderInfo annotation to define the name of the list
  • UI.LineItem annotations to define the columns of the list
  • UI.Identification annotations for what to show on the Object Page when the item is selected

TIP: Because there is no Smart Filter bar, you will NOT need annotation UI.SelectionFields.

And that will give you a list that looks something like this:

Make sure you test your keyword Search works!

If there are no multi-selection actions, you can see the worklist appears in “no selection” mode.

Before you finish, there are 2 small adjustments worth making, even though they are both optional:

  1. Add a multi-selection action for processing the task, so that the multi-selection mode is activated
  2. Add a subtitle for the worklist, e.g. explaining the purpose of the list

You will need to know how to Enable Actions for the List Report View as explained in the SAPUI5 SDK.

A simple intent-based “semantic object” navigation button is enough to get started.  You can add a semantic object and action to using the annotation UI.lineItem.DataFieldForIntentBasedNavigation.

IMPORTANT: When the business user presses the button, they will be taken to whatever app has been defined against that Semantic Object and action in matching Target Mapping in the Launchpad Designer.  So make sure you tell your Launchpad Content Administrator which Target Mappings will need to be defined.

TIP: You will need to choose an appropriate Semantic Object and Action name.  You can find the SAP delivered Semantic Objects in table /UI2/SEMOBJ, and custom-defined Semantic Objects in table /UI2/SEMOBJC. Semantic actions are freely definable up to a maximum of 60 characters. Semantic actions are usually a verb or include a verb, e.g. manage, approve, create, change, contact, analyze, track, register, release, display, displayFactSheet, lookup, manageLineItems, etc.

You can see in this example how to use the redefine icon button to override default UI.LineItem annotations from the CDS View.

Once your UI.LineItems have been brought into the Local Annotations, it is a simple matter to define a Semantic Object action. Make sure you give it a Label to be displayed as the text of the button.

If you want the user to action multiple lines at the same time, set inline to false.

 

IMPORTANT: The button will show as disabled until the business user selects at least one item.

To add a subtitle for your Worklist just create a text for your subtitle in your i18n.properties file assigning it a property name, such as subTitleifVariantMgmtHidden.

You then reference the i18n property in the configuration settings of your Worklist page in the manifest.json file by adding the line:

"subTitleIfVariantMgmtHidden": "{{subTitleIfVariantMgmtHidden}}"

Your manifest.json file should look something like this:

 

You can find more information on how to do this in Creating a List Report Without Variant Management in the SAPUI5 SDK.

Your Worklist will now look something like this.

Behind the Scenes of the Worklist

Your manifest.json reveals the configuration settings that turn a List Report into a Worklist. Notice particular that under sap.ui.generic.app > pages > <Your List Report Page> in the component section you see:

  • isWorklist is set to true
  • multiSelect is set to true
  • variantManagementHidden is set to true

Becoming a Fiori elements guru

You will find much more on SAP Fiori elements in our Fiori elements wiki

Brought to you by the S/4HANA RIG. 

All screenshots taken from:

  • SAP S/4HANA 1709
  • SAPUI5 1.50
  • Web IDE 180404 (Full Stack)

 

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Gaurav Karkara

    Hi Jocelyn,

    Thanks for this blog.

    I need to build a app with CDS~BOPF which i need to show as worklist where multiple selections can be made. I am trying to follow your blog but i am not able to find Template ‘Worklist/Object Page’ in hana trial Web IDE. How can i find this particular option?

    Regards

    Gaurav K

    (0) 
    1. Jocelyn Dart
      Post author

      Hi Gaurav,

      You need to use the Full Stack Web IDE service in your SAP Cloud Platform. Go to your SAP Cloud Platform account cockpit, select Services, search on Web IDE and you should see it.

      Rgds,

      Jocelyn

      (0) 
      1. Gaurav Karkara

        Thanks Jocelyn.

        I could find it but not able to create my example. I encountered a “Unexpected Token : JSON error” before i could finish the wizard.

        Is it because my system is 1610?

        Same CDS Odata works perfectly for list view application.

        Regards

        Gaurav K

        (0) 
  2. Luca Messinese

    Hi Jocelyn,

    it was very helpful to understand the concepts behind the worklist floorplan, but I would like to go deep to understand if there are any possibilities to integrate this Fiori worklist/object page along to the HCM Processes & Form processes implemented into on premise system. Thanks to the SAP HR Renewal add-ons is already provides a native OData to retrieve all workitems generated by FPM Processes and Form workflow implemented on backend system.

    I was started to integrate onpremise OData along worklist floorplan just doing a simple connection between Cloud Connector. Worklist is working perfectly and retriving fastly a large numbers of workitems using $batch request, but I didn’t found any other useful informations to how to display workitems cointainer navigating to object page.

    I kindly ask you to give me some hits if you have.

    thanks in advance

    Luca

     

     

    (0) 

Leave a Reply