Customizing the Matrix Self Service Portal

[#1]

I was playing around with the BladeSystem Matrix creating some new demo videos, and I thought why not dig into the portal skinning features to create a custom look for my system.

The skinning feature is intended to let companies personalize the portal with their logos and product names, replacing the standard HP skin that ships with the product. In this example, my customer is the fictitious Acme Corporation.

Here are the steps I went through:

1. Copy C:\Program Files\HP\Insight Orchestration\webapps\hpio-portal.war to my desktop


2. Rename to hpio-portal.zip


3. Copy hpio-portal.zip to hpio-portal.orig.zip


4. Unzip hpio-portal.zip


5. Browse to the hpio-portal/skins directory, and create a new folder "acme". You should see the following:
   
   


6. Copy your new images into the acme directory. The image names, format, and recommended sizes are shown in the table below. I found there is minor flexibility in the sizes of images you create, but in general things look a little nicer if you stick to the sizes shown in the table.
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Filename	Format	Recommended Size in pixels (w x h)
   LoginScreenLogo.png	PNG	90 x 72
   LoginScreenImage.jpg	JPEG	408 x 287
   TitlebarLogo.gif	GIF	42 x 26
   TitlebarImage.png	PNG	300 x 40

   
   
   


7. Edit the skinConfig.xml file in the skins directory. Here's my updated content:
   
   
   

   <properties>
        <property><key> personalizeMode                 </key><value>insight</value></property>
        <property><key> skinName                        </key><value>acme</value></property>
        <property><key> brandName                       </key><value>Acme Corporation</value></property>
        <property><key> portalName                      </key><value>Developer Self Service</value></property>
        <property><key> bsaURL                               </key><value></value></property>
   </properties>

   
   


8. 
   

   rezip hpio-portal directory
   Once you have re-zipped hpio-portal, you might want to open it and check that the top component of the zip file is the contents of the hpio-portal folder, and not a folder called "hpio-portal". Windows XP zip default behavior is to create that top level folder in the zip archive. Compare with the contents of hpio-portal.orig.zip to make sure you get this correct. Otherwise your portal won't restart correctly in the later steps.

   
   


9. 
   

   rename hpio-portal.zip to myportal.war file

   
   


10. 
    

    Stop the Insight Orchestration service

    
    


11. 
    

    Rename C:\Program Files\HP\Insight Orchestration\webapps\hpio-portal.war to hpio-portal.war.orig

    
    


12. 
    

    Copy myportal.war to C:\Program Files\HP\Insight Orchestration\webapps\hpio-portal.war

    
    


13. 
    

    Delete the folder in the C:\Program Files\HP\Insight Orchestration\work directory with a name starting with Jetty and containing the name hpio.portal.war
    

    
    


14. 
    

    Start the Insight Orchestration service

    
    

 Updated Portal

Here's my updated login screen to the self service portal, and a zoom in on the updated window bar after login is complete.

 

ioconfig Command

The ioconfig command in the C:\Program Files\HP\Insight Orchestration\bin folder is a useful utility that lets you switch between skins, for example: ioconfig --skin insight will change back to original skin. See ioconfig --help for more information on this command and options.

Send your examples

I hope this quick overview is helpful to getting you started. Send me examples of your self-service portal customizations!

[#2]

Is it possible to change the color scheme of the portal?