Displaying feeds using Digital Data Connector - Yahoo News Demo using DDC

Transcription

1 Displaying feeds using Digital Data Connector - Yahoo News Demo using DDC This article demonstrates how to display news feed(yahoo) in portal without any coding required. One of new feature introduced in the Websphere Portal and Content Management 8.5/ is Digital Data Connector, where WCM authors can configure RSS/ATOM feeds and make style changes in the WCM itself and display them on portal. 1. DDC is enabled by default in the WP8.5 but if you are on the we need to enable it using the following command. ConfigEngine.sh action-enable-plr -DwasPassword=password -DPortalAdminPwd=password 2. By Default, out of the box DDC can read the both ATOM and RSS feeds ( But need to configure or Resource environment provider properties) 3. Using yahoo news feed to demonstrate DDC to render the yahoo news using the Web Content Viewer portlets Sample Feed XML format <rss xmlns:media=" version="2.0"> <channel> <title>yahoo News - Latest News & Headlines</title> <link> <description>the latest news and headlines from Yahoo! News. Get breaking news stories and in-depth coverage with videos and photos.</description> <language>en-us</language> <copyright>copyright (c) 2014 Yahoo! Inc. All rights reserved</copyright> <pubdate>thur, 01 Jan :46: </pubDate> <ttl>5</ttl> <image> <title>yahoo News - Latest News & Headlines</title> <link> <url> US_s_f_p_168x21_news.png</url> </image> <item> <title>wreckage, bodies reveal jet's fate days after it disappeared</title> <description> <p> <a href=" html"> <img src=" UmFb53Q--

2 /YXBwaW_AP_FINANCIALTIMES/61a cb f6a a8d_original.jpg" width="130" height="86" alt="wreckage, bodies reveal jet&#039;s fate days after it disappeared" align="left" title="wreckage, bodies reveal jet&#039;s fate days after it disappeared" border="0" /> </a> Images of debris and a bloated body flash across Indonesian television screens. </p> <br clear="all" /> </description> <link> html</link> <pubdate>thur, 01 Jan :46: </pubDate> <source url=" Press</source> <guid ispermalink="false">wreckage-bodies-reveal-jets-fate </guid> <media:content url=" 44cb333690f6a a8d_original.jpg" type="" width="130" height="86" /> <media:text type="html"> <p> <a href=" html"> <img src=" _AP_FINANCIALTIMES/61a cb333690f6a a8d_original.jpg" width="130" height="86" alt="wreckage, bodies reveal jet&#039;s fate days after it disappeared" align="left" title="wreckage, bodies reveal jet&#039;s fate days after it disappeared" border="0" /> </a> Images of debris and a bloated body flash across Indonesian television screens. </p> <br clear="all" /> </media:text> <media:credit role="publishing company" /> </item> </channel>

3 </rss> 4. Used default content library that is "Web Content" for demo 5. Following are things need to create in WCM (not concentrating much on UI ) a. Authoring Template with one text element b. Create PZN component with pluggable resources as content spot

4

5 Header markup <div role="main"> <div id="header"> <h1>[plugin:listrenderingcontext action="getlistproperty" key="title"]</h1> <div id="channelimg"> <a href="[plugin:listrenderingcontext action="getlistproperty" key="link"]"> <img name="[plugin:listrenderingcontext action="getlistproperty" key="imagetitle"]" title="[plugin:listrenderingcontext action="getlistproperty" key="imagetitle"]" alt="[plugin:listrenderingcontext

6 action="getlistproperty" key="imagedescription"]" src="[plugin:listrenderingcontext action="getlistproperty" key="imageurl"]" height="[plugin:listrenderingcontext action="getlistproperty" key="imageheight"]" width="[plugin:listrenderingcontext action="getlistproperty" key="imagewidth"]" border="0" align="top" > </a> </div> <div id="channeldesc"> <p>[plugin:listrenderingcontext action="getlistproperty" key="description"]</p> </div> </div> <!-- End header--> <div id="feedsbody"> <table class="lotustable" border="0" cellspacing="0" cellpadding="0" role="presentation"> <tbody> Result design <tr> <td class="lotuslastcell"> <h4> <a href="[attributeresource attributename="link" separator=","]" target="_blank">[attributeresource attributename="title" separator=","]</a> </h4> <div class="lotusmeta"> [AttributeResource attributename="pubdate" format="date_medium" separator=","] </div> </td> </tr> <tr class="lotusdetails"> <td class="lotuslastcell"> <p>[attributeresource attributename="description" separator=","]</p> </td> </tr> Footer markup </tbody> </table> </div> <!-- End body--> <div id="footer"> [Plugin:ListRenderingContext action="getlistproperty" key="copyright"] </div> <!-- End footer--> </div> <!-- End main-->

