Click on the links below to find the appropriate place in the document

Index

Click on the links below to find the appropriate place in the document

Masthead

Masthead is the large line of colour at the top of the Service Manager Screen. The Masthead also includes;

 The Customer Logo

 Changing the Banner Supporting the Logo  Changing the Title Colour

 Changing the User Login Colour

Accordion Including;

 Changing the Colour

 Changing the border Colour

My SM Pages Including:

 Adding in a new MySM page

 Adding in an external component to the MySM page

Preparation

Time to Complete 0.5 Hours

n.b all ‘times to complete’ are average and also based on the first time of carrying out the exercise. Once you are familiar with the process, the times will significantly decrease

This section describes the preparation required to prepare Service Manager. This involves creating a new file to ensure that you still keep the original in case you need to compare the original or revert back. This will enable you to point Service Manager to the new file you have created

1. From the desktop, right click on My Computer and click Explore. 2. Navigate to the following root directory for the web tier.

(This location will change depending on where you have installed Service Manager)

C:\HP\RC\servers\server-0\webapps\sm\cwc\js\extjs\theme

2. Select and copy the hpov folder.

3. Rename the new folder to a name, such as myTheme. (ensure case sensitivity with your name here as you will need to use this name later)

n.b At this point it is worth saving this file path to ‘Favourites’ as you will constantly be going back to this directory

