Rating WCM content Marwa Arafa

Transcription

1 Rating WCM content Marwa Arafa Senior Software Engineer Cairo Technology Development Center (CTDC) IBM Egypt June 2013

2 About the Author Marwa Arafa is a senior software engineer in the Cairo Technology Development Center, IBM Egypt. She has more than seven years of experience in web applications development on the WebSphere Portal Server, IBM Web Content Manager and Java/ J2EE based Web Applications. Marwa is IBM Certified Websphere Portal Solution Developer and Sun Certified Web Component Developer. She holds a bachelor's degree in Computer Engineering. You can reach her at marafa@eg.ibm.com. 2

3 Introduction Rating is the evaluation or assessment of something, in terms of quality. Users rate resources by assigning numeric or other values to resources to indicate how much they like the resource. Thus, a Rating is a value associated to a resource. Ratings are selected from a range of possible values where one end of the range usually refers to "like" and the other end to "dislike". Users can rate portal content and view the ratings. This allows to better organize, categorize, and find portal content, including custom content, if it is available in the portal. In general, all content in a portal that can be uniquely identified can be rated. Users can apply ratings both publicly and privately for the following purposes: Public rating helps users categorize, evaluate, and find portal content based ratings by other users. Private rating can help users create their own personal way to categorize, evaluate, and find portal content. To create and reference ratings, you need to insert the following HTML snippet into your presentation template or menu component, <div id="unique_id" > <div dojotype="com.ibm.widgets.inlinerating" resourceid="my_id" resourcetitle= my_title ratingscope="all community personal personal_public personal_private community_personal_public" </div> </div> You can configure inline rating widget instances by setting the following Javascript parameters, id = unique_id Use this attribute to specify a unique ID for parsing all surrounding <div> tags to enable your widgets resourceid Use this parameter to specify the identifier of the piece of content that will show the widget. This needs to be unique. For example, for a portal page specify the portal object ID of that page. 3

4 resourcetitle Use this parameter to specify the title of your piece of content. This title string is passed to the dialog box when the user opens it to add a rating. If you do not want the dialog box to show a title, you can omit the value for this parameter. ratingscope Use this parameter to specify the scope of ratings that you want to show in this inline widget. Specify one of the following values: ALL COMMUNITY PERSONAL PERSONAL_PUBLIC PERSONAL_PRIVATE COMMUNITY_PERSONAL_PUBLIC Please refer to this link for the Inline rating widget parameter reference, _ref_inl_rate.html To actually enable the widgets, you need to parse the surrounding <div> tag within your jsp by using the following code: dojo.addonload(function(){ dojo.foreach( ["uniqueid1", "uniqueid2", ], dojo.parser.parse, dojo.parser); }); The presentation template or the menu that includes the widget must ensure that the lotusui30 stylesheet class is assigned to the markup that contains the widget. Enclose the widget within a <div> element that references the class. For example, <div class="lotusui30">... </div>. The next section describes a simple example to reference rating widget from a menu component. 4

5 Example to reference rating widget from a menu component In this example I will create a page which lists all mobiles where each mobile object has 3 attributes (name, image & rating) using a menu component. Please see the image below. I used Web Content Manager Version 8.0 to implement this example. 1)Creating the library To create the library, perform these steps: 1.Log in to the WebSphere Portal, open the Administration page, and navigate to Portal Content > Web Content Libraries as shown in the following figure. 5

6 2.Click the Create new Library button, and type MobilesLibrary in the Web content library name field. 3.Select English as the default language from the Language drop-down box. 4.To safeguard our library from being accidentally deleted, select the Prohibit library from being deleted box. 5.Ensure the checkbox for the library being Enabled is selected as by default. 6.Click the OK button. The following figure shows the completed steps prior to clicking the OK button. 6

7 By default, the MobilesLibrary library is not automatically listed in the Library Explorer. To select the library to be used in Web Content Manager, perform these steps: 1.Navigate to Applications > Content > Web Content Management page. 2.Expand the Preferences menu and click the Configure option. 3.Expand the collapsed Library Selection section. 4.Using the Add> button move the MobilesLibrary library from the Available Libraries to the Selected Libraries, click OK. 7

8 5.Select the checkbox Show new libraries in the library explorer, This option removes the need to manually add the libraries to the authoring interface in future. 6.Click the OK button to save these preferences. 2)Creating the site area To create the site area: 1.Click on the New button in the Library Explorer, and select Site Area shown in the following figure. 2.Type in Mobiles for the Name and Display Title fields. 3.Select MobilesLibrary from Select Location dropdown box. 8

9 4.Click the Save and Close button. 3)Creating the authoring template To create authoring template: 1.Navigate to the Library Explorer, Applications > Content > Web Content Management. Select the MobilesLibrary library in the Library Explorer Click the New button, and select Authoring Template > Content Template. 2.Type Mobiles_AT in the Name field. 3.Click on Manage Elements button. 4.Select Text from the Element type dropdown box. 5.Type MobileName in the Name field (see figure below). 9

