Extending the Theme Module

[jamie_cawley]

Using Extending SAP WCEM 2.0 as a prerequiste, this blog will walk you through the steps necessary to customize the them of your site.

Switch to the Web Channel Module Development Perspective by choosing the menu Window -> Open Perspective -> Other - > Web Channel Module Development and select the menu File -> New -> Web Channel Module.  Provide the following values as shown by the screenshot:

Click the Finish button and then OK to sync used DCs.  In the Module Explorer Expand comp.theme -> cust -> Part: md -> cust -> comp.theme -> md.  Open the config-metadata.xml file by right clicking and choosing Open With… and selecting Text Editor from the list and click OK. Modify the file as show below making sure to provide the correct namespace and save the file when complete:

<?xml version="1.0" encoding="UTF-8"?>          

<configuration-data xmlns="http://www.sap.com/wec/frw/tc/modules/configmetadata">

<property-group description="comptheme.md.theme_compartments" name="themeProperties" ressourceKeyUsed="true"> 

  <property name="stylesheetPath" defaultValue="cust/styles/custom" description="comptheme.md.stylesheetpath" ressourceKeyUsed="true" type="List">    

   <allowedValue description="cust/styles/custom" ressourceKeyUsed="false" value="cust/styles/custom"/>      

  </property>

</property-group>

</configuration-data>

1-1-1 Open the metadata.xml file by right clicking and choosing Open With… and selecting Text Editor from the list and click OK.  Change the moduleType value from “application” to “config”.

In the Module Explorer Expand comp.theme -> cust -> Part: md -> META-INF and open the file module.properties.  Add “styles” to the modulePart confirming that there are no spaces between md and style.  The file should resemble

sap.com.moduleId=comp.theme

sap.com.moduleNamespace=cust

sap.com.extendsNamespace=sap

sap.com.modulePart=md,styles

In the Module Explorer in the Web Channel Module Development perspective navigate to comp.theme -> cust -> Pard: md - > META-INF, right click on the folder “META-INF” and select New -> Folder.  Provide the Folder name “resources/cust/comp.theme/styles/custom” and click on Finish

Switch to the Development Infrastructure Perspective by choosing the menu Window -> Open Perspective -> Other - > Development Infrastructure.  Within the SAP-WEC-FRM software component, select “wec/frw/tc/ui/component/template” from the list and right click and choose Sync / Create Project -> Create Project.  Click OK on the Create DC Projects dialog and select Yes on the Confirm Perspective Switch dialog.

In the Java EE perspective under the Project Explorer tab on the left you should now see [track name[#]] wec/frw/tc/ui/component/template.  Expand [track name[#]] wec/frw/tc/ui/component/template -> src -> META-INF -> resources -> sap -> comp.theme -> styles -> pebbles.

Copy all of the contents under the pebbles folder, expand [track name[#]] test/cust/mc/custheme/md -> src -> META-INF -> resources -> cust-> comp.theme -> styles -> custom and paste all of the contents under the custom folder.  Open the file “stylesheet.css” under the custom folder and select the menu Edit -> Find/Replace.  Provide the following for the Find value:

/javax.faces.resource/sap/comp.theme/styles/pebbles

Provide the following for the Replace value:

/javax.faces.resource/cust/comp.theme/styles/custom

Click on the Replace All button.  If prompted to make the file writable select Yes.  This should result in approximately 709 matches.  Make any desired changes to stylesheet.

Switch to the Development Infrastructure Perspective by choosing the menu Window -> Open Perspective -> Other - > Development Infrastructure, select your development component [track name[#]]  test/comm/main/leanapp/mysite.  In the Component Properties tab select the Dependencies tab, click the add button and in the “Type text to filter” text box type “test/mysite/mc/custheme/dpu”, select the returned entry and click Finish. 

Select the development components [track name[#]]  test/comm/main/leanapp/mysite and [track name[#]]  test/mysite/mc/custheme/dpu and right click on one of them.  Select the Deploy option and click on the Deselect All button on the Deploy DCs dialog and then click the OK button.

Open the Web Channel Builder and select the Application menu.  Choose your desired applicaiton and enter into a pending configuration, create one if necessary.  Select the Edit button to modify the pending configuration.  Change the default Namespace of the comp.theme module from sap to cust and save the configuration.  Select the comp.theme module and click the edit button.  Under Allowed Stylesheets select "custstyles/custom" and save your changes and go back to the main configuration. 

Now select the uicomponentconfig module and click the edit button. Click the Insert button under the Settings tab and provide the theme name “Custom” with the css/mime theme path of  “cust/styles/custom”.  Click the Save button and then click the Log Off link.  Due to the Web Channel Builder use of caching it is now necessary to log off and back on to realize the theme changes.

Log back onto the system and select the currently pending configuration.  Select the Theme tab, click the Edit button, select the theme custom and click the save button.  You should now be able to preview your changes.

In addition to this blog please check the WCEM WIKI as the central info hub for all WCEM related information. Also read the SAP Expert Blogs to get first hand information and guidance about SAP Web Channel Experience Management.