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, active tiles and jam feeds
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
5
Concepts Tiles – This is how applications are represented on the Launchpad. Each one is a single entry to an application. 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.
Groups – Groups are a way of bundling tiles together, this can be to group them by category or just to group your most used tiles. Catalogue – This is a list of all the applications available user based on there roles. Applications can be added from the catalog to your Launchpad to make them easier to access © 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
6
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. 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.
Customer
9
Responsive Design The design of the page will automatically adjust to the size of the screen, this allows ease of use over all devices.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
10
User Launchpad Customisation
User Launchpad https://:/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sapclient=&sap-language=EN
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
12
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. All rights reserved.
Customer
14
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. All rights reserved.
Customer
15
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.
Customer
16
Adding Tiles Deleting Tiles Rearranging Tiles Creating Groups Deleting Groups Adding Tiles to groups
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.
Customer
18
Adding Tiles Deleting Tiles Rearranging Tiles Creating Groups Deleting Groups Adding Tiles to groups
User: Rearranging Tiles Use an extended click on the tile you wish to rearrange.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
20
User: Rearranging Tiles Drag the tile to the desired location and release your click. The tile will be placed in the location denoted by the dashed outline of a square.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
21
Adding Tiles Deleting Tiles Rearranging Tiles Creating Groups Deleting Groups Adding Tiles to groups
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. Click the button ‚New Group’.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
23
User: Creating new groups A new group will have now appeared and you can name the group by typing in the input box, when finished name click enter to complete creating a new group.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
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
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’. 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 Once the tile is added to the group, the tile image will go to a tick once again.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
30
Configuration of Login and Logoff Screen
Login Screen Configuration The Fiori Launchpad is the landing page for Fiori applications. As with the portal, the user has to pass through the login page. To perform this configuration, you need administrator rights on the system. basic login page
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
login screen after configuration
Customer
32
Login Screen Configuration The steps to be followed are as follow: 1.
SICF transaction
2.
Navigate to default_host > sap > bc > ui5_ui5 > ui2 >ushell
3.
Double click on ushell node
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
33
Login Screen Configuration 1.
Click on the tab Error Pages
2.
Select System Logon radio button and choose Configuration button
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
34
Login Screen Configuration 1.
Select Define Service-Specific Settings radio button.
2.
Under Logon Layout and Procedure section, select Custom Implementation radio button.
3.
Enter /UI2/CL_SRA_LOGIN in the ABAP Class field.
4.
Select the green tick.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
35
Login Screen Configuration Once the configuration is complete, the login screen should appears as shown in the image below
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
36
Logoff Screen Configuration By default log off screen would be set as below. Instead you can configure the page to be redirected to login page.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
37
Logoff Screen Configuration 1.
Login to system having proper authorization
2.
Enter transaction SCIF
3.
Navigate to node /sap/public/bc/icf/logoff
4.
Double click on logoff node
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
38
Logoff Screen Configuration 1.
Once the service loads, select change mode
2.
Navigate to Error Pages->Logoff Page
3.
Select the Redirection to URL radio button
4.
Enter the redirection URL /sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fioril aunchpad.html
5.
Click on Save button to save your entries
6.
Click on green tick to accept the workbench request
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
39
Logoff Screen Configuration After logoff, the page will be redirected to login page
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
40
Admin Launchpad Customisation
Launchpad Configuration Steps – Process Overview
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
42
Launchpad Designer The Launchpad Designer is used to manage catalogues, groups, and tiles and it is the standard tool for: - Configuring the tiles for static app launchers, dynamic app launchers, and target mapping. - Creating pre-configured groups and catalogues for the home page
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
43
Launchpad Designer http://: /sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap-client=?scope=CUST
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
44
Creating a User Role Creating a Catalog Creating Tiles Creating Groups
Admin: Creating a Role and Assigning it Now go to transaction PFCG. Enter a unique role name and click ‘Single Role’ This will create a new role.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
46
Admin: Creating a Role and Assigning it Your Role has been created. Click the ‘User’ tab.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
47
Admin: Creating a Role and Assigning it Click on the menu button next to the ‘User ID’ field.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
48
Admin: Creating a Role and Assigning it Enter the name of the User you wish to assign the role too. Click the Tick.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
49
Admin: Creating a Role and Assigning it Click the tick next to the Users name. then click the tick at the top.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
50
Admin: Creating a Role and Assigning it Now your user has been assigned your role. You must now enter the from and to fields to denote the period of time in which the role is assigned. Click save and the ‘User’ tab light will turn green
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
51
Creating a User Role Creating a Catalog Creating Tiles Creating Groups
Admin: Create a New Catalog Go to your Admin Launchpad now as you need to create a new catalog. Click on the ‘Catalogs’ tab Then click the new button.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
53
Admin: Create a New Catalog Enter the name and ID for your catalog. Click ‘Save’.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
54
Admin: Create a New Catalog Your Catalog is now created and empty.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
55
Admin: Create a New Catalog Go back to the transaction PFCG now. Click on the ‘Menu’ tab. Select the Role menu.
Click the new item button.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
56
Admin: Create a New Catalog Use the list to select ‘Catalog Provider.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
57
Admin: Create a New Catalog Enter the Catalog ID you created in the Launchpad admin a few slides back. Click the tick.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
58
Admin: Create a New Catalog Click save to turn your ‘menu’ tab light green. Your Catalog has now been assigned to every one in your User tab.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
59
Creating a User Role Creating a Catalog Creating Tiles Creating Groups
Admin: Creating New Tiles On the Admin Launchpad select your catalog and click button ‚Tiles’ Click the new Tile button.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
62
Admin: Creating New Tiles Now click on App Launcher Static
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
63
Admin: Creating New Tiles Now this new blank tile has been added to your catalog.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
64
Admin: Creating New Tiles Do the same again to create a blank ‘App Launcher – Dynamic’ tile in your catalog.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
65
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.
Customer
66
Admin: Creating New Tiles Enter the Semantic Object and the Action we want the app to be able to do. Enter the launchpad role for the application.
Enter the launchpad instance and the Application Alias.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
67
Admin: Creating New Tiles Click Save . Click OK.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
68
Admin: Creating New Tiles Click the ‚Tiles’ and select ‘App Launcher – Static’ to go to its options. In the new window enter the Title and subtitle for your application.
Icon - click the browse button next to Icon.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
69
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.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
70
Admin: Creating New Tiles - Concepts Semantic object
Action
Represents a business entity such as a customer, a sales order, or a product. Using semantic objects, you can bundle applications that reflect a specific scenario. They allow you to refer to objects in a standardized way, abstracting from concrete implementations of these objects. You can either use semantic objects shipped by SAP, or create new semantic objects. 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. All rights reserved.
Customer
71
Admin: Creating New Tiles With your icon selected it now appears in the icon box. Enter the Semantic object you want your application to navigate too and the action you wish it to perform.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
72
Where Can I Find a List of Semantic Objects & Actions? For a list of all available semantic objects, you can access SAP transaction: /n/UI2/SEMOBJ_SAP The Semantic object should be intuitive to the app you are configuring.
For actions there is no list, however there are some guidelines to be followed: - Must be a verb (display, create, define) - Syntax in camelCase (displayLeaveRequest) © 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
73
Admin: Creating New Tiles Click save. Click OK.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
74
Admin: Creating New Tiles Your tile is now created, 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. All rights reserved.
Customer
75
Admin: Creating New Tiles Complete the same settings for the Dynamic tile. The only difference with the options is where the tile gets the Dynamic Data from.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
76
Admin: Creating New Tiles When the setting have been applied to the Dynamic tile it will look like this. The only difference being the dynamic numbers which will work on an active account.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
77
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
Admin: Create a New Group Select the ‘Groups’ tab at the top of the page.
Click the new group button.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
82
Admin: Create a New Group Enter the title of your group and an ID for it. Click ‘Save’.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
83
Admin: Create a New Group Your group is now created. As you can see its empty too.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
84
Admin: Create a New Group This will now explain how to assign the group to a user. On transaction PFCG in the role you created, Select the ‘Menu’ then click the add new button. Use the list to find ‘Gruppe’.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
85
Admin: Create a New Group When the box pops up click on the search button next to ‘Group ID’. Now use the list to select the group you made a few slides back. Click the tick.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
86
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. All rights reserved.
Customer
87
Admin: Create a New Group Your group is now in the Role Menu. Because this role is assigned to our test user, when you click save the group will appear on his page.
If you wish to assign the role to anyone else go back to the ‘User’ tab and add their details in.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
88
Admin: Create a New Group When you now log on your user you can now see the group there. As it is assigned on a role level it is non deleteable, when trying to delete it you will just reset the group to how it is in the Admin launch pad. For this group that stat is empty as it has no assigned tiles.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
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
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.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
93
Admin: Add Tiles Once the tiles have been added you will see a green tick under them. Now click the back button in the top left hand corner of the screen.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
94
Admin: Add Tiles As you can see your group now has the tiles attached to it.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
95
Admin: Add Tiles When you now log on to your user the applications will appear in the group.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
96
Theme Designer
UI Theme Designer overview UI theme designer allowes you to create your own themes to adapt the visual appearance of applications. For example, you can change the colour scheme, or add your company's logo. A custom theme created with the UI theme designer is always derived from an SAP standard theme (for example, SAP Blue Crystal). Each SAP standard theme, in turn, is derived from the base theme. Key Capabilities: -
Browser-based WYSIWYG editor
-
Build-in preview pages: Application previews and control overview pages
-
Different levels of theming: Quick theming, Expert theming, Manual theming based on LESS and CSS © 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
98
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, 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.
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, Tablet and Phone
•
Refresh: Refresh the loaded application
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
100
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.
Customer
101
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. All rights reserved.
Customer
102
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.
Customer
103
Security Aspects for UI Theme Designer -
Network security:You can run the UI theme designer both in http and https mode. To protect your data privacy, we recommend you use https mode (secure browsing mode).
-
ICF nodes: For security reasons, all Internet Communication Framework (ICF) services are available in an inactive state. You have to decide which services must be activated for the applications you want to use. To be able to use the UI theme designer tool (for example, creating themes), 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.
-
XSRF protection: The UI theme designer provides mechanisms to ensure protection against XSRF (Cross-Site Request Forgery) attempts. A given request (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. © 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
104
Theme Designer Prerequisites Prerequisites To be able to use the UI theme designer, several prerequisites must be met. •
Implement SAP Note 1852401 .
•
Activate the following Internet Communication Framework (ICF) service nodes: • •
/sap/public/bc/themes /sap/bc/theming
To perform this step, launch IMG activity Activate ICF service for UI theme designer. 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 .
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
105
Theme Designer Prerequisites To be able to use the UI theme designer tool (for example, creating themes), activate the following ICF nodes (transaction: SICF) /sap/public/bc/themes & /sap/bc/theming
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
106
Theme Designer Prerequisites For write access to the UI theme designer (create, update, delete themes), 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). 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. We recommend you use Google Chrome to run the UI theme designer. Mozilla Firefox and Microsoft Internet Explorer (as of version 10) are also supported. © 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
107
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. All rights reserved.
Customer
108
Theme Designer Prerequisites •
Select Manually and assign Authorization object: /UI5/THEME
1.
Click Save and select green tick in a pop up window
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
109
Theme Designer Prerequisites
•
The THEME_DESIGNER_AUTHORIZATION should change to GREEN
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
110
Theme Designer Prerequisites •
Save and click back button, in the next window select generate. The authorization tab will appear green now.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
111
Theme Designer Prerequisites In the User tab enter the user name for the Fiori test user, in our case “TABASCOT”, and click ENTER and SAVE
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
112
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.
Customer
113
Theme Designer Prerequisites You have installed UI Add-on SP09 You have applied notes 2019136 - Corrections for SAP NetWeaver UI Add-On 1.0 SP09 You have applied notes 2026517 - UI theme designer for ABAP: UI Add-on 1.00 SP09
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
114
Custom Theme To open the Theme Designer use transaction /n/UI5/THEME_DESIGNER Or use URL: https://:/sap/bc/theming/themedesigner Click on the ‘SAP BLUE CRYSTAL’ theme and click ‘OPEN’.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
115
Custom Theme Enter the URL for your fiori Launchpad. Enter a name for the Theme Enter a Name.
Click ‘Add’.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
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. Change the name of ‚Theme ID’ and ‚Title’.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
117
Custom Theme Click on the browse button next to Logo. Drag the image for the logo to the box with a plus in. Click on the image once uploaded. Click OK.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
118
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. All rights reserved.
Customer
119
Custom Theme Drag the image for the background to the box with a plus in. Click on the image once uploaded.
Click OK.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
120
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
Custom Theme Your theme has now been published. Click OK.
© 2014 SAP AG or an SAP affiliate company. 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. All rights reserved.
Customer
125
Custom Theme Add this parameter to the URL for your launchpad with the ‘&’ symbol:
https://t15tdc00.wdf.sap.corp:55081/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sapclient=800&sap-language=EN&sap-theme=EGI_THEME@http://zmetdc00.wdf.sap.corp:55080/sap/ /sap/public/bc/themes/~client-800/
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
126
Custom Theme Here is a Red SAP theme:
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
127
ThemeDesigner – more information SAP Fiori UX - UI Theme Designer http://scn.sap.com/docs/DOC-53179 How to setup your company logo in SAP Fiori launchpad
http://scn.sap.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. All rights reserved.
Customer
128
SAP Fiori Client
SAP Fiori Client Through the enhanced cache management features in the SAP Fiori Client. SAP is delivering the SAP Fiori Client, a native application for Android and iOS devices. It acts as an enterprise-enhancement to the mobile browser when SAP Fiori applications are running. It uses the same multi-channel SAP Fiori web application, but users get more consistent performance The application, a native mobile app, built using the open source Apache Cordova framework, renders SAP Fiori application content, and provides more reliable asset caching (HTML, CSS, JavaScript files and more) plus, on iOS, an enhanced attachment viewing process. Table: SAP Fiori Application load times
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
130
Fiori Client Android
Fiori Client Android Click On the Google Play Application store.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
132
Fiori Client Android Use the search function to search for ‘SAP Fiori Client’.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
133
Fiori Client Android Click on the fiori client App
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
134
Fiori Client Android Click Install
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
135
Fiori Client Android Accept the App permissions.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
136
Fiori Client Android Open the Fiori Client.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
137
Fiori Client Android Enter the URL for the Fiori Launchpad . Click OK.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
138
Fiori Client Android Enter your user logon details and click Log on.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
139
Fiori Client Android Now you will be taken to your launchpad.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
140
Fiori Client Android Use the menu button to access groups and the catalog, or log out.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
141
Fiori Client Android Use a double tap on the screen to open a navigation menu and access to the applications settings.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
142
Fiori Client IOS
Fiori Client IOS Click on the App Store
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
144
Fiori Client IOS Use the Search function to search of SAP Fiori Client.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
145
Fiori Client IOS Click on the Free Button. Then click install.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
146
Fiori Client IOS Click on the Fiori Client
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
147
Fiori Client IOS Center the URL for the Fiori Launchpad page.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
148
Fiori Client IOS Enter the login details for your user. Click Log on.
© 2014 SAP AG or an SAP affiliate company. 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. All rights reserved.
Customer
150
Fiori Client IOS Use the menu button to access the catalog and groups, or to log off.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
151
Fiori Client IOS Use two fingers and do a long click to open up a navigation menu.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Customer
152
Expert Guided Implementation: Checkpoint Day 2 Day 2 Empowering lesson Launchpad configuration Introduction to theme designer SAP Fiori Client(Web session, 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, 2 h. 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. All rights reserved.
Customer enabled to configure the Fiori Launchpad and Theme Designer
Customer
153
Expert Guided Implementation How to get help How to get help
Customer
[email protected]
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.
Customer
154
Thank You!
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
