You are on page 1of 154

Expert Guided Implementation for

SAP User Experience: SAP Fiori Day 2
Support from Experts for the implementation of SAP Fiori UX

Expert Guided Implementation schedule: SAP Fiori UX
Day 1

Day 2

Day 3

Day 4

Empowering lesson
Step-by-step guide to the
installation and configuration
of SAP Fiori Applications.

Empowering lesson
 Launchpad configuration
 Introduction to theme
designer
SAP Fiori Client

Empowering lesson
 Introduction to SAP Web IDE
the web based tool for
developing and customizing
SAPUI5 based applications

Empowering lesson
SAP Fiori end to end
Extensibility – How to add a
Custom field in OData and UI

(Web session, 2 h. in the morning)

(Web session, 2 h. in the morning)

Execution by customer
Customer configures SAP Fiori
Applications

Execution by customer
Configuration of Launchpad
and creation of custom themes

(Remote support in the afternoon)

(Remote support in the afternoon)

Execution by customer
Customer accesses SAP Web
IDE through SAP HANA Cloud
Platform

(Web session, 2 h. in the morning)

(Remote support in the afternoon)

(Web session, 2 h. in the morning)

Execution by customer
Customer extends an OData
service and UI to add a custom
field to an standard SAP Fiori
Application
(Remote support in the afternoon)

Goal of the day
 Customer has knowledge to
configure SAP Fiori
Applications

© 2012 SAP AG. All rights reserved.

Goal of the day
 Customer has Launchpad
and Theme Designer
configured

Goal of the day
 Customer enabled to start
using SAP Web IDE
development environment

Goal of the day
 Customer has added a
custom field to the standard
SAP Approve Request app

2

Agenda

Launchpad Introduction

Features and Capabilities

Users Customisation

Admin Customisation

Themes

SAP Fiori Client Android &
IOS

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

3

Introduction .

Fiori Launchpad Looks simple clean and stylish Single entry point to Fiori apps (tiles) Groups tiles for easy use New features: search across apps. All rights reserved. Customer 5 . active tiles and jam feeds © 2014 SAP AG or an SAP affiliate company.

Groups – Groups are a way of bundling tiles together. Customer 6 . Each one is a single entry to an application. this can be to group them by category or just to group your most used tiles. Applications can be added from the catalog to your Launchpad to make them easier to access © 2014 SAP AG or an SAP affiliate company. Active Tiles – These tiles have info graphic’s that denote data from the application. These range from mini graphs to just a summary count and all are dynamic. Catalogue – This is a list of all the applications available user based on there roles. All rights reserved.Concepts Tiles – This is how applications are represented on the Launchpad.

Features and Capabilities .

Personalization Add. Delete or group tiles Tiles can be moved at any point Create pre-configured groups and catalogues for the home page based on the users roles Apps can be managed based on roles and usage © 2014 SAP AG or an SAP affiliate company. All rights reserved. Customer 8 .

Application Search Capabilities Search allows you to look for particular applications in your catalogue. Customer 9 . Using search you can also see your recent searches and your recently launched applications. © 2014 SAP AG or an SAP affiliate company. All rights reserved.

this allows ease of use over all devices. © 2014 SAP AG or an SAP affiliate company. Customer 10 . All rights reserved.Responsive Design The design of the page will automatically adjust to the size of the screen.

User Launchpad Customisation .

User Launchpad https://<Host IP>:<Host Port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad. Customer 12 .html?sapclient=<your client>&sap-language=EN © 2014 SAP AG or an SAP affiliate company. All rights reserved.

Adding Tiles Deleting Tiles Rearranging Tiles Creating Groups Deleting Groups Adding Tiles to groups .

User: Adding Tiles To add new tiles you must: Fist click the menu button Now click the ‘Tile Catalog’ button © 2014 SAP AG or an SAP affiliate company. Customer 14 . All rights reserved.

All rights reserved.User: Adding Tiles To add an new application to your Launchpad click the add button Then select the group that you want this tile to be added to and click on ‚ok’ © 2014 SAP AG or an SAP affiliate company. Customer 15 .

Customer 16 .User: Adding Tiles Once added to the Launchpad a tick will replace the add button. © 2014 SAP AG or an SAP affiliate company. All rights reserved.

Adding Tiles Deleting Tiles Rearranging Tiles Creating Groups Deleting Groups Adding Tiles to groups .

