docs

Worklist App Tutorial

In this tutorial we will build an app using OpenUI5 that, for example, a shop owner can use to manage his product stock levels.

The app provides the following features:

We will use the worklist template as a starting point for this tutorial and add additional features to the app as we go through the steps. The template implements a typical “Worklist” floorplan, one of the patterns that are specified by the SAP Fiori design guidelines, but you can also use it as a starting point for easily creating any kind of list-based apps. For more information about worklist floorplans, see the Related Information section at the bottom of this topic.

Preview

Start page of the app with list of products and actions

Product detail page of the app

Tip:

You don’t have to do all tutorial steps sequentially, you can also jump directly to any step you want. Just download the code from the previous step, and start there.

You can view and download the files for all steps in the Demo Kit at Worklist App. Copy the code to your workspace and make sure that the application runs by calling the webapp/index.html file. Depending on your development environment you might have to adjust resource paths and configuration entries.

For more information check the Downloading Code for a Tutorial Step section of the tutorials overview page Get Started: Setup, Tutorials, and Demo Apps.

  1. Step 1: Creating the Initial App
    In this step, we set up the initial app.
  2. Step 2: Custom Mock Data
    In this step, we want to change the mock data of the initial app.
  3. Step 3: Extending the Worklist Table
    In this step, we will edit the worklist table to include additional columns for our manage product stocks scenario. We display the supplier, the product price, and the number of units on order for each product and format the values accordingly.
  4. Step 4: Quick Filter for the Worklist
    For easily detecting and managing product shortages in our app, we will add a quick filter for the worklist table. Users can press the filter tabs to display the products according to whether they are in stock, have low stock or no stock. The table will update accordingly and show only the products matching the criteria.
  5. Step 5: Adding Actions to the Worklist
    Now we can easily spot shortages on our stock, but we would also like to take action and resolve it. Either we can decide to remove the product until the shortage is resolved or order new items of the product. In this step, we will add these actions to the footer of the worklist table.
  6. Step 6: Extending the Detail Page
    In this step, we will extend the detail page of our app to show more information of a given product with various UI controls. We will enrich the header area and display further attributes in an info panel for information about the supplier.
  7. Step 7: Adding a Comments Section
    In this step, we extend the product detail view by adding a feature allowing to add comments to the product.

Related Information

SAP Fiori design guidelines: Worklist Floorplans

This site is open source. Improve this page.