4. Open the myTheme folder, and then locate the file named hpov.css. 5. Rename the file hpov.css to the same name as the folder, myTheme.css. (same case as folder name – the CSS file name and the theme's directory name must match.)

6. Navigate back to the root web tier directory:

C:\HP\RC\servers\server-0\webapps\sm

7. Double Click to Open the WEB-INF folder.

8. Double click to open the web.xml file or open using a text editing tool such as Notepad.

9. Scroll to the end of the web.xml file and look for the alternateTheme env-entry parameter.

11. Click File > Save to save edits to the web.xml file. 12. Close the web.xml file.

Service Manager is now pointing to the myTheme folder.

Changing the Splash Screen

This will enable you to change the Name on the front screen to reflect the Customer Name.

1. Navigate to the following directory:

C:\HP\RC\servers\server-0\webapps\sm\WEB-INF\classes\com\hp\ov\cwc\web

2. Double click to open the app_labels.properties file.

3. Change the lines according to your company requirements. In particular, modify the App.Name and App.Title field values to the following:

4. In this instance the following has been changed

App.Name = Vodafone Service Manager App.Title=Vodafone Service Manager

Please change to the appropriate company name

This now changes the splash screen. 5. Click File>Save

6. Close Notepad

In order to check this, you will need to start and stop your Service

1.

2.

3.

(ensure that you are in the SMRC Server)

In addition to this, if you have already been in Service Manager previously, then logout and clear your history

MastHead

Time to Complete 1.5 Hours

In this section you will learn how to change the Company Logo and alter the colours to reflect the company’s colours

MastHead

Before starting this exercise, it is worth understanding that the colours that company use are based on Hex Colours. For more information go into Google and search on Hex Colors.

If you want to find out exactly the Hex Colour that a company is using then it is worth installing a free piece of software that can be found at;

http://www.iconico.com/download.aspx?type=free

The application to download is ColorPic

(obviously this is not a HP application and therefore no support will be provided if you chose to download this application)

Once you have the exe file then you can open it up to point to the colour that you want to obtain

Hex Colour Number

Changing the Logo

1. Open up Internet Explorer and find a Company Logo that you wish to copy 2. Copy the logo and save it.

3. Save the file as a .gif file or rename it once you have saved it to a .gif file 4. Save the logo in the following directory;

C:\HP\RC\servers\server-0\webapps\sm\cwc\js\extjs\theme\myTheme\images\backgrounds

5. Navigate to the root web tier directory. (under favourites if you saved it)

C:\HP\RC\servers\server-0\webapps\sm\cwc\js\extjs\theme\myTheme

6. Open myTheme.css 7. Find Masthead

8. Under the original document, there is an image saved under logoMini.gif

9. Either change the file name on the logo you have saved to logoMini.gif (after making a copy of the original) or rename the file location in Notepad to the name of your saved Logo file

10.The height and width need to be changed

11.The dimensions chosen are the same as the dimensions shown on the saved document

12. Locate; .masthead { height: 27px;

font-family: Arial, Tahoma, Helvetica, sans-serif;

13. The height needs to be equal to or greater than the size of the logo dimension. In this instance the height needs to be 40 or greater. A greater number makes it larger than the logo

Changing the banner supporting the Logo

1. Navigate to the root web tier directory. (under favourites if you saved it)

C:\HP\RC\servers\server-0\webapps\sm\cwc\js\extjs\theme\myTheme 3. Open myTheme.css 3. Find Masthead 4. Change: masthead-cnt { background: #036; width: 100%;

5. The background here will change the banner at the top with the logo. 6. Replace the #036 with the Hex Colour Number.

7. The Hex Colour Number should be 3 or 6 numbers. If you have a Hex number that is less than 6 then add in Zeros to make it up to 6

Title Colour

9. This is the colour and size the title appears in.

10. #fff is the Hex Colour for White. If this needs to be changed then change it here. Hex colours can be looked up to find the appropriate colour.

11.If you want to increase the size, then change font-size

12.Font-weight can be either ‘normal,’ ‘thick,’ or ‘thicker.’

User Name Logged In

13. Locate; masthead-user-name { color: #fff; font-weight: normal; font-size: 10px; white-space: nowrap;

14.This is currently set to white (#fff) Change the colour to make this change

15.Font changes are the same as above 16. Click File>Save

In order to check this, you will need to start and stop your Service

1.

2.

3.

(ensure that you are in the SMRC Server)

If you have previously been in Service Manager, then logout and clear your history.

Changing the Accordion

1. Navigate to saved theme file;

C:\HP\RC\servers\server-0\webapps\sm\cwc\js\extjs\theme\myTheme

2. Open up myTheme.css 3. Find accord

4. Locate; .x-accordion-hd { color:#222; padding-top:4px; padding-bottom:3px; border-top:0 none; font-weight:normal;

background: transparent url(images/light-hd.gif) repeat-x 0 -9px; 5. In the example above the color has been set to black. (#222) If you want

this to be white then change color to be #fff 6. Change background

a. Remove ‘transparent url(images/light-hd.gif) repeat-x 0 -9px;’ b. Add in the required colour

c. This should now read;

i. background : #f00000;

ii. #f00000 is red in this instance but change this number to read the hex colour you require

Change the border around the Accordion

7. Locate .x-panel-noborder in the .css file

8. The old value reads;

.x-panel-noborder .x-panel-header-noborder { border-width:0;

border-bottom:1px solid #99bbe8; 9. Change to read;

.x-panel-noborder .x-panel-header-noborder { border-width:0;

border-bottom:1px solid #fff; 10.This will change the border to white.

1. Double click on the Services Icon at the bottom left of your screen 2. Stop the HP Release Control Server

3. Start the HP Release Control Server 12.Clear the cache history as before

Adding In Customer Website

1.

Log on to Service Manager Web client as a system administrator

falcon.

Login ID: Falcon

Password: hpswDemo$09!

2.

Click

Login

.

3.

By default, the default To Do queue opens. This view displays a

list of records in the operator’s To Do queue.

4.

Select

System Administration

>

Ongoing Maintenance

, and

then click

Operators

.

5.

From the Login Name field, enter

cnewby

, and then click

Search

.

(this is just the name of an operator – choose any login that you

want to work with)

6.

Select the

Startup

tab.

7.

From the MySM Home Page field, select

Interaction Home Page

from the drop-down.

This provides the user with access to MySM pages, and sets the

default page to the Incident Home Page.

After the user logs in, the user will be able to change the MySM page view and create new MySM pages.

8.

Click

OK

to save the modifications and close the operator record.

9.

Logoff as user falcon by clicking

Logout

.

10.

Log in as Clark Newby

(cnewby)

from the Web client.

Login ID:

cnewby

Password:

hpswDemo$09!

12.

13.

View a different MySM page by selecting another MySM page

from the Select Page drop down menu.

14.

From the Select Page drop down, select

Interaction Home

Page

.

Adding a New MySM Page

1.

As the user

cnewby

, click the

New Page

button.

Important: The following page will be displayed. It is very important to select the page layout here, since it cannot be changed later.

Use the icons in the top left of the page to set up your page layout. They are (top left to lower right):

Remove Layout to undo your previous action. You can continue to click this icon multiple times to undo each of layout actions you performed.

Add Component to add a new component, including a graph or external widget to your page.

Split to divide the page into two sections, one above the other. Each section has its own layout controls at the top left. If you click the Split icon while inside one of the sections, it will split that section into two side-by-side sections.

Switch to Vertical/Switch to Horizontal to change the direction in which the information in the section is laid out.

Switch to Tabs to go to a tabbed layout.

2.

Click change to Horizontal

Adding an External Component in a MySM

Page

1.

Continue to stay logged into the Service Manager Web client as

Clark Newby (

cnewby

).

Login ID: cnewby

Password: hpswDemo$09!

2. From the MySM view, open Clark’s Page if not already open by selecting Clark’s page from the Select Page drop down menu.

3. From the blank component pane, click the Add Component icon. The Components Gallery window opens.

5. From the New Component window, enter

Company Name

in the

Name field,

6. From the URL field, enter a valid URL, such as

http://www.vodafone.co.uk/personal/index.htm

7.

Click

OK

to save and exit.

8.

To add in another part of the page, click

Components

.

9.

Add in the Incident List (or alternative suitable component)

11.

From the Save to Page Gallery window, in the Name field enter

CUSTOMER NAME

, and then click

OK

to save the MySM page.

12.

Delete the original mySM page so that you are only left with the

Vodafone tab when the user logs in