Skip to Content
Author's profile photo Michael Howles

Design Studio SDK (1.3) – Fiori-like Page Heading with buttons and more

Following suit with the last few of my later blogs, I’ve got a new one to go along with my Fiori kick I’ve been on.  For those who’ve not had a chance, you can catch up with some of these posts here, as some of my commentary will refer to them.

One thing that I was missing is a Page Header.  I could go the route that the Analysis Template in Design Studio goes, however it relies on a lot of CSS messing around and some other conventions around careful placement of panel overlays and usage of BIAL that I feel we can avoid and end up with a reusable form of. The manual approach I am referring to is in the illustration below, which was clearly inspired by Fiori/Blue Crystal sap.m Components:


This light grey header with blue stripe is a pretty common look, however this Design Studio template uses a lot of CSS and pseudo selectors to make the header and icons to their thing.  So I took to task of bringing over sap.m.Page (samples here SAPUI5 Explored)  I’d like to note that if you are writing a “real” UI5/Fiori App, the Page component does A LOT more stuff such as containing actual content and working well with the Nav Container component for switching between pages.  Unfortunately to-date, we cannot create Container components, so i’ll just be doing stuff that works with the Content Header of the page’s main header.

First, the basic properties:

  • Title –  the title in the header
  • Show Nav Button – Show/Hide the Nav Button (aka the Back button)
  • On Item Select (BIAL Event) – BIAL Event when you click a button
  • On Navigation – When you click the Nav Button (aka the Back button, why didn’t they call it Back?  Oh, well…)

And then we have some familiar looking complex properties similar to what I made for the Accordion component (Design Studio SDK – SAPUI5 Accordion Menu)  and PopOver Button component.  Let’s see it in a picture though:


Note the similar looking Additional Properties window at the bottom left.  I have the titles turned off because I wanted a compact menu, but below is another example if you wanted to use a few words:


To each their own, I like just Icons without words.  I’ll go back to my first example, and lets see what the items under Visualize look like at runtime.


Cool, so we can have even PopOver-type buttons available, to save some space in the main header.  So how do we work with the selections at runtime?  We turn to BIAL.  We have the following BIAL methods available.  These again are similar to what I added in my Accordion BIAL methods.

  • removeAllButtons() – Remove all header buttons.
  • addHeaderButton(buttonTitle, showTitle, icon) – To add a new button to the Page Header
  • removeHeaderButton(buttonTitle) – Remove a button based on title
  • removeAllItems (buttonTitle) – Remove any items for a given Page Header Button
  • addItem(buttonTitle, itemTitle) – Add a new item to a Page Header Button.
  • removeItem(buttonTitle, itemTitle) – Remove an item from a given Page Header Button
  • getItemClicked() – Get the item clicked.  If the Page Header Button has no PopOver Items, the title of the Page Header Button is returned.
  • getHeaderClicked() – Get the Page Header Button clicked.  Useful if your Page Header Button has popover options and you want to know which Button the selected item was under.
  • getTitle/setTitle – Obvious
  • setShowNavButton/getShowNavButton – Hide/Show the Back button

Example BIAL code snippet on item select:


After making this one, I like the ability to place a nice page header in my BI Application, as well as some easy to create buttons that are kind of a hybrid between a simple tool bar/split button/PopOver button.  I think one could make a version of this that doesn’t have the page-header look so that it’s just a simple toolbar look for use in other regions of the dashboard (like sub-headers or sub-toolbars) but I’ll leave that for another day or someone else to do.

Design Studio 1.2/1.3 SDK – Design Studio Utility Pack

Github Source can be found here:

entmike/DesignStudio1.3UtilityPack · GitHub

As always, my Git repo with the source will be updated as well as an ready-to-install version.  Questions/Feedback always welcome.


Assigned Tags

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

      Have no idea what I am doing wrong but whenever I try to use this component I cannot get it to do anything.. And whenever I try to click it in the design pane it cannot be selected (only way to click it is via the outline window). Really want to use this any help is well appreciated. Michael Keep up the great work!  header menu.png

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Stav,

      Have you set your application theme to Blue Crystal?



      Author's profile photo Former Member
      Former Member

      oh my god. This works 100% on the popoverbutton Michael has created! but the header doesn't seem to be working correctly even after changing the theme:s I cannot resize it but I can see about 2 pixels of content now:p

      ill fiddle around with it a bit more see if I get any results

      Thank you Mustafa;)

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Stav,

      Based on your screenshot it looks like you've downloaded the old version from Mike's original repository.  You should download the latest versions from the SCN Design Studio SDK Development Community online repository.



      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      Thanks Mustafa,


      Agreed, you may wish to move to the newer iteration of these components that Mustafa recommended.  Also all the Fiori-type components rely on Blue Crystal theme by nature.

      Let me know if you still have issues!

      Author's profile photo Former Member
      Former Member

      Hey Michael+ Mustafa thank you for your help, I have now set all my projects to be using the Blue Crystal, the popover button works correctly but I just cannot seem to get this to work. I have also tried the SCN community SDK components (FIORI APP HEADER) but it gives me a similar problem.. I cannot resize it to see my menu items, I can only see the first one( in this case Home icon) and when I click right on the edge I can click and the second menu item pops down.. any ideas or things that I might be missing? here is a picture of it (maybe it will help things out a bit:

      (side note when I try to resize it nothing happens)


      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Stav,

      Since this component is intended to be used as a header of its parent container if you set the layout properties as shown below first, you can then play around as needed to change the positioning:


      Generally, you shouldn't set the Left or Right margins to auto, which is probably what is causing your issue.



      Author's profile photo Former Member
      Former Member

      I realised that if width and height were not both set to auto I couldn't change left+right margins(both at the same time!) thank you so much for your words of wisdom.

      I am wondering if other people experience silly issues like mine maybe it wouldn't be a bad idea if I would start documenting how to use some of these components (down to my level, for dummys:p)

      Author's profile photo R. Menger
      R. Menger

      How would one go about formatting (setting colors) of such a component?

      Edit: I'm using the Fioritoolbar from the newest SDK package (I assume it's just an updated version of the component described in this article)

      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      Hi Mike,

      Would be nice to be able to include some kind of corporate logo in the component (as "application header" do). Have you considered to include this enhancement in future component releases?


      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      Hi Mike,

      I am using the firori toolbar but I have an issue on the following scenario:

      the header contains an item

      when I click on the item (after clicking on the header to see it) the event handler (On Item Select) placed on headernavbar is fired 2 times. Really it take sense, once click for the header and other for the item, but both event are triggered only after clicking on the item (typically ypu ould expect once when click on header and another when click on item) so I am not sure about how to filter (bypass) the first call, as on all cases getItemClicked and getHeaderclicked contains values.

      Any idea?