Layout

1

UI Config ToolUI Configuration of Web Client UI in CRM 7.0

2

© SAP 2008 / Page 2

Objectives

At the end of this unit, you will be able to:Get an overview of new features within the UI Config ToolExplain new features of UI ConfigurationUse new features of UI Config Tool

3

© SAP 2008 / Page 3

1. Tile Layout for Overview Pages2. Drag & Drop in the UI Configuration Tool 3. Skin Workbench4. 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

Tile Layout for Overview Pages

Overview pages can be configured in

Page layoutTile 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

Tile Layout for Overview Pages

ConfigurationRegister 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 Layoutor Transaction: SM30 BSPC_DL_OVP_TE_VEnter 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

Tile Layout: Configuration

ConfigurationFor 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

Tile Layout: Define Layout in IMG

ConfigurationFor the Tile Layout definition for Overview Pages the Tile Layout definition for Fact sheets is reusedSPRO 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


Agenda

The following chapter includes the new Drag & Drop features.

9

© SAP 2008 / Page 9

Drag & Drop in the UI Configuration Tool

CapabilitiesTables in Configuration

Drag & drop elements from one table to an otherChange 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 gridDrag & 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

Drag & Drop: Insert Rows From Available Fields

Insert entry between 2 rowsInsert 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

Drag & Drop in Grid Modes in General

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

Drag & Drop in Grid (1)

Valid for:16 columns / 2 panel8 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 panel8 columns / 1 panel


You can move elements into blank rowsNo 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


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


Agenda

The following chapter includes the new features within the Skin Workbench.

16

© SAP 2008 / Page 16

Skin Workbench: Use of Skins in General

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

Before Using Skin Workbench: Create BSP Application to Store Your Skins

Configuration:Instead of using a local / network folder to store the skin you can store the Skin in the CRM systemsTransaction: SE80Create 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

Skin Workbench: Configuration (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 WorkbenchTransaction 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

Skin Workbench: Configuration (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 Propertiesbutton.

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

Skin Workbench: Make new Skins Available

Configuration:Transaction SPRO SAP Reference IMG Customer Relationship Management UI Framework UI Framework Definition Skins Define Skins or Transaction: SM30 Table: CRMC_THTMLB_SKINNew 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

Skin Workbench: Set Default Skin

Configuration:Transaction SPRO SAP Reference IMG

Customer Relationship Management UI Framework Technical Role Definition Define Technical ProfileEnter 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

Skin Workbench: Exclude Skins

Configuration:Transaction: SM30Table: CRMC_THTMLB_SKNENew 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

Skin Workbench: Adjust Skins

Configuration:Thtmlb_stand.css is the main .css-fileOpen thtmlb_stand.cssNow 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


Agenda

The last section of this presentation illustrates the configuration of Guided Procedures.

25

© SAP 2008 / Page 25

Configuration of Guided Procedures

Configuration In the configuration you can assign views to the Task Based UI. You can easily define the order and the name of each stepFor 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 Summary

This unit covered new features within the UI Configuration ToolTile LayoutDrag & Drop Skin WorkbenchConfiguration 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

Further Information

CRM Roll Out Map (internal)https://portal.wdf.sap.corp/go/crm-rollout-map

CRM Knowledge Transferhttps://websmp210.sap-ag.de/rkt-crm

SAP CRM - Help Portalhttp://help.sap.com/crm

SAP CRM – WiKi (internal)https://wiki.wdf.sap.corp/display/SAPCRMHub/Home

SAP Public Webhttp://www.sap.com/crm

28

© SAP 2008 / Page 28

Copyright 2008 SAP AGAll rights reservedNo 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 Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche Genehmigung durch SAP AG nicht gestattet. In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden.

Einige von der SAP AG und deren Vertriebspartnern vertriebene Softwareprodukte können 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 erwähnte SAP-Produkte und Services sowie die dazugehörigen Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und in mehreren anderen Ländern weltweit. Alle anderen in diesem Dokument erwähnten 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 können länderspezifische 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 enthält nur vorgesehene Strategien, Entwicklungen und Funktionen des SAP®-Produkts und ist für SAP nicht bindend, einen bestimmten Geschäftsweg, eine Produktstrategie bzw. -entwicklung einzuschlagen. SAP übernimmt keine Verantwortung für Fehler oder Auslassungen in diesen Materialien. SAP garantiert nicht die Richtigkeit oder Vollständigkeit der Informationen, Texte, Grafiken, Links oder anderer in diesen Materialien enthaltenen Elemente. Diese Publikation wird ohne jegliche Gewähr, weder ausdrücklich noch stillschweigend, bereitgestellt. Dies gilt u. a., aber nicht ausschließlich, hinsichtlich der Gewährleistung der Marktgängigkeit und der Eignung für einen bestimmten Zweck sowie für die Gewährleistung der Nichtverletzung geltenden Rechts.

SAP übernimmt keine Haftung für Schäden jeglicher Art, einschließlich und ohne Einschränkung für direkte, spezielle, indirekte oder Folgeschäden im Zusammenhang mit der Verwendung dieser Unterlagen. Diese Einschränkung gilt nicht bei Vorsatz oder grober Fahrlässigkeit.

Die gesetzliche Haftung bei Personenschäden oder die Produkthaftung bleibt unberührt. Die Informationen, auf die Sie möglicherweise über die in diesem Material enthaltenen Hotlinkszugreifen, unterliegen nicht dem Einfluss von SAP, und SAP unterstützt nicht die Nutzung von Internetseiten Dritter durch Sie und gibt keinerlei Gewährleistungen oder Zusagen über Internetseiten Dritter ab.

Alle Rechte vorbehalten.

Documents

Layout