10 6.Click the Add button. 7.Select Image from the Element type dropdown box. 8.Type MobileImage in the Name field (see figure below). 9.Click the Add button. 10.Click the OK button to save your changes and return to the authoring template. 11.Click the Save and Close button. 4)Creating the contents To create a content item, follow these steps: 10

11 1.From the Library Explorer, click the New button and select Content > MobilesLibrary/Mobiles_AT 3.In the name field, enter Mobile1. 4.Select Mobiles site area from Select Location dropdown box. 5.In the MobileName, enter HTC Wildfire S. 6.In the MobileImage, enter the path of an image. 7.Click Remove Workflow button. 8.Click the Save and Close button. 9.Repeat the previous steps to create several contents. 5)Creating the menu component To create the menu component, follow these steps: 1.Click New > Component > Menu. 2.In the Name field, enter MobilesMenu. 3.In the Menu Criteria section, under Select the criteria to use when searching for content: choose Authoring Templates. 11

12 4.In the Authoring Template section, click on Add Authoring Templates and choose Mobiles_AT. 5.Click OK. 6.In the Menu design properties, leave the default options. 7.In the List Presentation Markup section add the following: Header: <H1>Mobiles available for purchase</h1> Result design: <b>[element context="autofill" type="content" key="mobilename"] </b> <br/> [Element context="autofill" type="content" key="mobileimage"] <br/> <b>rating: </b> <div class="lotusui30" id="inlinewidgets_[property context="autofill" type="content" format="uri" field="id"]"> <div dojotype="com.ibm.widgets.inlinerating" resourceid="[property context="autofill" type="content" format="uri" field="id"]" resourcetitle="[element context="autofill" type="content" key="title"]" ratingscope ="all" displaytwisty = "HIDDEN" showdialoglauncher = "false" onstarclickopendialog = "true customlabel ="" > </div> </div> <script type="text/javascript"> dojo.addonload(function() { dojo.foreach( ["inlinewidgets_[property context="autofill" type="content" format="uri" field="id"]"], dojo.parser.parse, dojo.parser); }); </script> Separator: <HR/> 12

13 8.Click the Save and Close button. 6)Creating the Presentation template To create the presentation template, follow these steps: 1.From the Library Explorer, click the New button and select Presentation Template. 2.Type in the Name: field, Mobiles_PT. 3.In the Presentation Template Options section paste the following code into the Presentation Markup: area. <html> <body> [Component name = "mobilesmenu"] </body> </html> 4.Click the Save and Close button. In order to add the authoring and presentation template maps, do the following: 1.From the Library Explorer, navigate to Content > Mobiles site area. 2.Select the Mobiles site area and click the Edit button. 3.From the Site Area Properties section, click the button Manage Template Maps. 4.Click the button, Add. 5.Select Mobiles_AT for the Authoring Templates and select Mobiles_PT for the Presentation templates then click OK. 13

14 6.Click the OK button, and then the Save and Close button to apply the mapping. 7)Creating a Portal page and adding the Content Viewer portlet To create a Portal page and to add the Content Viewer portlet, do the following: 1.Navigate to the Administration tab. 2.On the left hand side, expand Portal User Interface if it is not expanded. 3.Click on Manage Pages. 4.Click on Content Root > Home. 5.Click New Page. 6.In the Title field, enter My Mobiles. 7.Click OK. 8.In the list of pages, navigate to your created page. 9.Select the Edit Page Layout icon. 14

15 10.Click the Add Portlets button. 11.In the Search window, type Web Content Viewer and click Search. 12.In the returned portlets list, select Web Content Viewer. 13.Click OK and click Done. In order to configure the web content viewer portlet to show the Mobiles_PT presentation template, do the following: 1.Select the Edit Page Layout icon for My Mobiles page and then select Configure. (see the image below) 2.Select Content Item from Content Type dropdown box, Select Mobiles in the Content, and Select Mobiles_PT in the Alternate Presentation Template. 15

16 3.Select Mobiles in the Site Areas. 4.Click OK and then click Done. Note: The ratings widget requires Dojo to be present, so the page's profile may need to be changed to one which makes Dojo available when the widget needs it. This can be done by changing the Page Profile to "full" in the Page Properties section or 16

17 by changing the theme default profile to ensure that all the pages included in our site are having full profile. Steps to change page profile : 1.Go to Administration > Manage Pages. 2.Edit the page properties of the page you want to change its profile. 3.Expand the Advanced Options section. 4.Select the option I want to set parameters. 5.Create parameter with the name resourceaggregation.profile and value that points to the profile override on the page. For Example: profiles/profile_full.json. 6.Add the new parameter. 7.Select OK to exit the parameters screen. 8.Select OK to save the Page Properties. Please refer to this link for more information about Configuring widgets to work with WebSphere Portal : %2Fcom.ibm.wbpm.bspace.imuc.doc%2Ftopics%2Ftcfg_bsp_portal.html 17

18 After performing all the above steps, Navigate to your portal page My Mobiles to see the result: (see the image below) 18

19 References: IBM Web Content Manager 8 Product Documentation: lookupname=ibm+web+content+manager+8+product+documentation#action=opendocume nt&content=catcontent&ct=proddoc Building a Sample Website Using IBM Web Content Manager 7.0 (Redbook): 19