Simple Steps for Creating Custom Widget in WCS 8

In one of my earlier post (http://myjavakitchentime.blogspot.com/2015/11/creating-new-commerce-composer-widget.html), I have detailed the steps for creating a custom widget in WebSphere Commerce 7. In this post, I will be explaining how to create a simple widget in WebSphere Commerce 8. Though there is no much difference between the steps, I have simplified this post to help a new comer to easily understand how to create a custom widget by following the below simple steps.

The steps are given below.
 

1.     Create a new project in your WebSphere Commerce Developer workspace

 

a.     Right-click within the Enterprise Explorer view. Select New > Project.

b.     In the New Project wizard, expand General. Select Project. Click Next.

c.     For the Project name field, enter a name for the temporary project. For example, NewWidgetProject.

d.     Click Finish.

 

2.     Create the input pattern file

a.     Right-click the temporary NewWidgetProject project. Select New > File.

b.     In the New File wizard, ensure that your temporary project is selected as the parent folder. Enter a File name for the pattern input XML file. For example, NewWidgetPatternInputFile.xml.

c.     Click Finish.

d.     Right-click your new pattern input XML file within your temporary project. Select Open With > XML Editor.

 

Copy the following code into the file:

 

<pageLayout vendor="myCompany" targetFolder="NewWidgetProject">   <widget>     <widgetDef identifier="myNewContentRecommendationWidget"       UIObjectName="myNewContentRecommendationWidgetObject"      displayName="My New Content Recommendation Widget"      description="This widget displays marketing content, such as ads, on a store page"      widgetDisplayGroups="AnyPage,SearchPage"      widgetRestrictionGroups="AnyPage,SearchPage" >       <property name="widgetOrientation"        displayName="Widget Orientation"/>       <property name="numberOfContentToDisplay"                 displayName="Maximum number of content to display"/>     </widgetDef>     </widget> </pageLayout>

 

3.     Run Jet transformation

a.     Right-click your pattern input XML file. Select Run As > Run Configurations.

b.     In the Run Configurations wizard, double-click JET Transformation from the list of filters. The configuration options for the JET Transformation display.

c.     Ensure that the value of the Name field is the name of your pattern input XML file.

d.     In the Main tab, ensure that the value of the Transformation Input field is the file path within your workspace to the pattern input XML file. For example, NewWidgetProject\NewWidgetPatternInputFile.xml

e.     In the Transformation section, select com.ibm.commerce.toolkit.internal.pattern.pageLayout for the value of the ID field.

f.      Optional: Specify the severity level for the Display Message logging. The default value is information.

g.     Click Apply > Run

 

You can see that new folders with names DataLoad, Stores and LOBTools got generated inside your new project (ie, inside NewWidgetProject folder in this example).

 

Given below is a sample folder structure which got generated after JET transformation.

 

4.     Move the generated files and folders to WCS default project locations.

 

a.     Copy the Widgets-test folder which is present under NewWidgetProject -> Stores ->WebContent to Stores ->WebContent folder. Modify the JSP file, if you want to display some content/custom message in the front end.

b.     Copy the test folder which is present under NewWidgetProject  -> LOBTools -> src -> com to LOBTools -> src -> com folder

c.     Copy the test folder present under NewWidgetProject  -> LOBTools ->WebContent -> WEB-INF -> src -> xml to LOBTools ->WebContent -> WEB-INF -> src -> xml folder.

5.     Open wc-dataload-env.xml file and modify the database connection parameters.

 

6.     Execute the dataload utility as follows.

Dataload.bat C:\IBM\WCDE80\workspace\< NewWidgetProject>\DataLoad\widget\wc-dataload-widget.xml

Replace < NewWidgetProject> with the name of the custom project that you have created as part of widget creation. In this example, it is NewWidgetProject.

When prompted for store identifier, provide the SAS store identifier.

 

7.     Refresh the projects and restart the server once. You should be able to see the newly created widget in your CMC

 

Note: Follow this approach for creating simple widget for learning purpose for the first time. If you are creating the widget for second time, using the same vendor name (in this example “myCompany”) used earlier, you need to merge the files in Stores & LOBTools folder instead of copy pasting the folders.