CRM 7.0 EHP1 How to create a Skin for CRM UISystem Landscape

System Landscape, this Process is built inCorporate Standard Demo Landscape, Cross Industry (Generic Demo System)Sales PlatformWeekly Refresh ; Long-term Demo Systems

Solution Components used in this Process

SAP CRM

Tool available for Skin Creation!

There is also a Demo Tool available for creation of Skinsin the Web UI. This works for "normal " web UI roles like SALESPRO; MARKETINGPRORoles.

[The Tool does not work for Interaction Center Role e.g. IC_AGENT]The script where the Tool is explained you find under

CRM Web UI Self-Branding Tool

http://xads.wdf.sap.corp:8010/xads.asp?ydemodatabase/ymain.htm?scenarioid=010000006334

If you want to create an own Skin in the manual way (this is more difficult, time consuming, but more flexible)you can use this script (same procedure as for CRM 7.0)

System Access

DEZ (weekly copy = all settings are removed/lost each week)or Long Term Demo System (DHZ ; DLZ)

User Data

Predefined User Password Role Client

UIADM or your own User with additional requested Authorization(CRM_DEV_LOGO)

welcome User for Skin Creation for CRM UI

800

document.doc Page 1 of 21

To request this authorization for your own User or DHZ and DLZ you have to Create an IT Support ticket (IT/IBC message) for your demo registered in xADS Demo Calendar by using the "Create Ticket" feature in the xADS Demo Cockpit (tab strip  "Support")

(This will create an IT Ticket on Component: STS)

to request that the additional profileCRM_DEV_:LOGO.is assigned to your user

document.doc Page 2 of 21

Purpose........................................................................................................................ 3

Enable easy Access to Skins.......................................................................................3

Copy, Modify and Upload Skin.....................................................................................7

Customize your new Skin to make it visible...............................................................13

Typical Changes........................................................................................................16

document.doc Page 3 of 21

PurposeThis script explains how to change the Skin in a CRM 7.0 System.

PrerequisitesAs you’re working in a demo system used simultaneously by many it is absolutely

necessary to make changes without effect to others. Never ever change the default layout/Skin!

Enable easy Access to SkinsAccess to all objects via Windows explorer can be setup easily if you follow the description below. Just open the wizard to create a new Network place and click on “Next” whenever required.

1. Start windows explorer and open folder “My Network Places”

2. Double-click on “Add Network Place” to start the wizard.

document.doc Page 4 of 21

3. Click on “Next”.4. Select the entry “Choose another network location” and click on “Next”.

5. Enter the following information in the field “Internet or network address”:http://<servername>:port/SAP/BC/BSP_DEV/SAP/thtmlb_styles/sap_skins/

document.doc Page 5 of 21

In case of the IDES Demo System DEZ you have to use:http://deztdc00.wdf.sap.corp:52080/SAP/BC/BSP_DEV/SAP/thtmlb_styles/sap_skins/

In case of the IDES Demo System DHZ you have to use:http://dhztdc00.wdf.sap.corp:52080/SAP/BC/BSP_DEV/SAP/thtmlb_styles/sap_skins/In case of the IDES Demo System DHZ you have to use:http://dlztdc00.wdf.sap.corp:52080/SAP/BC/BSP_DEV/SAP/thtmlb_styles/sap_skins/

Press “Next”.

6. Enter Predefined User and Password in the logon popup of DEZ (or DLZ / DHZ). 7. Choose “Next”.

document.doc Page 6 of 21

8. Choose “Finish”.

document.doc Page 7 of 21

9. If you are asked again, enter Predefined User and Password in the logon popup of DEZ.

Copy, Modify and Upload Skin1. Open the new network folder which has been created in the previous step.

document.doc Page 8 of 21

2. Open folder “Default” which contains all objects that belong to the default skin.

3. Create a new folder <skin_xyz> on your local C-drive.

Note: make sure that you write the folder in small letters! (NO Capital letters)

4. Copy the content from Network folder “Default” to your local folder <skin_xyz>.

document.doc Page 9 of 21

Info: Now you are able to make some changes to the skin by simply modifying the pictures and style sheets on your local drive. For details see chapter Typical Changes.

5. Start windows explorer again and open folder “My Network Places”.

6. Double-click on “Add Network Place” to start the wizard.

7. Click on “Next”.8. Select the entry “Choose another network location” and click on “Next”.

document.doc Page 10 of 21