Customer 18 .User: Deleting Tiles Use an extended click on the tile you wish to delete and drag the tile to the bin that has appeared at the bottom right of the screen. © 2014 SAP AG or an SAP affiliate company. All rights reserved.

Adding Tiles Deleting Tiles Rearranging Tiles Creating Groups Deleting Groups Adding Tiles to groups .

All rights reserved. Customer 20 . © 2014 SAP AG or an SAP affiliate company.User: Rearranging Tiles Use an extended click on the tile you wish to rearrange.

© 2014 SAP AG or an SAP affiliate company.User: Rearranging Tiles Drag the tile to the desired location and release your click. Customer 21 . The tile will be placed in the location denoted by the dashed outline of a square. All rights reserved.

Adding Tiles Deleting Tiles Rearranging Tiles Creating Groups Deleting Groups Adding Tiles to groups .

Customer 23 .User: Creating new groups To add a new group you must first open up the ‘Group Menu’ Fist click the menu button Here you can see a list of all the currently available and created groups. © 2014 SAP AG or an SAP affiliate company. Click the button ‚New Group’. All rights reserved.

All rights reserved. when finished name click enter to complete creating a new group.User: Creating new groups A new group will have now appeared and you can name the group by typing in the input box. © 2014 SAP AG or an SAP affiliate company. Customer 24 .

User: Renaming groups
Double click on the name of the
group you wish to change in the
‘Group Menu’.
Now the name is an input box
which you can change.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

25

Adding Tiles
Deleting Tiles
Rearranging Tiles
Creating Groups
Deleting Groups
Adding Tiles to groups

User: Deleting groups
With the ‘Group Menu’ open, use
an extended click on the group
you wish to delete. Drag the group
down to the bin in the bottom right
hand corner of the screen and
release.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

27

Adding Tiles Deleting Tiles Rearranging Tiles Creating Groups Deleting Groups Adding Tiles to groups .

Now simply select the tile click and select the group that you want to add the tile to. © 2014 SAP AG or an SAP affiliate company. All rights reserved. Customer 29 .User: Adding tiles to groups To add tiles to groups you can either select the correct group or you could also click on ‘Tile Catalog’.

the tile image will go to a tick once again. © 2014 SAP AG or an SAP affiliate company. Customer 30 . All rights reserved.User: Adding tiles to groups Once the tile is added to the group.

Configuration of Login and Logoff Screen .

As with the portal. the user has to pass through the login page. you need administrator rights on the system. To perform this configuration.Login Screen Configuration The Fiori Launchpad is the landing page for Fiori applications. All rights reserved. login screen after configuration Customer 32 . basic login page © 2014 SAP AG or an SAP affiliate company.

Navigate to default_host > sap > bc > ui5_ui5 > ui2 >ushell 3. Double click on ushell node © 2014 SAP AG or an SAP affiliate company.Login Screen Configuration The steps to be followed are as follow: 1. Customer 33 . All rights reserved. SICF transaction 2.

Customer 34 .Login Screen Configuration 1. All rights reserved. Click on the tab Error Pages 2. Select System Logon radio button and choose Configuration button © 2014 SAP AG or an SAP affiliate company.

3. 4. Enter /UI2/CL_SRA_LOGIN in the ABAP Class field.Login Screen Configuration 1. Under Logon Layout and Procedure section. Select the green tick. Select Define Service-Specific Settings radio button. © 2014 SAP AG or an SAP affiliate company. Customer 35 . select Custom Implementation radio button. 2. All rights reserved.

the login screen should appears as shown in the image below © 2014 SAP AG or an SAP affiliate company. All rights reserved. Customer 36 .Login Screen Configuration Once the configuration is complete.

Customer 37 . All rights reserved. Instead you can configure the page to be redirected to login page. © 2014 SAP AG or an SAP affiliate company.Logoff Screen Configuration By default log off screen would be set as below.

All rights reserved. Customer 38 .Logoff Screen Configuration 1. Login to system having proper authorization 2. Double click on logoff node © 2014 SAP AG or an SAP affiliate company. Enter transaction SCIF 3. Navigate to node /sap/public/bc/icf/logoff 4.

