Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata

 Fiori-Inspired List Report


 

Fiori-Inspired List Report Floorplan


Guides - Updated on Mar 03, 2016 18:57

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.

Use General Information -  Basic Page as the container.

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

 
 

You need both a THEME for changes that apply across transactions, and a flavor following the FLOORPLAN cookbook for a transaction specific changes. 

 

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 

 This is a cookbook on how to create a Fiori Inspired Flavor.  This is not a step by step guide.  You can use this cookbook and apply these concepts to any SAP Transaction when creating a Personas Flavor.

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.

 

 

 

 Filter Area/Header

 

The filter area offers the user the possibility to control the data that is displayed in the content area

  • The user can reduce the amount of items displayed using different filter criteria
  • The user can also select from predefined filter sets (so-called variants) to support different use cases

In order to create a screen that is more simplified you will start by hiding all the elements on the screen using SAP Screen Personas. 

This will give you a blank canvas to work with and customize.  Once everything is hidden the screen will look like this. 

 Now you will insert all the elements to make the Flavor Look like a Fiori Inspired.  The first thing you will do is insert some UI elements to make the screen more visually

appealing and look like a Fiori Screen. 

  • Background Image - Fiori_Gradient.png

After you have inserted and aligned the screen UI elements you will add the following for the Header:

  • Label
  • Input Field (F4 Text Box)
  • 2- Script Buttons 

Layout

 

 Style

 

 The Materials Text Field is F4 Text Box, because you want to be able to use F4 help when looking for a Material Number.  Here are the configuration for the

Text Field:

 

This Table/Field information is specific for the Materials Field, Transaction COOIS.  If you are working with any other transaction, you will need to find out the Table/Field information that is relevant to your transaction.

Final

The first screen should look like this when it's finished.

 

 

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:

Go
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();

 

Clear
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();

 

It is easier to record the script before hiding any of the screen elements.  Start recording the Go script by populating the Material number P-100 and Order type PP01.  You will leave the Order type pre-filled, while making the Material number dynamic.

Resources

  Fiori Misc.zipGray 34x34.zip

 Extract the images from the zip files.

 

 

 

  • No labels