7 c. Presentation Template Once presentation template is finished, set this as default in the above authoring template Markup [Plugin:ListRenderingContext action="set" profile="ibm.portal.rss" extension-id="ibm.portal.ddc.xml" attribute="source=[element context='current' type='content' key='feedurl']"] [Component name="web content/pzn_ddc_demo" startpage="" resultsperpage=""] d. Create SiteArea and Content using above authoring template and give the yahoo news feed url

8 e. 6. Create a page and add Web Content Viewer portlet to it and configure web content viewer portlet with above content.

9 7. Add following resource environment provider custom properties need to create in WP ListRenderingProfileService NOTE:: These Entries are actual mappings to the xml elements in feed name="rss.name" value="ibm.portal.rss" name="rss.namespacemapping.media" value=" name="rss.listitemselection" value="//item" name="rss.itemattribute.id" value="./title" name="rss.itemattribute.title" value="./title" name="rss.itemattribute.description" value="./description" name="rss.itemattribute.link" value="./link" name="rss.itemattribute.author" value="./author" name="rss.itemattribute.category" value="./category" name="rss.itemattribute.comments" value="./comments" name="rss.itemattribute.guid" value="./guid" name="rss.itemattribute.pubdate" value="./pubdate" name="rss.itemattribute.pubdate.type" value="date" name="rss.itemattribute.pubdate.format" value="eee, d MMM yyyy HH:mm:ss z" name="rss.itemattribute.source" value="./source" name="rss.itemattribute.encoded" value="./content:encoded" name="rss.itemattribute.enclosuretype" value="./enclosure/@type" name="rss.itemattribute.enclosureurl" value="./enclosure/@url"

10 name="rss.itemattribute.itunesduration" value="./itunes:duration" name="rss.itemattribute.mediacontenturl" name="rss.itemattribute.mediaencoded" value="./media:encoded" name="rss.listproperty.title" value="/rss/channel/title" name="rss.listproperty.link" value="/rss/channel/link" name="rss.listproperty.description" value="/rss/channel/description" name="rss.listproperty.language" value="/rss/channel/language" name="rss.listproperty.copyright" value="/rss/channel/copyright" name="rss.listproperty.pubdate" value="/rss/channel/pubdate" name="rss.listproperty.pubdate.type" value="date" name="rss.listproperty.pubdate.format" value="eee, d MMM yyyy HH:mm:ss z" name="rss.listproperty.ttl" value="/rss/channel/ttl" name="rss.listproperty.category" value="/rss/channel/category" name="rss.listproperty.cloud" value="/rss/channel/cloud" name="rss.listproperty.docs" value="/rss/channel/docs" name="rss.listproperty.generator" value="/rss/channel/generator" name="rss.listproperty.imagetitle" value="/rss/channel/image/title" name="rss.listproperty.imagelink" value="/rss/channel/image/link" name="rss.listproperty.imageurl" value="/rss/channel/image/url" name="rss.listproperty.imagewidth" value="/rss/channel/image/width" name="rss.listproperty.imageheight" value="/rss/channel/image/height" name="rss.listproperty.imagedescription" value="/rss/channel/image/description" 8. Add following custom property in "WP ConfigService" (adding url to ajax proxy for allowing the reverse proxy) name="wp.proxy.config.urlreplacement.digital_data_connector_policy.mit" value=" 9. Restart the server, once portal restarted I yahoo news feed as below on the portal.

11 Author Siva R Vaka Sr. WebSphere Portal & WCM Consultant