All rights reserved. Click on Save button to save your entries 6. Select the Redirection to URL radio button 4. Enter the redirection URL /sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fioril aunchpad. Click on green tick to accept the workbench request © 2014 SAP AG or an SAP affiliate company. Once the service loads. Navigate to Error Pages->Logoff Page 3.Logoff Screen Configuration 1. Customer 39 .html 5. select change mode 2.

All rights reserved.Logoff Screen Configuration After logoff. the page will be redirected to login page © 2014 SAP AG or an SAP affiliate company. Customer 40 .

Admin Launchpad Customisation .

Launchpad Configuration Steps – Process Overview © 2014 SAP AG or an SAP affiliate company. All rights reserved. Customer 42 .

and target mapping. . Customer 43 .Configuring the tiles for static app launchers. dynamic app launchers. and tiles and it is the standard tool for: .Launchpad Designer The Launchpad Designer is used to manage catalogues. groups. All rights reserved.Creating pre-configured groups and catalogues for the home page © 2014 SAP AG or an SAP affiliate company.

html?sap-client=<client>?scope=CUST © 2014 SAP AG or an SAP affiliate company.Launchpad Designer http://<Host IP>:<Host Port> /sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main. All rights reserved. Customer 44 .

Creating a User Role Creating a Catalog Creating Tiles Creating Groups .

All rights reserved.Admin: Creating a Role and Assigning it Now go to transaction PFCG. © 2014 SAP AG or an SAP affiliate company. Enter a unique role name and click ‘Single Role’ This will create a new role. Customer 46 .

All rights reserved. © 2014 SAP AG or an SAP affiliate company. Click the ‘User’ tab.Admin: Creating a Role and Assigning it Your Role has been created. Customer 47 .

Customer 48 . © 2014 SAP AG or an SAP affiliate company.Admin: Creating a Role and Assigning it Click on the menu button next to the ‘User ID’ field. All rights reserved.

© 2014 SAP AG or an SAP affiliate company. All rights reserved. Customer 49 . Click the Tick.Admin: Creating a Role and Assigning it Enter the name of the User you wish to assign the role too.

All rights reserved. then click the tick at the top.Admin: Creating a Role and Assigning it Click the tick next to the Users name. Customer 50 . © 2014 SAP AG or an SAP affiliate company.

All rights reserved.Admin: Creating a Role and Assigning it Now your user has been assigned your role. Click save and the ‘User’ tab light will turn green © 2014 SAP AG or an SAP affiliate company. You must now enter the from and to fields to denote the period of time in which the role is assigned. Customer 51 .

Creating a User Role Creating a Catalog Creating Tiles Creating Groups .

Click on the ‘Catalogs’ tab Then click the new button. Customer 53 . © 2014 SAP AG or an SAP affiliate company.Admin: Create a New Catalog Go to your Admin Launchpad now as you need to create a new catalog. All rights reserved.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.Admin: Create a New Catalog Enter the name and ID for your catalog. Click ‘Save’. Customer 54 .

Customer 55 . © 2014 SAP AG or an SAP affiliate company.Admin: Create a New Catalog Your Catalog is now created and empty. All rights reserved.

Select the Role menu. All rights reserved.Admin: Create a New Catalog Go back to the transaction PFCG now. Click on the ‘Menu’ tab. Click the new item button. © 2014 SAP AG or an SAP affiliate company. Customer 56 .

Admin: Create a New Catalog Use the list to select ‘Catalog Provider. All rights reserved. © 2014 SAP AG or an SAP affiliate company. Customer 57 .

All rights reserved. © 2014 SAP AG or an SAP affiliate company. Click the tick.Admin: Create a New Catalog Enter the Catalog ID you created in the Launchpad admin a few slides back. Customer 58 .

© 2014 SAP AG or an SAP affiliate company. Your Catalog has now been assigned to every one in your User tab.Admin: Create a New Catalog Click save to turn your ‘menu’ tab light green. Customer 59 . All rights reserved.

Creating a User Role Creating a Catalog Creating Tiles Creating Groups .

© 2014 SAP AG or an SAP affiliate company. Customer 62 . All rights reserved.Admin: Creating New Tiles On the Admin Launchpad select your catalog and click button ‚Tiles’ Click the new Tile button.

Customer 63 . All rights reserved.Admin: Creating New Tiles Now click on App Launcher Static © 2014 SAP AG or an SAP affiliate company.

All rights reserved. Customer 64 . © 2014 SAP AG or an SAP affiliate company.Admin: Creating New Tiles Now this new blank tile has been added to your catalog.

