Skip to Content

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

 

FlavorGalleryTemplates.png

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

  • Fiori – Inspired – Tiles with a BlueP.pngicon on the right top corner in gallery
  • Simplified – Tiles with a YellowP.png 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.

FioriTitlebar.png

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

FioriObjectHeader.png

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.

FioriTableToolbar.png

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.

FioriFooter.png

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

Titlebar.png

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

HeaderToolbar.png

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.

HeaderWithButtons.png

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

ObjectHeader.png

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

ObjectFacet.png

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

ListReport.png

Section Header Title

Template ID: SECTION_HEADER_TITLE

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

SectionHeader.png

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

KeyValueDesc.png

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 

SelectOp.png

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 

SelectOpM.png

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

3.FioriTemplates.png

4.SimplifiedTemplates.png

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.

Download.png

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

 

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Oleg Bulanov

    Hi Vandana,

    I can easily add templates from SAP Gallery to my flavors, save the flavor, and then it is working fine after the first save.

    However when I open the flavor again in edit mode it seems to be corrupted: I can not select a single control on the screen, adding a new control renders the screen to be blank, sometimes Personas hangs up.

    It happens with all templates I tried to use so far.

    Our system is HANA 1610.

    Any idea what’s wrong?

    Thank you,

    Oleg Bulanov.

    (0) 

Leave a Reply