Changing skin and company logo on SAP CRM WEB UI

A typical requirement when working on a new SAP CRM implementation is to change the SAP CRM WEB UI skin or change the company logo. In this blog post, I will talk about what's all that's possible with SAP CRM skin personalisation and how. We will also see how the company logo and navigation picture can be changed in the layout of SAP CRM WEB UI screen.

SAP Standard Skins

Skins define the way the user interface looks and each organisation might want it to look in a certain way. You can change the visual layout of the CRM WebClient UI using the Skin dropdown list located under Personalize -> Personalize Layout in the navigation frame.

The following standard skins are available on SAP CRM WEB UI
- Signature Design
- Default
- Serenity
- New Hope
- High Contrast

Creating your own skin

You can create your own skin as per client requirements by copying one of the existing SAP standard skins available and making the required changes. Lets learn how:

The standard skins are store in the MIME repository of BSP application THTMLB_STYLES. Each skin can contain a number of stylesheets (CSS styles).

Here are the steps you can follow to create a new skin and make it available on SAP CRM WEB UI and setting this skin as a default skin for a business role.

Remember skins are stored in a BSP application, so you will need to create a BSP application first:

1. Go to SE80

2. Create a custom BSP appplication(name starts with Z). You can use a name similar to thtmlb_styles(the BSP application that stores the standard skins.

Now that the BSP application is created, you can store skins in it. You definitely do not have to start from scratch when it comes to having your own skin. You can just copy an existing skin and make the required modifications.

3. Open the skin workbench in Customizing for Customer Relationship Management under UI Framework -> UI Framework Definition -> Skins -> Access Skin Workbench.

4. Select an SAP skin and choose Copy SAP Skin.

5. Choose the target BSP (created in step 2) and enter a skin name and description for your new skin.

The copied skin will now appear in the area below the SAP skins. You can change the layout of the skins by exploring the contents of the skin, replacing the image files and pretty much everything.

Next, we have to make sure that the skin created is available on SAP CRM WEB UI.

6. Go to Customizing for Customer Relationship Management under UI Framework -> UI Framework Definition -> Skins -> Define Skins.

7. Select 'New Entries' to add your skin and enter the required information.

Next, we will set the newly created skin as the default skin for a business role. Remember, each business role has a technical profile assigned to it and that is where you can specify the skin layout.

8. Go to Customizing for Customer Relationship Management under UI Framework -> Technical Role Definition -> Define Technical Profile.

9. Select the technical profile, view details and enter the skin name.

10. Finally make sure that this technical profile is assigned to the business role by going to Customizing for Customer Relationship Management under UI Framework -> Business Roles -> Define Business Roles.

Exclude Skins

Although the user for any business role will see the default skin that assigned to the technical profile within his business role, but he can always choose a different skin by clicking on the 'Personalize' button. Now, if you don't want the user to be given too many choices for skins, you can exclude a few skins from appearing in the drop-down. Please note that you do not need to delete the skins.

To exclude the skins:
1. Go to SM30.
2. Enter table CRMC_THTMLB_SKNE.
3. Choose 'New Entries' and enter the skins that you want to exclude.

Changing the logo

To change the logo, open the skin workbench in Customizing for Customer Relationship Management under UI Framework -> UI Framework Definition -> Skins -> Access Skin Workbench. If you already created your own skin follow the steps, otherwise refer to the steps mentioned above to create your own skin.

1. Within your skin folder, go to Styling -> Lshape.

2. Replace logo.png witha  new logo.

Similarly, you can change the navigation picture by going to the same folder as the logo folder and change the mountains.jpg file.

Please note, however, that if you are not replacing the image files, but adding them, you must reflect the corresponding changes in thtmlb.css file to make sure that these images are used.

I hope that you have found this blog post useful. If you have any doubts, please drop a comment.

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...