Admin: Creating New Tiles Do the same again to create a blank ‘App Launcher – Dynamic’ tile in your catalog. All rights reserved. © 2014 SAP AG or an SAP affiliate company. Customer 65 .

All rights reserved. Customer 66 .Admin: Creating New Tiles To create a blank Target Mapping Tile in your catalog click button ‚Target Mapping’ and then click ‚Create Target Mapping’ © 2014 SAP AG or an SAP affiliate company.

All rights reserved. © 2014 SAP AG or an SAP affiliate company. Enter the launchpad role for the application.Admin: Creating New Tiles Enter the Semantic Object and the Action we want the app to be able to do. Enter the launchpad instance and the Application Alias. Customer 67 .

Click OK. © 2014 SAP AG or an SAP affiliate company. All rights reserved. Customer 68 .Admin: Creating New Tiles Click Save .

All rights reserved. Customer 69 . © 2014 SAP AG or an SAP affiliate company. In the new window enter the Title and subtitle for your application. Icon .Admin: Creating New Tiles Click the ‚Tiles’ and select ‘App Launcher – Static’ to go to its options.click the browse button next to Icon.

Customer 70 . All rights reserved. © 2014 SAP AG or an SAP affiliate company.Admin: Creating New Tiles Select the icon you wish to appear on your Tile or leave blank to have no icon. Once an Icon is selected click OK.

or a product. All rights reserved. Customer 71 . They allow you to refer to objects in a standardized way.Concepts Semantic object Action Represents a business entity such as a customer. or create new semantic objects. #<semantic object>-<action>?<semantic object parameter>=<value1> © 2014 SAP AG or an SAP affiliate company.Admin: Creating New Tiles . Using semantic objects. You can either use semantic objects shipped by SAP. abstracting from concrete implementations of these objects. a sales order. you can bundle applications that reflect a specific scenario. Describes which operation (such as display or approve PurchaseOrders) is intended to be performed on a semantic object (such as Purchase Order or Product).

© 2014 SAP AG or an SAP affiliate company.Admin: Creating New Tiles With your icon selected it now appears in the icon box. Customer 72 . All rights reserved. Enter the Semantic object you want your application to navigate too and the action you wish it to perform.

Where Can I Find a List of Semantic Objects & Actions? For a list of all available semantic objects.Must be a verb (display. create. define) . All rights reserved. For actions there is no list.Syntax in camelCase (displayLeaveRequest) © 2014 SAP AG or an SAP affiliate company. you can access SAP transaction: /n/UI2/SEMOBJ_SAP The Semantic object should be intuitive to the app you are configuring. Customer 73 . however there are some guidelines to be followed: .

© 2014 SAP AG or an SAP affiliate company. All rights reserved. Customer 74 .Admin: Creating New Tiles Click save. Click OK.

all we need to do is create the target mapping tile for this to be able to take you to the desired Fiori app. © 2014 SAP AG or an SAP affiliate company.Admin: Creating New Tiles Your tile is now created. All rights reserved. Customer 75 .

Admin: Creating New Tiles Complete the same settings for the Dynamic tile. All rights reserved. Customer 76 . © 2014 SAP AG or an SAP affiliate company. The only difference with the options is where the tile gets the Dynamic Data from.

The only difference being the dynamic numbers which will work on an active account.Admin: Creating New Tiles When the setting have been applied to the Dynamic tile it will look like this. © 2014 SAP AG or an SAP affiliate company. Customer 77 . All rights reserved.

Admin: Creating New Tiles
Now we have both our tiled
applications set up and the target
mapping to guide them.
These will now feature in the
catalog for the assigned users
when they log in.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

78

Admin: Creating New Tiles
As you can see when we log in
you can see the applications in the
users catalog.
Add both tiles to the chosen group
as shown on the pictures.

We can also add these
applications to our My Home
group or any other we choose.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

79

Admin: Creating New Tiles
When we go to the Users
Launchpad you can see
the test applications
working.
The Dynamic application
has recognised it has 1
leave requests to approve.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

80

Creating a User Role Creating a Catalog Creating Tiles Creating Groups .

© 2014 SAP AG or an SAP affiliate company.Admin: Create a New Group Select the ‘Groups’ tab at the top of the page. Click the new group button. Customer 82 . All rights reserved.

