Theme Designer for SAP Fiori (MF4)

Building Block Configuration Guide
SAP Fiori apps rapid-deployment solution
Document Version: 2.0 – 2016-01-15
Theme Designer for SAP Fiori (MF4)
CUSTOMER
Typographic Conventions
Type Style
Description
Example
Words or characters quoted from the screen. These include field names, screen titles,
pushbuttons labels, menu names, menu paths, and menu options.
Textual cross-references to other documents.
2
Example
Emphasized words or expressions.
EXAMPLE
Technical names of system objects. These include report names, program names,
transaction codes, table names, and key concepts of a programming language when they
are surrounded by body text, for example, SELECT and INCLUDE.
Example
Output on the screen. This includes file and directory names and their paths, messages,
names of variables and parameters, source text, and names of installation, upgrade and
database tools.
Example
Exact user entry. These are words or characters that you enter in the system exactly as
they appear in the documentation.
<Example>
Variable user entry. Angle brackets indicate that you replace these words and characters
with appropriate entries to make entries in the system.
EXAMPLE
Keys on the keyboard, for example, F 2 or E N T E R .
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Theme Designer for SAP Fiori (MF4)
Typographic Conventions
Document History
Version
Date
Change
1.0
2015-07-06
First version.
2.0
2016-01-15
General Updates
Added chapter ‘Transportation’
Added chapters for the Demo Cloud Edition
Document History
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
3
Table of Contents
1
2
2.1
2.2
3
3.1
3.2
4
Purpose
5
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
Start
2.1.1
Access the SAP Fiori, Demo Cloud Edition
2.1.2
App Selection and Launching UI Theme Designer
Customize Theme
2.2.1
Create Your Own Theme
2.2.2
Save Your Theme
2.2.3
Export a Theme
2.2.4
Import Theme
2.2.5
Manage and Assign Theme
6
6
6
7
10
10
18
19
20
21
Customize Themes On-Premise
Prerequisites
Customizing a Theme
3.2.1
Access the Theme Designer
3.2.2
Selecting a Base Theme and Preview
3.2.3
Create Theme
3.2.4
Save Your Theme
3.2.5
Manage Theme
3.2.5.1 Deriving the URL Using the Customer Theme Maintenance
3.2.5.2 Deleting a Theme
3.2.5.3 Download a Theme
3.2.5.4 Upload a Theme
3.2.5.5 Transport a Theme
25
25
26
26
26
27
28
29
29
30
31
31
32
Transportation
Table of Contents
33
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
4
1
Purpose
The UI theme designer is SAP's browser-based tool for cross-theming scenarios. It is a single tool for theming and
branding SAP's key user interfaces. The user can thus stay in one environment and brand/theme across multiple
UI frameworks. Use it to easily build your corporate identity themes by modifying one of the theme templates
provided by SAP.
The purpose of this document is to describe the general steps required to access the Theme Designer and use its
functionalities. You can, for example, change the color scheme (background and text colors) or add your
company’s logo.
The document covers the customizing of themes in the cloud (using the SAP Fiori, Demo Cloud Edition) and in an
on-premise environment.
Theme Designer for SAP Fiori (MF4)
Purpose
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
5
2
Customize SAP Fiori Apps in the Cloud
(SAP Fiori, Demo Cloud Edition)
With the SAP Fiori, Demo Cloud Edition, you can try a selection of transactional apps that apply the SAP Fiori UX
to sample data and enjoy a beautiful user experience that is personalized, responsive, and simple. You can
experience apps across different lines of business.
This guide will walk you through the steps to apply your corporate brand, or customize the SAP Fiori CSS files to
get a pixel-perfect result using the UI theme designer in the SAP Fiori, Demo Cloud Edition.
2.1
Start
2.1.1
1.
Access the SAP Fiori, Demo Cloud Edition
Access the SAP Fiori, Demo Cloud Edition using the following link:
Link
https://www.sapfioritrial.com/
2.
On the Experience SAP Fiori UX page, choose the See it in action button.
3.
Choose I agree in the Terms of Use pop-up.
The Launchpad for the SAP Fiori, Demo Cloud Edition is displayed.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
6
Result
You have accessed the SAP Fiori, Demo Cloud Edition. You can now browse through and check out the diverse
SAP Fiori apps as a demo user.
2.1.2
App Selection and Launching UI Theme Designer
Use
In this step, you select an app to be customized in the UI Theme Designer. This app acts as a preview of the work
you are doing. The theme that is created in the theme designer affects the whole Fiori Launchpad, all apps which
are launched from there and not only the selected one.
Procedure
1.
On the Launchpad, choose
from the top menu.
The Customize and Extend SAP Fiori in the Cloud screen is displayed.
2.
Choose Get started.
3.
A log on screen is displayed. Provide your credentials and choose Log On.
Note
If you have no user yet, choose Register and walk through
the registration process.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
7
4.
After logging on, your personal SAP Fiori, Demo Cloud Edition Launchpad is displayed.
5.
On the Launchpad, choose
from the top menu.
6. Choose Customize Theme from the dropdown.
7.
From the Select an item to customize your theme pop-up, choose an app from SAP Content tab, In this
example, the My Inbox app is used.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
8
Note
If you choose an app from the SAP Content list, the original SAP Fiori app will be displayed. Apps will
appear in the My Content list once you have extended an app. This scenario is described in the
configuration guide 'SAP Fiori App Extensibility and Customization (MF8)'.
8. On the Customize Theme screen, launch the UI Theme Designer by choosing Launch Theme Designer.
9. The UI Theme Designer is launched in a new window. Do not close the Customize theme window since
you need it later on again.
Result
You have selected an app of your choice and launched the UI Theme Designer.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
9
2.2
Customize Theme
2.2.1
Create Your Own Theme
Use
The following section provides an insight into some of the various theming features the UI Theme Designer offers.
As an example, we will create a red and a blue ("Bavarian") theme.
Procedure
1.
In the UI Theme Designer, select the sap_bluecrystal theme ID and choose Open.
2.
Your previously selected app (e.g. the My Inbox app) is opened in a preview and ready for theme
customization.
Note
On the right-hand side of the screen, you have several theming modes:
o
Quick theming: allows access to general parameters that take effect across different UI
technologies
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
10
o
Expert theming: allows access to all parameters defined by the current preview, concerning UI
technology and Base Theme
o
Palette: allows to predefine often used/needed colors for easy reuse in Quick, Expert and CSS
theming
o
3.
CSS: here you can add your custom CSS
Choose the Expert mode on the right to get a full list of available parameters:
.
Note
There is a description available for each parameter. Hover over them to display the description.
4.
Maintain the following parameters:
Theme Parameter
Value
sapBackgroundColor #D93414
sapBaseColor
#7A343C
sapBrandColor
#AF1313
Note
You can maintain the colors by using the color picker. Choose the square next to the Value field to open
the color picker. The theme parameters maintained by you are marked in bold letters.
If you want to revert your changes for individual parameters, hover over the space left of the value
column. An icon appears. Click it and select the Reset to Original Value checkbox.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
11
The result for the red theming looks like this:
5.
Add a company logo.
For the theme parameter sapCompanyLogo, choose the square next to the Value field.
6. Choose the + symbol above the ‘Drop image files here from your desktop’.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
12
7.
Choose the file from your local file system and upload it. The file is displayed in the preview:
Note
For the exercise, you can use the following picture. Save it to your local system and use it in the Assign
Image step.
You can also drag and drop this image file to the "Drop image files here from your desktop" tile in the popup.
8. Select the image in the Assign Image dialog box and choose OK.
9. Check that your logo has been added.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
13
10. Go the Palette section by clicking the button on the right.
11. In the Palette section on the right, enter a new parameter (e.g. myColor) and provide a color (e.g.
#00BFFF).
12. Choose Enter, or click
to add the new parameter to the Palette.
You created your own parameter
Note
You can assign your color to the individual theme parameters in the Quick and Expert mode sections
when choosing the square next to the Value field. Find your color below the color picker.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
14
13. Go the CSS section by clicking the button on the right.
14. Choose Add Custom CSS (please also consider the Note text when you add your custom CSS).
15. In the CSS code editor pane, enter the following CSS code (copy and paste the code from the description
below):
Description:
CSS Code
.sapUshellContainerTitle{color:#1431D9}
Explanation

Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
Design before applying the changes
changes the color
of the title above
the Fiori tiles on
the Launchpad
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
15
.sapUshellTileBase
.sapUshellTileBaseTitle {color:
#980000;}

changes the color
of the tile's title
and of the icon

changes
background color
and shape of the
Fiori tiles on the
Launchpad

with using
"@myColor", you
use the
previously
created color
from the Palette

changes the
background color
of selected icon
tab filters in Fiori
apps
.sapUshellTileBase
.sapUshellTileBaseIcon{color:#980000;}
.sapUshellTile{ background-color:
@myColor !important;
-webkit-box-shadow: 7px 7px 20px 0px
rgba(0,0,0,0.3); /* Safari and Chrome */
-moz-box-shadow: 7px 7px 20px 0px
rgba(0,0,0,0.3); /* Firefox */
-ms-box-shadow: 7px 7px 20px 0px
rgba(0,0,0,0.3); /* Internet Explorer */
-o-box-shadow: 7px 7px 20px 0px
rgba(0,0,0,0.3); /* Opera */
box-shadow: 7px 7px 20px 0px
rgba(0,0,0,0.3); /* CSS3 */
-webkit-border-top-right-radius: 2em
!important;
-webkit-border-bottom-left-radius:2em
!important;
-moz-border-radius-topright: 2em
!important;
-moz-border-radius-bottomleft: 2em
!important;
border-top-right-radius: 2em !important;
border-bottom-left-radius: 2em
!important; }
.sapMITBSelected
.sapMITBFilterDefault{backgroundcolor:@myColor}
16. Choose Apply.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
16
17. In the preview window, check the results. To access the Launchpad, choose the Home or Back button.
18. See the results of your changes in the Launchpad.
Result
You have created your own theme.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
17
2.2.2
Save Your Theme
Use
In the UI Theme Designer, you can save any theme created no matter if it is in an intermediate state or not.
Procedure
1.
In the UI Theme Designer, choose Theme → Save Draft from the top menu.
2.
In the Save Draft dialog box, maintain a Theme ID (e.g. "mytheme") and Title (e.g. "My Theme").
3.
Confirm your settings with OK.
4.
Confirm the Draft Saved dialog box with OK.
Result
You have saved your theme.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
18
2.2.3
Export a Theme
Use
This step describes how to export a theme from the UI Theme Designer to your local machine. Once the theme
has been exported, it can be uploaded to the SAP Fiori Cloud. There it can be assigned as a default theme in the
Fiori Launchpad.
Procedure
1.
In the UI Theme Designer, choose Theme → Export from the top menu.
2.
In the Export dialog box, you can change the title of the theme if desired.
3.
Choose OK.
A zip file is downloaded.
4.
Confirm the Export completed dialog box.
Result
You have exported the theme to your local machine.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
19
2.2.4
Import Theme
Use
To make your theme available and to apply it to the Fiori Launchpad, you must import your theme.
Procedure
1.
On the Customize Theme page, choose the Import Theme option.
2.
Enter your credentials and choose Browse.
A dialog box is displayed. Go to the zip file exported in the previous step and select it. Choose Open in this
dialog box, once you have selected the appropriate file.
3.
Choose Import to import your theme.
4.
Once the import has finished, the following dialog box is displayed. To check out and walk through the
details of the next section (Manage Theme) as well, choose Revert.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
20
Note
If you choose the Keep option the imported theme will be assigned to the SAP Fiori Launchpad right away.
You then can skip the next step Manage Theme. When you choose the Revert option, the theme will be
created as well. However, it is not yet assigned to the SAP Fiori Launchpad. You need to carry out the
steps as described in the next step Manage Theme.
Result
You have uploaded your theme to the SAP Fiori, Demo Cloud Edition environment.
2.2.5
Manage and Assign Theme
Use
With the Manage Theme option, you can apply your created theme to the Fiori Launchpad. If you have imported
multiple themes, you can choose which one to be applied in the Fiori Launchpad and you can update or delete
existing themes.
Procedure
1.
On the Customize Theme page, choose the Manage Theme option.
2.
The Themes page is displayed showing the default themes and your imported theme on the left.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
21
Note
This icon
indicates which theme is currently assigned to the SAP Fiori Launchpad.
The default themes provided by SAP (e.g. the SAP Blue Crystal theme) cannot be modified or deleted.
3.
Select your imported theme from the left pane.
4.
Choose Enable User Selection and Assign to Site from the footer.
Your custom theme will be assigned to the SAP Fiori Launchpad. Check that the icon before your imported
theme is changed to this one to make sure that this theme is assigned to the SAP Fiori Launchpad:
5.
Choose the Home button to go to the Launchpad.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
22
6. On the Launchpad, refresh your browser.
7.
After the browser has been refreshed, choose the Option button from the top menu on the Launchpad
and choose User Preferences from the dropdown.
8. In the User Preferences dialog box, choose the Theme line item.
9. In the Theme dialog box, select your created theme and choose Save.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
23
Note
If you cannot see your theme in the list, you might need to refresh the browser and check again.
10. Check that your theme has now been activated.
Result
You have assigned a theme of your choice to the SAP Fiori Launchpad and completed this exercise.
Theme Designer for SAP Fiori (MF4)
Customize SAP Fiori Apps in the Cloud (SAP Fiori, Demo Cloud Edition)
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
24
3
Customize Themes On-Premise
This section describes the theme customizing in an on-premise environment.
3.1
Prerequisites
To use the Theme Designer, several prerequisites must be met.
Activity
SAP Notes
o
Prerequisite
o
Authorization
Objects
o
Check the SAP Note 1852401 'UI Theme Designer for SAP NetWeaver AS ABAP
(main SAP Note)
You have activated the services (transaction sicf):
o
/sap/public/bc/themes
o
/sap/bc/theming
For write access to the Theme Designer (create, update, delete themes), you
must be assigned to the relevant authorization object:
o
Authorization object: /UI5/THEME
o
ACTVT (Activity): 02 (Change)
o
/UI5/THMID (Theme Id): * = all themes
o
Administrators can assign the relevant authorization objects to specific users
using transaction Role Maintenance (PFCG).
Client
o
Since themes are client-specific, the client you use to start the UI Theme
Designer must be the same as the client of the theme repository. In addition,
both need to run on the same server.
Supported
Browsers
o
Theme Designer for SAP Fiori (MF4)
Customize Themes On-Premise
Use one of the following browsers to run the Theme Designer:
o
Google Chrome
o
Mozilla Firefox
o
Microsoft Internet Explorer 9
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
25
3.2
Customizing a Theme
3.2.1
Access the Theme Designer
Use
In this step, you access the Theme Designer.
Procedure
1.
Open your SAP Logon application.
2.
Connect to the system using your ID and Password.
3.
Access the Theme Designer using the following transaction:
Transaction Code
/UI5/THEME_DESIGNER
Result
The UI of the Theme Designer is opened in your pre-defined browser.
3.2.2
Selecting a Base Theme and Preview
Use
In this step, you select an existing theme to be the base of your customization and an application for the preview,
being the application optional.
Procedure
1.
In the Theme Designer, choose one of the themes available.
Note
The SAP Blue Crystal theme is the recommended theme for SAP Fiori applications.
2.
Choose Open.
3.
In the Add Target Content dialog box, choose an application as a sample for the preview. Use the following
values:
Theme Designer for SAP Fiori (MF4)
Customize Themes On-Premise
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
26
Field
Name
Entry Value
Link to
Application
<Relative URL of your Launchpad>
Example
Use a relative link as link to the application, for example:
/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
Note
Since the wave 2 Fiori apps can only be accessed via the Launchpad, no
direct URL to a certain app can be set. However – the theming is valid then
for all apps being accessed via the launchpad and navigation within the
launchpad is possible in Theme Designer either.
Name of
Application
<Name of your application>
Example
Fiori Launchpad
4.
Choose Add.
Note
You can add more than one application choosing
.
Result
The preview of the selected application is displayed and the list of applications appears in the Preview area.
3.2.3
Create Theme
Note
Please find details on the theming procedures and a walkthrough example in the Create your Own Theme
section above.
Theme Designer for SAP Fiori (MF4)
Customize Themes On-Premise
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
27
3.2.4
Save Your Theme
Use
In the UI Theme Designer, you can save any theme created no matter if it is in an intermediate state or not.
Procedure
1.
In the UI Theme Designer, choose Theme → Save & Build from the top menu.
2.
In the Save & Build dialog box, maintain a Theme ID (e.g. "mytheme") and Title (e.g. "My Theme").
3.
Confirm your settings with Save & Build.
4.
Confirm the Save & Build completed dialog box with OK.
Result
You have saved your theme.
Theme Designer for SAP Fiori (MF4)
Customize Themes On-Premise
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
28
3.2.5
Manage Theme
3.2.5.1
Deriving the URL Using the Customer Theme
Maintenance
Use
In this step, it is described how to maintain the customer themes and how to assemble the URL so the specific
themes can be used.
Procedure
1.
Access the Tool for Customer Themes Maintenance using the following transaction:
Transaction Code
/n/UI5/THEME_TOOL
You have now accessed the Tool for Customer Themes Maintenance.
2.
Select the Info area of your theme :
3.
Select Choose (F2) button. The details of the urls are displayed.
4.
The complete URL for calling the theme is assembled as follows:
Field
Name
Entry Value
URL
<Full URL of your application>?sap-theme=<theme ID>@<theme-root>
(For example, https//<Servername>:<Port>/
sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sapclient=080&sap-language=EN&sap-theme=mytheme@http://mo026968435.mo.sap.corp:8000/sap/public/bc/themes/~client-080/~cache-1jaIdvh3IeCiw7C3gnDvCU2dCo
Result
You can find the URLs for your theme in the SAP Gateway system.
Theme Designer for SAP Fiori (MF4)
Customize Themes On-Premise
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
29
3.2.5.2
Deleting a Theme
Use
In this step, it is described how to delete a customer theme.
Procedure
There are multiple ways to delete theme.
Option 1:
1.
Open the theme designer.
2.
Select a theme.
3.
Choose Delete.
Option 2:
1.
Access the Tool for Customer Themes Maintenance using the following transaction:
Transaction Code
/n/UI5/THEME_TOOL
2.
You have now accessed the Tool for Customer Themes Maintenance.
3.
Double-click the red Delete area. The following pop-up shows up:
4.
Confirm with Yes to delete your theme.
Result
You have deleted a customer theme.
Theme Designer for SAP Fiori (MF4)
Customize Themes On-Premise
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
30
3.2.5.3
Download a Theme
Use
In this step, it is described how to download a customer theme.
Procedure
1.
Access the Tool for Customer Themes Maintenance using the following transaction:
Transaction Code
/n/UI5/THEME_TOOL
2.
You have now accessed the Tool for Customer Themes Maintenance.
3.
Double-click the Download area.
4.
A Save as dialog shows up. Select a folder on your hard or network drive and give the file a name. Confirm
with Save.
Result
You have downloaded a customer theme.
3.2.5.4
Upload a Theme
Use
In this step, it is described how to upload a customer theme.
Procedure
1.
Access the Tool for Customer Themes Maintenance using the following transaction:
Transaction Code
/n/UI5/THEME_TOOL
2.
You have now accessed the Tool for Customer Themes Maintenance.
3.
Double-click the Upload area.
4.
An Open dialog shows up. Select a folder on your hard or network drive. Choose with Open.
5.
The theme is uploaded into your system.
Result
You have uploaded a customer theme.
Theme Designer for SAP Fiori (MF4)
Customize Themes On-Premise
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
31
3.2.5.5
Transport a Theme
Use
You can transport themes from one system to another (e.g. from a test to a production system) using the Tool for
Customer Themes Maintenance.
Note
See a chapter Transportation for more information.
Prerequisites
You have administrator rights.
Procedure
1.
Start the Tool for Customer Themes Maintenance using the following transaction:
Transaction Code
/n/UI5/THEME_TOOL
2.
Navigate to the theme you want to transport.
3.
Select Transport and
4.
A dialog Prompt for Customizing request shows up.
5.
Assign a customizing request and choose Continue (Enter).
choose
Result
You have now added your theme to a customizing request. The theme can now be transported to the next tier
landscape.
Theme Designer for SAP Fiori (MF4)
Customize Themes On-Premise
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
32
4
Transportation
Use
When implementing and configuring this rapid-deployment solution in a multi-tier customer landscape, the
applied configuration settings need to be transported from one system landscape to the next (that is, from a
development landscape to a quality landscape and to a productive landscape in case of a 3 tier landscape
environment).
This section describes additional aspects which need to be taken into consideration while configuring SAP Fiori in
a multi-tier landscape. As a prerequisite, the ABAP transport system between the systems needs to be configured
properly.
Configuration settings that can be transported using the APAB transportation mechanisms and where no
additional or subsequent steps are required are not mentioned in the following list.
Procedure
When using the UI Theme Designer and creating your own themes, the ABAP transport mechanism can be used.
Add your theme to a transport request as described in the previous chapter Transport a Theme.
Theme Designer for SAP Fiori (MF4)
Transportation
CUSTOMER
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
33
www.sap.com/contactsap
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any
form or for any purpose without the express permission of SAP SE
or an SAP affiliate company.
The information contained herein may be changed without prior
notice. Some software products marketed by SAP SE and its
distributors contain proprietary software components of other
software vendors. National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company
for informational purposes only, without representation or warranty
of any kind, and SAP or its affiliated companies shall not be liable for
errors or omissions with respect to the materials. The only
warranties for SAP or SAP affiliate company products and services
are those that are set forth in the express warranty statements
accompanying such products and services, if any. Nothing herein
should be construed as constituting an additional warranty.
SAP and other SAP products and services mentioned herein as well
as their respective logos are trademarks or registered trademarks of
SAP SE (or an SAP affiliate company) in Germany and other
countries. All other product and service names mentioned are the
trademarks of their respective companies. Please see
www.sap.com/corporate-en/legal/copyright/index.epx for
additional trademark information and notices.
Material Number: