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.

• Design Studio SDK (1.3 SP0 & SP1) – Popover Buttons
• Design Studio SDK (1.3) – Fiori-like LaunchPad (aka sap.m.TileContainer)
• Design Studio SDK (1.3) – Databound and Colored KPI Tile Set using SDK Launchpad

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.

Enjoy!