Skip to Content
Author's profile photo Ayham Tanbari

UI5ers Buzz #03: Shop Administrator – A new Demo App for Layout, Charts and more

In this blog post, we’re going to present the new Shop Administrator demo app to you – a showcase for the sap.tnt library. This library contains controls to build tools using the SAP Fiori design language. The Shop Administrator demo app shows you how to build a tool to manage an online shop like our Shopping Cart demo app.

The Tool Page screen is divided into three main sections:

  1. Tool header: located at the top of the screen with a set of buttons for displaying errors, notifications, and user information.
  2. Side navigation: located on the left side of the screen. You can use it to navigate between the different pages in your application. At the bottom of the side navigation panel, you can add links to important things such as legal information.
  3. Content area: located in the middle of the screen, use it to show the contents of each page.

The home page gives you a good example of how to use and implement the Block Layout and how to arrange the controls using smaller blocks called Block Layout Cells nested inside Block Layout Rows.
The Block Layout comes with five different flavors: Accent, Dashboard, Mixed, Light, and Default. Each affects the color of the rows and cells. For the home page, we chose the Light flavor to color the cells in lightweight blue tones as you can see in the following screenshot.

You can change the design according to your needs. Check out the Block Layout Explored sample.
If you like to have more information about the design itself, take a look at the SAP Fiori Design Guidelines.

The settings page shows a good example of how to use and implement the Object Page Layout control to show a set of inputs. The Object Page Layout enables you to use the concept of sections, to help you scroll easily and move from one section to another in a single click without moving the toolbar.

The statistics page shows various types of charts that you can use to show different types of data. We’re going to explain this in detail in another blog post, so stay tuned…

I hope this post inspired your curiosity for Block Layout. We’ll keep you in the loop for more news straight from the SAPUI5/OpenUI5 lab.

How are we doing? Let us know by leaving a comment here or contacting us in the slack channel.

Previous Post: UI5ers Buzz #02

Next post: UI5ers Buzz #04



Ayham is an OpenUI5 developer. His interests are developing Web applications using cutting edge technologies. He is not limited to software development but also experienced with networks.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Ayham,
      looks great, very good work. Currently I have trouble to implement the ToolBar properly. Is the source code for the demo available by any chance?
      Best regards

      Author's profile photo Ayham Tanbari
      Ayham Tanbari
      Blog Post Author

      Hallo Alexander,

      Yes the source code is available and you can download it at Demo Apps page

      Kind Regards,

      Author's profile photo Suman De
      Suman De

      Hallo Ayham,

      The source code link has changed. Could you please share the updated reference to the source code?

      Thanks in Advance!

      Best Regards,


      Author's profile photo Ayham Tanbari
      Ayham Tanbari
      Blog Post Author

      here you can download

      Author's profile photo Cristiano Marques
      Cristiano Marques

      Hi Ayham,great template! I´m using it at . But I noticed slowness when I clicked on 'Settings' for the first time after loading the page. Slow enough to diminish the user experience. Did you notice that too?

      Author's profile photo Ayham Tanbari
      Ayham Tanbari
      Blog Post Author

      Hi Cristiano,

      Yes, I noticed that. I think,this is because of the rendering of the view just for the first click as you mentioned. You can see that also if you click on the statistics. I will report this to the corresponding control team.

      Thanks for your feedback