Getting Started with Templates in SAP Screen Personas Flavor Gallery

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 16×16 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 2×4 Layout

Template ID: OBJECTFACET_2x4

This template creates a 2×4 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