9. Enter the following information in the field “Internet or network address”http://<servername>:port/SAP/BC/BSP_DEV/SAP/z_thtmlb_styles/z_sap_skins/

In case of the IDES Demo System DEZ you have to use:http://deztdc00.wdf.sap.corp:52080/SAP/BC/BSP_DEV/SAP/z_thtmlb_styles/z_sap_skins /

In case of the IDES Demo System DHZ you have to use:http://dhztdc00.wdf.sap.corp:52080/SAP/BC/BSP_DEV/SAP/z_thtmlb_styles/z_sap_skins /

In case of the IDES Demo System DLZ you have to use: http://dlztdc00.wdf.sap.corp:52080/SAP/BC/BSP_DEV/SAP/z_thtmlb_styles/z_sap_skins/

This is not the same folder as above!This is a Z Folder in Z BSP Application, as it is more secure to

put own skins in the Z Folder

Choose “Next”.

document.doc Page 11 of 21

10. Enter Predefined User and Password in the logon popup of DEZ. (or DLZ / DHZ)11. Choose “Next”.

document.doc Page 12 of 21

12. Choose “Finish”.

document.doc Page 13 of 21

13. If you are asked again, enter Predefined User and Password in the logon popup of DEZ. 14. Copy your folder <skin_xyz> to the network folder.

The folder name has to be in small letters! (no capital letters)

Info: Copy process lasts about 10-15 minutes.

document.doc Page 14 of 21

Customize your new Skin to make it visible1. Login to the SAP GUI CRM System.2. Go to transaction SM30.3. Maintain “Table/View” crmc_thtmlb_skin.

4. Choose “New Entries”.

5. Enter the following data and unmark “No Effects”:Field DataSkin Name Enter a free skin nameDescription Defined by youSource Path /SAP/BC/BSP/SAP/z_thtmlb_styles/z_sap_skins/<skin_xyz>/

document.doc Page 15 of 21

(replace <skin_xyz> with your skin name!)Version 1.0.2

Don’t forget the “/” at the end of your source path!

Info: Do not delete any existing entries!6. “Save”.7. Create Customizing request.

8. Save and continue.9. Log in to the CRM Web UI.

10. Choose “Personalize”.

11. Choose Personalize Layout.

document.doc Page 16 of 21

12. Under “Skin” choose your skin name.

You should see a picture on the right side displayed. If you do see only a red cross on the right and no picture at all, something has not worked ok and if you choose your skin you might have a display problem.

13. “Save”.

The personalized settings (e.g. changed logo and picture below the logo) can be seen on the screen.

document.doc Page 17 of 21

Note for Performance Improvements in Web UI When your skin is finished, you canvia Transaction SE80 check / set if caching for the Mime Objects for your skin is enabled:This improves the performance of the Web UI:via SE80Select BSP applicationZ_THTMLB_STYLES

Mark your Skin folderMake a right click and select:Expiration Time Client Cache

document.doc Page 18 of 21

Expiry Active = Unflagged => no caching

Choose Change button

Mark:

Mark: Expiry Active

Days: 7Choose Save (Save takes about 30 seconds)

This sets the caching for all Objects in this folder

document.doc Page 19 of 21

Typical Changes.

Replace the SAP Logo on the Top left of the screen

The picture which is loaded is defined in the style sheet “thtmlb.css” in property “.th-l-logo”. The default profile uses the picture “thtmlb_styles/sap_skins/default/styling/lshape/logo.png”” with size 111x42 pixels. To replace the picture without impacting other skins it is therefore required to replace the picture and to change the path in the style sheet.

1. Edit the new picture and use the typical cut, crop, resize and squeeze features of your graphic program to ensure that it has the same size like the default picture.

2. Rename your file to logo.png.

3. Copy your file into local folder <skin_xyz>\styling\lshape” and overwrite the existing picture.

document.doc Page 20 of 21

Replace the CRM 7.0 Logo (the picture below the SAP Logo)

The picture which is loaded is defined in the style sheet “thtmlb.css” in property “.th-l-serenity”. In the default profile this is the picture “styling/lshape/mountains.jpg” with size 172x51 pixels

1. Edit the new picture and use the typical cut, crop, resize and squeeze features of your graphic program to ensure that it has the same size like the default picture.

2. Rename your file to mountains.jpg.3. Copy your file into folder “styling\lshape” and overwrite the existing picture.

document.doc Page 21 of 21