Last Update: Regina Sheynblat

Fiori-Inspired List Report Floorplan

Guides - Updated on

Intro

In showing you how to create Fiori inspired look and feel, you will use Transaction COOIS to create a flavor that is inspired by the Fiori List Report Floorplan. 

In SAP, we distinguish between tables and lists.  Both usually contain homogeneous data, but lists generally have rather basic data, where the data in table tends to be more complex.   The list report allows the user to work with large lists of items and take action. This combines powerful means to filter large lists of items with different ways to display the resulting item list. You can only use the list report in the full-screen layout. 

The full screen layout lets you exploit the full width of the screen. Use this layout for apps that need to display large amounts of data, large visualizations, or wide tables.

Usage

 Floorplan vs. Theme

Use the THEME if:

• You want to change the look and feel of EXISTING controls across multiple screens.
• If you are planning to use letterboxing to accommodate the different screen sizes in your IT Infrastructure.

Use Floorplan if:

• You want to create new controls.
• Simplify or streamline transactions 
• Modify look and feel of tables or grids
• Create scripts

Structure

In order to be able to create Flavors you need to understand the structure of an SAP page.  This will help you latter in either flavoring one screen or combining multiple screens together.  

.   

Full Screen Layout 

In order to do a Fiori Inspired Flavor you will need to simplify the transaction by hiding the unnecessary fields and creating headers, labels and text boxes that will perform the needed function.  For the purpose of this example, you will only concentrate on the Materials Field.  You will need to create 2 scripts, one that looks up a material number and one that clears it from the created text box.  

The following SAP Screen Personas flavor is inspired by the Fiori List Report Floorplan.

You will start with a transaction that looks like the one on the left, once you have Personified it using SAP Screen Personas 3.0 you will have a screen on the right.  You can apply the same principal to any transaction in SAP. 

For example, if you are Personifying Transaction VA05N, you can use Order Type in the Header instead of Material Number to limit the entries in the List of Sales Orders.

List Report

Once you click the GO button, a table for the selected Material number will appear. Once you have created a Fiori inspired flavor for the first screen you need to reproduce the same thing on the second screen for Order Info System - Order Headers. 

 The same two scripts that you have created in the previous screen, Lookup and Clear you will use in this screen. In order for the screens to look consistent when the user clicks from screen to scree, you will want to re-create the same header as you did on the previous screen.  As you can see from the screen shot, the list report does not have any header in its original state, so to re-produce the header that you have created on the first screen you need to create some space. 

Hide all the headers except the System Toolbar.  You will need the Back Button from that Toolbar.  Once you hide all the headers you are left with the grid.

You need to create some space by moving down the grid to design the new header.  Make sure you select the grid when trying to move it down.

 You would do exactly the same thing if you are working with any other list report, for example VA05N - List of Sales Orders.

Once you have moved the grid, you have some space to work with to re-create the header. 

 Move the Back Button to your header and change the Icon of the back button.

See the header dimensions above.

Once you added all the elements for the Header, you will only need one Additional Label to complete your Flavor.

Layout

 Style

Final

After the toolbar is hidden and the screen is formatted the final screen should look like this.

Scripts

As mentioned before, you will need two scripts.  First script will look up the Material number (Go) and the second script is to clear the Material number form the Material Text Field.

Example for the Lookup (Go) Script and Clear Script:

var materialnr = session.findById("wnd[0]/usr/ctxtPersonas_1448921387742").text;
session.findById("wnd[0]/usr/tabsTABSTRIP_SELBLOCK/tabpSEL_00/ssub%_SUBSCREEN_SELBLOCK:PPIO_ENTRY:1200/ctxtS_MATNR-LOW").text = materialnr; 
session.findById("wnd[0]/usr/tabsTABSTRIP_SELBLOCK/tabpSEL_00/ssub%_SUBSCREEN_SELBLOCK:PPIO_ENTRY:1200/ctxtS_AUART-LOW").text = "PP01";
session.findById("wnd[0]/tbar[1]/btn[8]").press();

session.findById("wnd[0]/usr/tabsTABSTRIP_SELBLOCK/tabpSEL_00/ssub%_SUBSCREEN_SELBLOCK:PPIO_ENTRY:1200/ctxtS_MATNR-LOW").text = "";session.findById("wnd[0]/usr/tabsTABSTRIP_SELBLOCK/tabpSEL_00/ssub%_SUBSCREEN_SELBLOCK:PPIO_ENTRY:1200/ctxtS_AUART-LOW").text = "PP01";session.findById("wnd[0]/tbar[1]/btn[8]").press();

Resources

  Fiori Misc.zipGray 34x34.zip

 Extract the images from the zip files.