Identify common layouts and floorplans

[xak]

https://experience.sap.com/fiori-design-web/get-started/#layouts-floorplans-frameworks

While the library is intended to allow for flexible layouts options to create custom interfaces, there are common patterns that should be available as starter templates.

Layouts

• Full width (landing)
• App sidebar (category landing – 2 column)
• Content sidebar (list report drill down – 2||3 three column)
• List edit sidebar (slide out side panel – 2||3)
• Full width overlay (window takeover)

Each layout should consider shell-level elements, fixed element options, overflow scrolling, and responsiveness.

Floorplans

• Launchpad
• Dashboard/Overview
• List report
• Multi-instance - can you define this?
• Object page
• Wizard
• Worklist

Each floorplan should consider placement of navigation, actions, and responsiveness.

[xak]

@jeannewalters Here is a very high-level story that could use some input.

[jeannewalters]

@LeoT7508 @Jagoooo I went through the existing demo pages and added some suggestions for additional components and pages below. These ideally should be interactive and responsive:

Launchpad - we have a bunch of examples of this so maybe we just genericize one https://app.zeplin.io/project/5af44f6dcc8449a90ddad8e8/screen/5b05b65f958189c72e949e38

Dashboard/Overview

Object detail

• [x] Breadcrumb
• [x] Title and Preview/Cancel/Save buttons
• [x] Left nav with menu that expands and collapses
• [x] Localization switcher that expands to show Default Application Language option and Translation Languages (see Jeanne)
• [x] Left panel (1/3 page) that has read only fields
• [x] Top "Detail" panel (2/3 page) that has all form input fields
• [x] Table panel at the bottom of the page with toolbar including add new item to table
• [ ] Responsive (FUTURE)

Object Detail - Localized

• [x] Localized form input fields
• [x] Localization switcher that expands to show Default Application Language option and Translation Languages

Object Detail with Read Only Detail

• [x] Read Only Detail @LeoT7508 This looks like a good way to show the difference between read only header area that we saw in Kyma and the form/read only combo we usually have.

Table (update existing demo page) Add the following:

• [x] Header
• [x] Left nav with menu that expands and collapses
• [x] Toolbar - toolbar showing sort on columns, search, filters selected, add new item button and #items - we can reuse this from the Table Starter Page
• [x] Update pagination
• [ ] Responsive (FUTURE)

Tree (update existing demo page) Add the following:

• [x] Header
• [x] Left nav with menu that expands and collapses
• [x] Toolbar - toolbar showing add new item
• [x] Drag/drop inside tree - this could be very helpful
• [x] Pagination
• [ ] Responsive (maybe FUTURE)

Tiles (update existing demo page)

• [x] Header
• [x] Left nav with menu that expands and collapses
• [x] Toolbar - toolbar showing add new item and # of tiles with pagination
• [ ] Responsive (FUTURE) - it seems to have issues on the demo page - too many columns @Jagoooo @LeoT7508 Could this be where we show product Image tiles?

List

• https://experience.sap.com/fiori-design-web/work-list/ @benjaminbetz @LeoT7508 Interestingly, the mobile version of this list page in Fiore is a card/tile rather than a scrollable table.

This is the same as a table, we don't need this.

Multi Instance page - See https://experience.sap.com/fiori-design-web/multi-instance-handling-floorplan/

[LeoT7508]

@jeannewalters @Jagoooo

Looks good to me. Will there be wires? Or I'll just work from the list?

[LeoT7508]

@xak @Jagoooo @jeannewalters

I made some edits to the list Jeanne made. I also need more information revolving around the Launchpad & Dashboard/Overview pages, I don't have any real data to add here and the different teams I've reached out to don't have anything for these screens yet either. So will we shelf this until we have something real to add? Or will we make up something?

Newest design sheets for Floorplans can be found here:

https://app.zeplin.io/project/5b23c972a7bb309e08b88e95/dashboard?seid=5b2d2a140473da4f369473bc