Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member194736
Participant


Templates allow to create screens rapidly and consistently, following a pre-set design pattern. They provide a pre-made screen layout onto which you can drag & drop screen elements for a consistent appearance. You will be able to find a number of templates in the SAP Screen Personas Flavor Gallery to help you accelerate your Personas development project.

Templates were introduced in SP03 of SAP Screen Personas 3.0.

 

In this blog, we will highlight

  • Templates published in the Flavor Gallery

  • How to Download and Import Templates into your system

  • Instantiate Template in Flavors


 

Templates published in the Flavor Gallery


To see a list of templates published in the Gallery, you can limit the assets by the 'TEMPLATE' type in the url.

https://personasgallery-imagineering.dispatcher.us1.hana.ondemand.com/index.html#/?Type=TEMPLATE

 



Templates published by the SAP Screen Personas Content are available under the following categories

  • Fiori – Inspired - Tiles with a icon on the right top corner in gallery

  • Simplified - Tiles with a icon on right top corner in gallery


 

Fiori-Inspired Templates


These templates follow Fiori UX design guidelines as published @ https://experience.sap.com/fiori-design/

 

Fiori Titlebar


Template ID: FIORI_TITLEBAR

This template allows building a Fiori 2.0 application page header-bar with provision for ‘Back’ button.


Fiori Object Page Header


Template ID: FIORI_OBJECT_HEADER

This template allows building a Fiori 2.0 Object page header with provision for

  • Object name

  • Title

  • 2 action buttons

  • Image

  • 8 Attribute key and values

  • 1 Multiline description



Fiori Table Toolbar


Template ID: FIORI_TABLE_TOOLBAR

This template creates a Fiori 2.0 table toolbar with provision for eleven transparent icon-only buttons.
Recommended usage: Download icons with dimension of 16 X 16 pixels from Image Collection in gallery.


Fiori Footer Toolbar


Template ID: FIORI_FOOTER

This template creates a Fiori 2.0 application page footer with provision for

  • 3 transparent buttons

  • 1 Save button

  • 1 Cancel button


Recommended usage: Instantiate on screens without vertical scrolling to ensure fixed position and visibility.


Simplified Templates


These templates aim at providing a unified and simple look & feel.

The various templates available are

 

Titlebar


Template ID: TITLEBAR

This Template allows for creation of a consistent title bar with

  • Placeholder for back button

  • Centre aligned title

  • Script button for help



Header Toolbar


Template ID: HEADER_TOOLBAR

This template creates a header toolbar with provision for five transparent text buttons.

Recommended usage: Place just below the Titlebar template instance


Header Toolbar with Icon buttons


Template ID: HEADER_TOOLBAR_WITH_ICON_BUTTONS

This template creates a header toolbar with provision for

  • 8 icon-only buttons

  • 2 text buttons


Recommended usage: Place just below the Titlebar template instance

Icons with dimension 16x16 pixels from the Image Collection in the gallery.


Object Header


Template ID: OBJECTHEADER

This template creates an Object header with provision for

  • Title

  • Image

  • 4 rows of

    • Key, which can hold a label / text field

    • Value, which can hold a label / text field / drop down list

    • Description, which can hold a label / text field / drop down list / button





Object Facet 2x4 Layout


Template ID: OBJECTFACET_2x4

This template creates a 2x4 Object Facet layout with provision for

  • Title

  • 8 rows of

    • Key, which can hold a label / text field

    • Value, which can hold a label / text field / drop down list





List Report Header


Template ID: LISTREPORT

This template creates a list report header with provision for

  • 4 columns of attribute key and values

  • 1 transparent button

  • 1 emphasized button



Section Header Title


Template ID: SECTION_HEADER_TITLE

This template creates a section title bar with text and a separator line


Key Value Description Layout


Template ID: KEY_VALUE_DESCRIPTION

This template creates a layout for attribute

  • Key, which can hold a label / text field

  • Value, which can hold a label / text field / drop down list

  • Description, which can hold a label / text field / drop down list / button



Select Options


Template ID: SELECT_OPTIONS

This template creates a layout for Select options with

  • Key, which can hold a label / text field

  • Start range, which can hold a text field

  • End range, which can hold a text field

  • Button, to open 'Select options' dialog 



Select Options - Miniature


Template ID: SELECT_OPTIONS_MINI

This template creates a condensed form for the Select options with provision for

  • Key, which can hold a label / text field

  • Value, which can hold a label / text field / drop down list

  • Button, to open 'Select options' dialog 




Here are some examples of flavors modified using the Templates published in the Gallery.




How to Download and Import Templates into your system


In order to download a template, click on the Downloads icon tab on the Template information page.



To import the template,

  1. Go to /PERSONAS/ADMIN transaction in ECC system.

  2. Launch template maintenance screen by clicking on ‘Display/Search’ button under ‘Template Maintenance’ group box.

  3. Click on ‘Import’ button in application toolbar.

  4. Select the downloaded template .zip file and select ‘Open’.

  5. In the pop-up dialog on confirmation to overwrite existing objects, select ‘Overwrite all existing GUID records’ and click ‘OK’.


The template is imported successfully.

 

Instantiate Template in flavors


In Personas 3.0 client,

  1. Enter edit mode of the desired flavor and select UserArea control. This is to set UserArea as the parent container for the new template instance.

  2. Select ‘Design’ menu.

  3. Click on ‘Add Template’ ribbon button. Template selection dialog appears.

  4. Expand the template group namely ‘Fiori-Inspired’ or ‘Simplified’.

  5. Select the desired template and click on ‘Insert’ button.


The template is instantiated on the user area. Reposition it as required.

Subsequently drag and drop the UI controls on the placeholders in the Template.

 

Hopefully this overview of the published Templates, gets you to a good starting point in creating a consistent look and feel across all the screens in your flavor.

If you have suggestions or improvements that you would like to see in Templates, please send feedback to sapscreenpersonas@sap.com

 

2 Comments