Has anyone ever seen a SAP Fiori Launchpad layout like this?

Discussion Forum SAP Fiori Design Has anyone ever seen a SAP Fiori Launchpad layout like this?
Viewing 6 posts - 1 through 6 (of 6 total)

I am writing in regards to the SAP Fiori launchpad layout tiles. I am wondering if this layout is possible with the front end code that SAP Fiori currently uses. Have you ever seen anyone manipulate the CSS and Javascript on the front end to something like the layout attached? If so, pointing me to any resources or examples to help make this happen would be much appreciated! Thank you!

SAP_Concept

Chief Designer
SAP SE

Hi,

you can come closer to the design you are showing here using an Overview Page (https://www.youtube.com/watch?v=0_gpY1f1vPc). The Overview Page is a floor plan that will become available with the new release of the UI Add-On (UI-Addon 2.0 SP01 (1.32) on October 28, 2015) and that offers you the possibility to mesh up information from different sources, of both, analytical and transactional nature.

Overview Page

The Overview Page

The home page of the Fiori Launchpad just contains tiles representing the favorite applications of a user across all roles of the user. To keep the home page clean and simple we only allow tiles on it and no cards or more complex information (compare it to the home page of a mobile device, e.g. iOS). The Overview Page is now one level deeper, specific to one role of the user. The Cards on the Overview Page are more complex and offer more functionality than the simple one-click tiles on the home page.

UI Architecture

The overview page offers information relevant to a certain domain or role. It sits between the home page (favorite apps for a user) and the applications.

The Overview Page contains cards that can be of different size and that offer more detailed information than the tiles on the home page of the Fiori Launchpad. Today, the cards on the Overview Page are laid out in a way similar to Pinterest but going forward, we will explore also other types of layouts.

The Overview Page is delivered as a so-called Smart Template, which means that you don’t have to implement the frontend code but you only define the data and annotate it, the UI is then generated using a Web IDE plug-in.

Today, we offer several standard cards for lists, stacks, charts, and images. But you would also be able to implement you own card and add it to the page.

The following things in your design will not be possible in the Over View Page:

  • The Profile Card on the left side of your design will not be possible like this. It seems to be a mixture between the ME area that we plan in Fiori 2.0 and a link list.
  • My Team Card on the bottom would look different as it would be a vertically aligned list card.
  • Scrolling Banner would not be possible, but we would be able to show an image card with one static image.
  • The launch tiles in the bottom right, you would have to implement as an image card most likely.
  • The notifiers on all of the cards is not possible and also not planned. You would be able to highlight issues within a card as part of the content.

A user could directly navigate to an Overview Page bypassing the home page if you directly give him the link to it. The Overview Page is treated just like any other app and should be directly addressable through a link. Using the variant mechanism on top of the Overview Page you could even provide different variants to different users.

I hope this helps.

Best regards

Kai

Acclimation Pty Ltd

Hi Kai,

Thanks for sharing your insight regarding Fiori Overview Page. I am also very interested in this new UI component and want to try it. But, it seems I can only see it at here but not in SAPUI5 SDK, API, or UI explore web pages. Hopefully SAP will update these web sites soon.

Another question is, ok now Fiori OVP will be the first page for user to start the work. How this OVP is going to be integrated into current FLP? The second picture you showed in your post, the page looks like Fiori 2.0. Is there any upgrade plan for current customers who already implemented FLP? Your feedback would be very appreciated. Cheers.

Kind regards,

Nick

Chief Designer
SAP SE

Hi Nick,

as far as I know the Overview Page is available through the latest UI-Addon and UI5 1.32. It will not be available as individual controls but as plugin into Web IDE. There you can select a data source and annotations and the Page will be generated as a so-called “Smart Template”.

Overview Pages can be integrated like any other app. So there is no special configuration or deployment but it is an app that can be called from the FLP as a tile, link or using the search.

If the user wants to make a specific Overview Page his start page he can call the direct link to that app (as with any app). This could be done as a browser favorite or a link in a portal or by sending the URL as icon to the device homepage. So there is no need to do something special on the FLP Home Page. A user could also have multiple Overview Pages for different topics he is working on.

Best regards

Kai

 

Acclimation Pty Ltd

Hi Kai,

Thanks for your explanation. Now, I understood that OVP can be created via WebIDE plug-in and “Smart Template” function.

 

Kind regards,

Nick

Chief Designer
SAP SE

Hi,

yes. As I learned yesterday at Teched, as it is still experimental, you will have to enable the plugin from the plugin list in Web IDE. It will not show up in the template list automatically.

Best regards

Kai

Viewing 6 posts - 1 through 6 (of 6 total)
 

The forum ‘SAP Fiori Design’ is closed to new topics and replies.