Click ‘Save’. All rights reserved. © 2014 SAP AG or an SAP affiliate company. Customer 83 .Admin: Create a New Group Enter the title of your group and an ID for it.

As you can see its empty too.Admin: Create a New Group Your group is now created. Customer 84 . © 2014 SAP AG or an SAP affiliate company. All rights reserved.

All rights reserved. Customer 85 . Use the list to find ‘Gruppe’. Select the ‘Menu’ then click the add new button. On transaction PFCG in the role you created.Admin: Create a New Group This will now explain how to assign the group to a user. © 2014 SAP AG or an SAP affiliate company.

Click the tick. Now use the list to select the group you made a few slides back. © 2014 SAP AG or an SAP affiliate company. Customer 86 . All rights reserved.Admin: Create a New Group When the box pops up click on the search button next to ‘Group ID’.

All rights reserved.Admin: Create a New Group Now your group id is in the box. click the tick and then make sure you press ‚Save’ © 2014 SAP AG or an SAP affiliate company. Customer 87 .

Customer 88 . © 2014 SAP AG or an SAP affiliate company. when you click save the group will appear on his page. All rights reserved. If you wish to assign the role to anyone else go back to the ‘User’ tab and add their details in.Admin: Create a New Group Your group is now in the Role Menu. Because this role is assigned to our test user.

For this group that stat is empty as it has no assigned tiles. when trying to delete it you will just reset the group to how it is in the Admin launch pad. © 2014 SAP AG or an SAP affiliate company. As it is assigned on a role level it is non deleteable. All rights reserved.Admin: Create a New Group When you now log on your user you can now see the group there. Customer 89 .

Admin: Add Tiles
Click on the ‘Groups’ tab.
Highlight your group.
Click on the new tile button.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

90

Admin: Add Tiles
Use the indicated box to select
what catalog you wish to select
the tile from.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

91

Admin: Add Tiles
Use the pop up catalog list to
select for the catalog you want.
Either scroll down to the catalog
or search for it.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

92

© 2014 SAP AG or an SAP affiliate company. All rights reserved. Customer 93 .Admin: Add Tiles When you have your catalog content you will be able to see the apps you are able to add. Click the add tile button to place them in your group.

Admin: Add Tiles Once the tiles have been added you will see a green tick under them. All rights reserved. Now click the back button in the top left hand corner of the screen. © 2014 SAP AG or an SAP affiliate company. Customer 94 .

All rights reserved.Admin: Add Tiles As you can see your group now has the tiles attached to it. © 2014 SAP AG or an SAP affiliate company. Customer 95 .

Customer 96 . © 2014 SAP AG or an SAP affiliate company. All rights reserved.Admin: Add Tiles When you now log on to your user the applications will appear in the group.

Theme Designer .

or add your company's logo. is derived from the base theme. For example. Manual theming based on LESS and CSS © 2014 SAP AG or an SAP affiliate company. A custom theme created with the UI theme designer is always derived from an SAP standard theme (for example. SAP Blue Crystal). in turn. Customer 98 . Expert theming.UI Theme Designer overview UI theme designer allowes you to create your own themes to adapt the visual appearance of applications. you can change the colour scheme. Each SAP standard theme. All rights reserved. Key Capabilities: - Browser-based WYSIWYG editor - Build-in preview pages: Application previews and control overview pages - Different levels of theming: Quick theming.

version information and access to the logs • Target Pages: Allow for additional application to be loaded for preview • Applications: The applications that have been loaded into Theme Designer • UI5 Control Previews: By selecting the gear icon a number of controls can be added for theme previewing • UI5 Application Previews: By selecting the gear icon a number of UI5 applications can be added for theme © 2014 SAP AG or an SAP affiliate company. All rights reserved.The Left Pane • Theme: Option to create a new theme or save and build the current theme • Help: Provides a link to the help docs. Customer 99 .

The Preview Pane • Original: The original view of your application • Preview: Displays your modifications to the theme • Full Page: Closes the left and right panes so the preview can use the complete screen • Vertical View: The preview is shown vertically • Horizontal View: The preview is shown horizontally • Device: Preview can be shown as a Desktop. Customer 100 . All rights reserved. Tablet and Phone • Refresh: Refresh the loaded application © 2014 SAP AG or an SAP affiliate company.

