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

Transcription

1 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

2 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

3 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.

4 9. Scroll to the end of the web.xml file and look for the alternatetheme enventry parameter. 10. Replace hpov with the name of your alternative theme, mytheme.

5 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 Time to Complete 10 Minutes This will enable you to change the Name on the front screen to reflect the Customer Name.

6 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:

7 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. 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 (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

8

9 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; 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)

10 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

11 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

12 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 14. Click File>Save

13 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

14 Title Colour 8. Locate; masthead-title a { color: #fff; font-weight: normal; font-size: 15px; white-space: nowrap; 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 17. Close Notepad

15 In order to check this, you will need to start and stop your Service 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 (ensure that you are in the SMRC Server) If you have previously been in Service Manager, then logout and clear your history.

16 Changing the Accordion Time to Complete 0.5 Hours 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

17 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

18 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. 11. In order to check this, you will need to start and stop your Service

19 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

20 Adding In Customer Website Time to Complete 0.5 Hours 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)

21 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.

22 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! 11. The MySM page displays instead of the To Do Queue.

23 12. Note: To view the To Do Queue, click Favorites and Dashboards > My To Do List. 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. The Interaction Home page appears in a new tab.

24 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.

25 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 3. Click Split to split the screen in half.

26 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. 4. Click the yellow asterisk (*) icon to add an external component.

27 5. From the New Component window, enter Company Name in the Name field, 6. From the URL field, enter a valid URL, such as 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) 10. Click the Save button

28 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