In this tutorial we will build an app using SAPUI5 that, for example, a shop owner can use to manage his product stock levels.
The app provides the following features:
-
Overview of all products
-
Track products with shortages or products that are completely out of stock
-
Reorder products that are low in stock
-
View product details and add comments
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.
Start page of the app with list of products and actions
Product detail page of the app
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.htmlfile. 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.
Related Information