All rights reserved. Customer 101 .Quick Theming • Provides access to the common LESS parameters used for the theme to allow for quick modifications • Applies to all supported UI technologies • The available parameters are independent of the chosen application • Changes affect many controls • No dependencies between parameters © 2014 SAP AG or an SAP affiliate company.

All rights reserved.Expert Theming • Greater number of LESS parameters than Quick editing provides • Parameters are specific to the chosen theme and application • Applies to only specific UI technologies • Parameters can be dependent on other parameters • Changes only effect a specific control or group of controls • Parameters can be filtered with the available options or by text © 2014 SAP AG or an SAP affiliate company. Customer 102 .

Customer 103 .CSS Theming • Allows for further customization of the theme that quick or expert do not provide • CSS and LESS can be used • LESS: Preprocessor of CSS which allows for parameter reference for values such as colors in CSS • LESS parameter • LESS Functions fade darken © 2014 SAP AG or an SAP affiliate company. All rights reserved.

© 2014 SAP AG or an SAP affiliate company. creating themes). You have to decide which services must be activated for the applications you want to use. all Internet Communication Framework (ICF) services are available in an inactive state. A given request (for example. All rights reserved. To be able to use the UI theme designer tool (for example. creating a new directory in the theme repository) is only accepted if it contains a valid XSRF token prohibiting protection against such attacks. Customer 104 . - ICF nodes: For security reasons. To protect your data privacy. we recommend you use https mode (secure browsing mode). - XSRF protection: The UI theme designer provides mechanisms to ensure protection against XSRF (Cross-Site Request Forgery) attempts.Security Aspects for UI Theme Designer - Network security:You can run the UI theme designer both in http and https mode. activate the following ICF nodes: /sap/public/bc/themes & /sap/bc/theming - Authentication and Authorization Checks: Authentication is required to access the UI theme designer.

• Activate the following Internet Communication Framework (ICF) service nodes: • • /sap/public/bc/themes /sap/bc/theming To perform this step. Customer 105 . All rights reserved. several prerequisites must be met. launch IMG activity Activate ICF service for UI theme designer. © 2014 SAP AG or an SAP affiliate company. • Implement SAP Note 1852401 . You access the IMG activity in the SAP Customizing Implementation Guide by choosing SAP NetWeaver UI Technologies UI Theme Designer Maintain Custom Themes Activate ICF service for UI theme designer .Theme Designer Prerequisites Prerequisites To be able to use the UI theme designer.

Theme Designer Prerequisites To be able to use the UI theme designer tool (for example. Customer 106 . activate the following ICF nodes (transaction: SICF) /sap/public/bc/themes & /sap/bc/theming © 2014 SAP AG or an SAP affiliate company. creating themes). All rights reserved.

All rights reserved. you must be assigned the relevant authorization object: Authorization object: /UI5/THEME ACTVT (Activity): 02 (Change) /UI5/THMID (Theme Id): * = all themes Administrators can assign the relevant authorization objects to specific users using transaction Role Maintanance (PFCG). update. Mozilla Firefox and Microsoft Internet Explorer (as of version 10) are also supported. We recommend you use Google Chrome to run the UI theme designer. Since themes are client-specific. Customer 107 . delete themes). the client you use to start the UI theme designer must be the same as the client of the theme repository.Theme Designer Prerequisites For write access to the UI theme designer (create. both need to run on the same server. © 2014 SAP AG or an SAP affiliate company. In addition.

All rights reserved. Customer 108 .Theme Designer Prerequisites • Create Role (transaction: PFCG) and select Single Role • In Authorizations tab select Change Authorization Data © 2014 SAP AG or an SAP affiliate company.

Click Save and select green tick in a pop up window © 2014 SAP AG or an SAP affiliate company. Customer 109 .Theme Designer Prerequisites • Select Manually and assign Authorization object: /UI5/THEME 1. All rights reserved.

Theme Designer Prerequisites • The THEME_DESIGNER_AUTHORIZATION should change to GREEN © 2014 SAP AG or an SAP affiliate company. Customer 110 . All rights reserved.

The authorization tab will appear green now. in the next window select generate. Customer 111 .Theme Designer Prerequisites • Save and click back button. All rights reserved. © 2014 SAP AG or an SAP affiliate company.

in our case “TABASCOT”. Customer 112 . and click ENTER and SAVE © 2014 SAP AG or an SAP affiliate company. All rights reserved.Theme Designer Prerequisites In the User tab enter the user name for the Fiori test user.

All rights reserved. Customer 113 .Theme Designer Prerequisites Go back to the “User” tab and click on ‚User comparison’ and then ‚Complete comparison’ © 2014 SAP AG or an SAP affiliate company.

All rights reserved.Theme Designer Prerequisites You have installed UI Add-on SP09 You have applied notes 2019136 .00 SP09 © 2014 SAP AG or an SAP affiliate company. Customer 114 .UI theme designer for ABAP: UI Add-on 1.0 SP09 You have applied notes 2026517 .Corrections for SAP NetWeaver UI Add-On 1.

Custom Theme To open the Theme Designer use transaction /n/UI5/THEME_DESIGNER Or use URL: https://<host address>:<host port>/sap/bc/theming/themedesigner Click on the ‘SAP BLUE CRYSTAL’ theme and click ‘OPEN’. Customer 115 . © 2014 SAP AG or an SAP affiliate company. All rights reserved.

Custom Theme Enter the URL for your fiori Launchpad. Enter a name for the Theme Enter a Name. Click ‘Add’. All rights reserved. © 2014 SAP AG or an SAP affiliate company. Customer 116 .

Custom Theme Now your test page has loaded in and appears on the left hand side of the screen. Change the name of the theme you are creating – go to theme in the top left corner and select save. All rights reserved. Change the name of ‚Theme ID’ and ‚Title’. Customer 117 . © 2014 SAP AG or an SAP affiliate company.

Drag the image for the logo to the box with a plus in. Click OK. Customer 118 . All rights reserved. © 2014 SAP AG or an SAP affiliate company.Custom Theme Click on the browse button next to Logo. Click on the image once uploaded.

Custom Theme As you can see the logo is now on the left hand side of the header bar. Click on the browse button next too Background Image. © 2014 SAP AG or an SAP affiliate company. Customer 119 . All rights reserved.

All rights reserved. © 2014 SAP AG or an SAP affiliate company. Click on the image once uploaded. Customer 120 . Click OK.Custom Theme Drag the image for the background to the box with a plus in.

Custom Theme
The background is now on your
page.
Deselect ‚Background Repeat’.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

121

Custom Theme
Click Theme.
Click “Save and Build”.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

122

Custom Theme
You can change the name for the
Theme here and the Vendor
name.
Click Save & Build.

© 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

123

© 2014 SAP AG or an SAP affiliate company. Click OK.Custom Theme Your theme has now been published. All rights reserved. Customer 124 .

Custom Theme To test the new theme retrieve the theme parameter from transaction /n/ui5/THEME_TOOL and append this parameter to the URL for your launchpad In transaction /n/UI5/THEME_TOOL click the “INFO” button beside your new theme: Copy the parameter only to the end of the client © 2014 SAP AG or an SAP affiliate company. Customer 125 . All rights reserved.

wdf. All rights reserved. Customer 126 .sap.sap.corp:55080/sap/ /sap/public/bc/themes/~client-800/ © 2014 SAP AG or an SAP affiliate company.Custom Theme Add this parameter to the URL for your launchpad with the ‘&’ symbol: https://t15tdc00.corp:55081/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sapclient=800&sap-language=EN&sap-theme=EGI_THEME@http://zmetdc00.wdf.

Custom Theme Here is a Red SAP theme: © 2014 SAP AG or an SAP affiliate company. All rights reserved. Customer 127 .

All rights reserved.UI Theme Designer http://scn.sap.com/docs/DOC-53179 How to setup your company logo in SAP Fiori launchpad http://scn.ThemeDesigner – more information SAP Fiori UX . Customer 128 .com/docs/DOC-55068 Create and Apply Custom Theme to SAPUI5 Application http://scn.sap.com/community/developer-center/front-end/blog/2013/09/19/create-and-applycustom-theme-to-sapui5-application © 2014 SAP AG or an SAP affiliate company.sap.

SAP Fiori Client .

It uses the same multi-channel SAP Fiori web application. built using the open source Apache Cordova framework. All rights reserved. Table: SAP Fiori Application load times © 2014 SAP AG or an SAP affiliate company. a native mobile app. a native application for Android and iOS devices. and provides more reliable asset caching (HTML.SAP Fiori Client Through the enhanced cache management features in the SAP Fiori Client. on iOS. CSS. JavaScript files and more) plus. an enhanced attachment viewing process. but users get more consistent performance The application. Customer 130 . renders SAP Fiori application content. SAP is delivering the SAP Fiori Client. It acts as an enterprise-enhancement to the mobile browser when SAP Fiori applications are running.

Fiori Client Android .

Fiori Client Android Click On the Google Play Application store. © 2014 SAP AG or an SAP affiliate company. Customer 132 . All rights reserved.

© 2014 SAP AG or an SAP affiliate company.Fiori Client Android Use the search function to search for ‘SAP Fiori Client’. All rights reserved. Customer 133 .

Customer 134 .Fiori Client Android Click on the fiori client App © 2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer 135 . All rights reserved.Fiori Client Android Click Install © 2014 SAP AG or an SAP affiliate company.

All rights reserved.Fiori Client Android Accept the App permissions. © 2014 SAP AG or an SAP affiliate company. Customer 136 .

© 2014 SAP AG or an SAP affiliate company.Fiori Client Android Open the Fiori Client. All rights reserved. Customer 137 .

Fiori Client Android Enter the URL for the Fiori Launchpad . Click OK. All rights reserved. Customer 138 . © 2014 SAP AG or an SAP affiliate company.

Fiori Client Android Enter your user logon details and click Log on. All rights reserved. © 2014 SAP AG or an SAP affiliate company. Customer 139 .

Customer 140 . © 2014 SAP AG or an SAP affiliate company. All rights reserved.Fiori Client Android Now you will be taken to your launchpad.

Fiori Client Android Use the menu button to access groups and the catalog. or log out. All rights reserved. Customer 141 . © 2014 SAP AG or an SAP affiliate company.

© 2014 SAP AG or an SAP affiliate company. Customer 142 . All rights reserved.Fiori Client Android Use a double tap on the screen to open a navigation menu and access to the applications settings.

Fiori Client IOS .

All rights reserved.Fiori Client IOS Click on the App Store © 2014 SAP AG or an SAP affiliate company. Customer 144 .

All rights reserved. © 2014 SAP AG or an SAP affiliate company.Fiori Client IOS Use the Search function to search of SAP Fiori Client. Customer 145 .

Customer 146 . All rights reserved. Then click install. © 2014 SAP AG or an SAP affiliate company.Fiori Client IOS Click on the Free Button.

All rights reserved.Fiori Client IOS Click on the Fiori Client © 2014 SAP AG or an SAP affiliate company. Customer 147 .

Customer 148 .Fiori Client IOS Center the URL for the Fiori Launchpad page. All rights reserved. © 2014 SAP AG or an SAP affiliate company.

© 2014 SAP AG or an SAP affiliate company.Fiori Client IOS Enter the login details for your user. Click Log on. All rights reserved. Customer 149 .

Fiori Client IOS You will now be taken to your Fiori Launchpad. © 2014 SAP AG or an SAP affiliate company. Customer 150 . All rights reserved.

All rights reserved. or to log off. Customer 151 .Fiori Client IOS Use the menu button to access the catalog and groups. © 2014 SAP AG or an SAP affiliate company.

© 2014 SAP AG or an SAP affiliate company.Fiori Client IOS Use two fingers and do a long click to open up a navigation menu. Customer 152 . All rights reserved.

2 h. 2 h. in the morning) What has been covered by the SAP Expert in the Empowering session:  Configuration of Launchpad and creation of custom themes (Web session. Customer enabled to configure the Fiori Launchpad and Theme Designer Customer 153 .Expert Guided Implementation: Checkpoint Day 2 Day 2 Empowering lesson Launchpad configuration  Introduction to theme designer SAP Fiori Client(Web session. All rights reserved. in the morning) Execution by customer Configuration of Launchpad and creation of custom themes (Remote support in the afternoon) What the customer will implement in the Execution session: Goal of the day  Customer has Launchpad and Theme Designer configured © 2014 SAP AG or an SAP affiliate company.

com SAP Expert During the execution part you have direct access to the Expert via telephone number to solve questions quickly. © 2014 SAP AG or an SAP affiliate company. All rights reserved.Expert Guided Implementation How to get help How to get help Customer Luke. Customer 154 .mcgovern@sap.

All rights reserved.Thank You! © 2014 SAP AG or an SAP affiliate company. .