1

UI Conf i g Tool
UI Configuration of Web Client UI in CRM 7.0
2
SAP 2008 / Page 2
Obj ec t i ves
At the end of this unit, you will be able to:
Get an overview of new features within the UI Config Tool
Explain new features of UI Configuration
Use new features of UI Config Tool
3
SAP 2008 / Page 3
1. Tile Layout for Overview Pages
2. Drag & Drop in the UI Configuration Tool
3. Skin Workbench
4. Configuration of Guided Procedures
Agenda
This presentation will give a review of the new features within the UI Config Tool in
CRM 7.0 which are explained in the following order:
1. Tile Layout for Overview Pages
2. Drag & Drop in the UI Config Tool
3. Skin Workbench
4. Configuration of Guided Procedures
4
SAP 2008 / Page 4
Ti l e Layout f or Over vi ew Pages
Overview pages can be
configured in
Page layout
Tile layout
Overview pages can be configured in page layout or in tile layout.
If you switch from page layout to tile layout, please ensure that the views used on
the overview page are nicely configured as tiles are often smaller than a usual page.
Note: Tile Layout is mainly used in IC Web Client within the SAP standard delivery.
5
SAP 2008 / Page 5
Ti l e Layout f or Over vi ew Pages
Configuration
Register overview page
that should be capable to
be configured in tile layout
Transaction: SPRO SAP
Reference IMG CRM
UI Framework UI
Framework Definition
Register Overview Pages for
Tile Layout
or Transaction: SM30
BSPC_DL_OVP_TE_V
Enter Component and
Controller
If an overview page is
registered here, you get an
Switch to Tile Layout
button in the configuration
Note: You might need to adapt the UI configuration of assignment blocks if they are
displayed in tiles, for example, if the current configuration of an assignment block
covers 10 columns, and is now reduced to 5 columns because the tile only covers
half of the width of a page.
6
SAP 2008 / Page 6
Ti l e Layout : Conf i gur at i on
Configuration
For the Tile Layout you can
choose from the Tile
Layouts defined in IMG
The Tile Layout is
visualized. You can mark a
tile and then assign the
available views to the tile.
You can change the order
and title of assignment
blocks within a tile.
You can assign more than
one tile. The first tile is
displayed as default. The
other tiles can be reached
via links. As link name the
title is used.
Drag & Drop
Note: If you switch between the layouts the information which views were assigned
get lost.
7
SAP 2008 / Page 7
Ti l e Layout : Def i ne Layout i n I MG
Configuration
For the Tile Layout
definition for Overview
Pages the Tile Layout
definition for Fact sheets is
reused
SPRO Customer
Relationship Management
SAP Reference IMG
UI Framework UI
Framework Definition
Fact Sheets Maintain
Fact Sheet
Layout definition in IMG
Selection in UI Configuration Tool
In this IMG activity, you can define your own fact sheets and assign fact sheet views
to them.
The following standard layout types are available for pages with tiles:
2 x 3 layout, that is, two columns and three rows
2 x 2 layout, that is, two columns and two rows
T-shape
Note: When you define the grid, be careful that the tiles do not overlap or exceed
the grid size. The order in a grid is from left to right, from top to bottom, and starts
with ' 1 '.
8
SAP 2008 / Page 8
1. Tile Layout for Overview Pages
2. Drag & Drop in the UI Configuration Tool
3. Skin Workbench
4. Configuration of Guided Procedures
Agenda
The following chapter includes the new Drag & Drop features.
9
SAP 2008 / Page 9
Dr ag & Dr op i n t he UI Conf i gur at i on Tool
Capabilities
Tables in Configuration
Drag & drop elements
from one table to an other
Change the order of
elements in the Displayed
Fields table via Drag &
Drop
Form view configuration /
grid
Drag & Drop elements
form the Available fields
table into the grid
Drag & Drop fields within
the grid
Dragging can be started on the row selector of a row.
Where your element gets inserted is also indicated with a line.
For Drag & Drop within one table and from one table to the other the dropping
position is visualized by moving the other elements and providing and empty space.
The row that is dragged and dropped is visualized transparent during dragging.
Note: Change the order of elements in Available Fields table via Drag & Drop is
not possible!
10
SAP 2008 / Page 10
Dr ag & Dr op: I nser t Row s Fr om Avai l abl e
Fi el ds
Insert entry between 2 rows
Insert entry in empty row
Styling of grid should be same as regular tables in CRM.
Note: it is not possible to Drag & Drop more than one row at the same time.
11
As supplied before, there are three different modes. Different rules apply for these
modes:
1) 8 columns / 1 panel Guided Mode
2) 16 columns / 2 panel
3) 16 columns / 1 panel Freestyle Mode
Note: There are no rules for Freestyle Mode for moving up / down and left / right.
Elements can be moved manually, but previously enough space needs to be made
available.
SAP 2008 / Page 11
Dr ag & Dr op i n Gr i d Modes i n Gener al
As supplied before there
are three different modes:
Guided Mode:
8 columns / 1 panel
16 columns / 2 panel
Freestyle Mode:
16 columns / 1 panel
12
SAP 2008 / Page 12
Dr ag & Dr op i n Gr i d (1)
Valid for:
16 columns / 2 panel
8 columns / 1 panel
Elements can be moved manually, but previously enough space need to be made
available.
Note: Label and Field are always dragged & dropped together. They have to be in
one row, but the columns can be changed manually.
13
SAP 2008 / Page 13
Valid for:
16 columns / 2 panel
8 columns / 1 panel
Dr ag & Dr op i n Gr i d (2)
You can move elements
into blank rows
No Drag & Drop possible if
you move an element in an
occupied cell
Warning message if an element is dragged
& dropped into an occupied cell.
An element cannot be moved into an occupied cell. In this case a warning message
appears.
Note: The size of elements cannot be changed via Drag & Drop. Resize of elements
can be done manually with the Show Field Properties button.
14
SAP 2008 / Page 14
Dr ag & Dr op i n Gr i d (3)
Valid for:
16 columns / 1 panel
Elements can be moved manually.
In freestyle mode (16 columns / 1 panel) you can also move elements on a specific
position as it is shown in the screenshot.
Note: If the element has a label displayed, only field and label together can be
removed.
15
SAP 2008 / Page 15
1. Tile Layout for Overview Pages
2. Drag & Drop in the UI Configuration Tool
3. Skin Workbench
4. Configuration of Guided Procedures
Agenda
The following chapter includes the new features within the Skin Workbench.
16
SAP 2008 / Page 16
Sk i n Wor k benc h: Use of Sk i ns i n Gener al
CRM 7.0 provides a
Workbench in IMG that
facilitates exploring and
copying SAP default skins
Note: There have been already several options within CRM 2007 to adjust skins to
your corporate identity. However, CRM 7.0 provides a Workbench in IMG that
facilitates exploring and copying SAP default skins.
17
SAP 2008 / Page 17
Bef or e Usi ng Sk i n Wor k benc h: Cr eat e BSP
Appl i c at i on t o St or e Your Sk i ns
Configuration:
Instead of using a local /
network folder to store the
skin you can store the Skin
in the CRM systems
Transaction: SE80
Create a BSP Application
(like thtmlb_styles), give it
a name (e.g.
zthtmlb_styles) and copy
the .css files
Preparation: In CRM 7.0, you need to create a BSP application before you copy a
SAP skin for the first time.
Transaction: SE80
Create a BSP Application (like thtmlb_styles), give it a name (e.g. zthtmlb_styles) and copy the
.css files
18
SAP 2008 / Page 18
Sk i n Wor k benc h: Conf i gur at i on (1)
Configuration:
1. Preparation: Before you
copy the first time a SAP
skin you need to create a
BSP application.
2. Then access Skin
Workbench
3. Select an SAP skin
Copy SAP Skin
Choose the BSP and
enter a skin name and
description
decide whether the skin
should be automatically
added to the customizing
Add skin to customizing
Preparation: Before you copy the first time a SAP skin you need to create a BSP
application.
Access Skin Workbench
Transaction SPRO SAP Reference IMG Customer Relationship Management UI
Framework UI Framework Definition Skins Access Skin Workbench
Or Transaction: CRMC_SKIN_WB
Select a SAP skin Copy SAP Skin Choose the BSP and enter a skin name
and description decide whether the skin should be automatically added to the
customizing (please also see slide 20 Make new Skins available)
Note: If the checkbox is selected, the copied skin is made available on the central
personalization page of the CRM WebClient, under the layout settings.
19
SAP 2008 / Page 19
Sk i n Wor k benc h: Conf i gur at i on (2)
Configuration:
4. Now your skin is displayed
in a separated area below
the SAP Skins.
5. You can make your
adjustments to the copied
skin.
6. With the context menu
(right mouse click) you
have several possibilities).
If you are positioned on an
image folder you can also
display an overview of the
images (name + picture)
Upper panel
Lower panel
Right mouse click on
your own skin
When you start the Skin Workbench, the SAP skins are loaded in the upper panel,
and the BSPs with your own skins are loaded in the lower panel of the workbench.
You can select individual objects or files in a skin folder and then display the
information about the objects by choosing the buttons on the right-hand side of the
panel. You can preview graphics by choosing the Preview button. You can display the
properties of a selected file, for example, a CSS file by choosing the Properties
button.
You can download a skin folder from the upper panel and also from the lower panel,
to your local computer, by selecting a folder and choosing Download folder content in
the context menu.
Note: If you want to rename a skin, you also have to do it manually in the skin
customizing. In this case a warning appears.
20
SAP 2008 / Page 20
Sk i n Wor k benc h: Mak e new Sk i ns Avai l abl e
Configuration:
Transaction SPRO SAP
Reference IMG
Customer Relationship
Management UI
Framework UI
Framework Definition
Skins Define Skins
or Transaction: SM30
Table:
CRMC_THTMLB_SKIN
New Entries Enter a
key, a description and the
source path
Result: New Skin is available in the drop-down list box in the CRM Personalization
Enter data in the following mandatory fields:
Skin Name: The name specifies the unique technical name of the skin.
Description: This is a textual description of the skin. The text is displayed in the selection of
available skins, under the layout settings on the central personalization page.
Source Path: This specifies the path to the skin root folder in the BSP application.
Version:
- Select 1.0.2 to use the default file
/SAP/BC/BSP/SAP/thtmlb_styles/sap_skins/thtmlb_core_stand.css provided by SAP. If you select
this option, the skin benefits from future updates by SAP in that file.
- Select 1.0.1 to use the file
/path_to_customer_bsp/customer_skin_root_folder/thtmlb_core_stand.css if you created such a
file.
21
SAP 2008 / Page 21
Sk i n Wor k benc h: Set Def aul t Sk i n
Configuration:
Transaction SPRO SAP
Reference IMG
Customer Relationship
Management UI
Framework Technical
Role Definition Define
Technical Profile
Enter the Skin name here
and assign the skin to all
Business Roles for which
you want use this skin as
default skin
Customer Relationship
Management UI
Framework Business
Roles Define Business
Roles
Note: This is only a default skin all the other skins can be still selected by the
user via personalization.
22
SAP 2008 / Page 22
Sk i n Wor k benc h: Ex c l ude Sk i ns
Configuration:
Transaction: SM30
Table:
CRMC_THTMLB_SKNE
New Entries Choose the
Skins you want to exclude
If a skin is not needed any more, but you do not want to delete it, then there is the
possibility to exclude the skin.
With an entry in CRM table CRMC_THTMLB_SKNE you can exclude the skin entry
from Personalization Pages skin dropdown box without deleting the skin.
Note: You can use this functionality for an temporarily deactivation of a skin, for
example if you want to have seasonal layouts.
23
SAP 2008 / Page 23
Sk i n Wor k benc h: Adj ust Sk i ns
Configuration:
Thtmlb_stand.css is the
main .css-file
Open thtmlb_stand.css
Now you can change the
colors and the size of the
different elements
Note: Please see How-to Guide Copy and Adjust Skins (PDF) that you can find
among the RKT material for CRM 2007. This document will help you copy a SAP Skin
and adjust this new Skin to your needs. You can find the How-to Guide via: Support
Portal Ramp-up Knowledge Transfer (RKT) SAP CRM 2007 Technology
Step 2: Prepare for Your Project SAP CRM WebClient UI Cookbook How-to
Guide Copy and Adjust Skins
All general format styles for fonts and color definitions of WebClient UI are stored in
cascading styles sheets. This is a common way in web development to offer a central
access to these settings via these css files.
When you have a look in this Default folder, there you can find thtmlb.css. This is
the main layout file of WebClient UI.
24
SAP 2008 / Page 24
1. Tile Layout for Overview Pages
2. Drag & Drop in the UI Configuration Tool
3. Skin Workbench
4. Configuration of Guided Procedures
Agenda
The last section of this presentation illustrates the configuration of Guided
Procedures.
25
SAP 2008 / Page 25
Conf i gur at i on of Gui ded Pr oc edur es
Configuration
In the configuration you can
assign views to the Task
Based UI. You can easily
define the order and the
name of each step
For Details please see RKT
Material for Task Based UI
For the Task Based UI Page you can start the UI Configuration Tool in the same way
as for Overview Pages.
In the configuration you can assign views to the Task Based UI. You define the order
and the name of each step.
Additionally you can define an optional explanatory text.
If you define a new text, you need to enter an ID for this text.
You can also reuse an existing text. Then you would choose via the button.
Note: As a prerequisite, a Task Based UI Page has been created in the BSP
Component Workbench and the required views are assigned. For Details please see
RKT Material for Task Based UI.
26
SAP 2008 / Page 26
Lesson Summar y
This unit covered new features within the UI Configuration Tool
Tile Layout
Drag & Drop
Skin Workbench
Configuration of Guided Procedures
This unit covered new features within the UI Configuration Tool
1. Tile Layout
2. Drag & Drop
3. Skin Workbench
4. Configuration of Guided Procedures
Thank you for attending this learning unit.
27
SAP 2008 / Page 27
Fur t her I nf or mat i on
CRM Roll Out Map (internal)
https://portal.wdf.sap.corp/go/crm-rollout-map
CRM Knowledge Transfer
https://websmp210.sap-ag.de/rkt-crm
SAP CRM - Help Portal
http://help.sap.com/crm
SAP CRM WiKi (internal)
https://wiki.wdf.sap.corp/display/SAPCRMHub/Home
SAP Public Web
http://www.sap.com/crm
28
SAP 2008 / Page 28
Copyr i ght 2008 SAP AG
Al l r i ght s r eser ved
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed
without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
SAP, R/3, xApps, xApp, SAP NetWeaver, Duet, SAP Business ByDesign, ByDesign, PartnerEdge and other SAP products and services mentioned herein as well as their respective logos are
trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned and associated logos displayed
are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.
The information in this document is proprietary to SAP. This document is a preliminary version and not subject to your license agreement or any other agreement with SAP. This document
contains only intended strategies, developments, and functionalities of the SAP product and is not intended to be binding upon SAP to any particular course of business, product strategy,
and/or development. SAP assumes no responsibility for errors or omissions in this document. SAP does not warrant the accuracy or completeness of the information, text, graphics, links, or
other items contained within this material. This document is provided without a warranty of any kind, either express or implied, including but not limited to the implied warranties of
merchantability, fitness for a particular purpose, or non-infringement.
SAP shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. This limitation
shall not apply in cases of intent or gross negligence.
The statutory liability for personal injury and defective products is not affected. SAP has no control over the information that you may access through the use of hot links contained in these
materials and does not endorse your use of third-party Web pages nor provide any warranty whatsoever relating to third-party Web pages
Weitergabe und Vervielfltigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrckliche schriftliche Genehmigung durch
SAP AG nicht gestattet. In dieser Publikation enthaltene Informationen knnen ohne vorherige Ankndigung gendert werden.
Einige von der SAP AG und deren Vertriebspartnern vertriebene Softwareprodukte knnen Softwarekomponenten umfassen, die Eigentum anderer Softwarehersteller sind.
SAP, R/3, xApps, xApp, SAP NetWeaver, Duet, SAP Business ByDesign, ByDesign, PartnerEdge und andere in diesem Dokument erwhnte SAP-Produkte und Services sowie die
dazugehrigen Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und in mehreren anderen Lndern weltweit. Alle anderen in diesem Dokument erwhnten Namen
von Produkten und Services sowie die damit verbundenen Firmenlogos sind Marken der jeweiligen Unternehmen. Die Angaben im Text sind unverbindlich und dienen lediglich zu
Informationszwecken. Produkte knnen lnderspezifische Unterschiede aufweisen.
Die in diesem Dokument enthaltenen Informationen sind Eigentum von SAP. Dieses Dokument ist eine Vorabversion und unterliegt nicht Ihrer Lizenzvereinbarung oder einer anderen
Vereinbarung mit SAP. Dieses Dokument enthlt nur vorgesehene Strategien, Entwicklungen und Funktionen des SAP-Produkts und ist fr SAP nicht bindend, einen bestimmten
Geschftsweg, eine Produktstrategie bzw. -entwicklung einzuschlagen. SAP bernimmt keine Verantwortung fr Fehler oder Auslassungen in diesen Materialien. SAP garantiert nicht die
Richtigkeit oder Vollstndigkeit der Informationen, Texte, Grafiken, Links oder anderer in diesen Materialien enthaltenen Elemente. Diese Publikation wird ohne jegliche Gewhr, weder
ausdrcklich noch stillschweigend, bereitgestellt. Dies gilt u. a., aber nicht ausschlielich, hinsichtlich der Gewhrleistung der Marktgngigkeit und der Eignung fr einen bestimmten Zweck
sowie fr die Gewhrleistung der Nichtverletzung geltenden Rechts.
SAP bernimmt keine Haftung fr Schden jeglicher Art, einschlielich und ohne Einschrnkung fr direkte, spezielle, indirekte oder Folgeschden im Zusammenhang mit der Verwendung
dieser Unterlagen. Diese Einschrnkung gilt nicht bei Vorsatz oder grober Fahrlssigkeit.
Die gesetzliche Haftung bei Personenschden oder die Produkthaftung bleibt unberhrt. Die Informationen, auf die Sie mglicherweise ber die in diesem Material enthaltenen Hotlinks
zugreifen, unterliegen nicht dem Einfluss von SAP, und SAP untersttzt nicht die Nutzung von Internetseiten Dritter durch Sie und gibt keinerlei Gewhrleistungen oder Zusagen ber
Internetseiten Dritter ab.
Alle Rechte vorbehalten.