Latest Update November 2020:
It’s hard to believe that 4 years have passed since I first started blogging on SAP Fiori elements.
Since then it has grown from strength to strength. SAP Fiori elements apps are now the:
The tooling has also changed from SAP Web IDE on SAP Cloud Platform Neo, to the next generation tooling SAP Fiori Tools. SAP Fiori Tools are an extension of SAP Business Application Studio on SAP Cloud Platform Cloud Foundry that guide you through creating your own SAP Fiori elements apps – and they can be run offline on VSCode too.
So it’s time for this blog post to step gracefully aside and instead refer you to the current best resources for Fiori elements, including:
One last big hint: One of the most beneficial additions to the official documentation is the SAP Fiori elements feature map which explains what is available per floorplan for your SAPUI5 version – definitely worth a read!
But hey all knowledge has value so if you want to read how this used to work in the SAP Web IDE... read on!
*****
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:
You will also find that by default:
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:
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
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:
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.
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.
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.
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:
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:
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.
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:
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:
It’s hard to believe that 4 years have passed since I first started blogging on SAP Fiori elements.
Since then it has grown from strength to strength. SAP Fiori elements apps are now the:
- Preferred choice for SAP Fiori apps delivered for SAP S/4HANA
- As at November 2020 nearly 900 of the more than 2K apps available are SAP Fiori elements app
- Preferred and recommended choice for efficient development of your own custom-built apps
- Preferred build approach for many of our customers… see the SAP TechEd 2020 session: Yorkshire Water uses SAP Fiori Elements to build Fiori apps quickly
The tooling has also changed from SAP Web IDE on SAP Cloud Platform Neo, to the next generation tooling SAP Fiori Tools. SAP Fiori Tools are an extension of SAP Business Application Studio on SAP Cloud Platform Cloud Foundry that guide you through creating your own SAP Fiori elements apps – and they can be run offline on VSCode too.
So it’s time for this blog post to step gracefully aside and instead refer you to the current best resources for Fiori elements, including:
- SAP Community topic for Fiori elements – get the latest resources, ask questions, and swap experiences with other customers, partners, independents, and SAP employees
- The official documentation on SAP Help Portal: Developing Apps with SAP Fiori elements
- You can also find this documentation via the SAPUI5 SDK at https://ui5.sap.com > Documentation > Developing Apps with SAP Fiori elements
- The video playlist on Youtube: Getting started with SAP Fiori elements playlist
- The Tutorials for SAP Fiori Tools on https://developers.sap.com
One last big hint: One of the most beneficial additions to the official documentation is the SAP Fiori elements feature map which explains what is available per floorplan for your SAPUI5 version – definitely worth a read!
But hey all knowledge has value so if you want to read how this used to work in the SAP Web IDE... read on!
*****
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:
- Add a multi-selection action for processing the task, so that the multi-selection mode is activated
- 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)
- SAP Managed Tags:
15 Comments
