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/8.0.0.1 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 8.0.0.1 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 plugin can read the both ATOM and RSS feeds ( But need to configure or update Resource environment provider properties).
Note: You can write custom plugin for reading any custom source and generate beanlist.
3.
Using yahoo news feed to demonstrate
DDC (Render the yahoo news using the
Web Content Viewer portlets on portal for this demo). Using yahoo news for the demo, but you can configure any rss feed in this method . (But if your feed is ATOM format you need use different set of resource environment provider properties to map the xml)
Sample
Feed XML format
<rss
xmlns:media="http://search.yahoo.com/mrss/"
version="2.0">
<channel>
<title>Yahoo
News - Latest News & Headlines</title>
<link>http://news.yahoo.com/</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 2015 12:46:00 -0500</pubDate>
<ttl>5</ttl>
<image>
<title>Yahoo
News - Latest News & Headlines</title>
<link>http://news.yahoo.com/</link>
<url>http://l.yimg.com/rz/d/yahoo_news_en-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="http://news.yahoo.com/wreckage-bodies-reveal-jets-fate-131429475.html">
<img
src="http://l.yimg.com/bt/api/res/1.2/b0JWI_jfaEgi.RqUmFb53Q--/YXBwaW_AP_FINANCIALTIMES/61a65017444cb333690f6a7067005a8d_original.jpg"
width="130"
height="86"
alt="Wreckage,
bodies reveal jet's fate days after it disappeared"
align="left"
title="Wreckage,
bodies reveal jet'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>http://news.yahoo.com/wreckage-bodies-reveal-jets-fate-131429475.html</link>
<pubDate>Thur,
01 Jan 2015 12:46:00 -0500</pubDate>
<source
url="http://www.ap.org/">Associated Press</source>
<guid
isPermaLink="false">wreckage-bodies-reveal-jets-fate-131429475</guid>
<media:content
url="http://l.yimg.com/bt/api/res/1.2/b0JWI_jfaEgi.RqLTIMES/61a65017444cb333690f6a7067005a8d_original.jpg"
type=""
width="130" height="86" />
<media:text
type="html">
<p>
<a
href="http://news.yahoo.com/wreckage-bodies-reveal-jets-fate-131429475.html">
<img
src="http://l.yimg.com/bt/api/res/1.2/b0JWI_jfaEgiTTP_AP_FINANCIALTIMES/61a65017444cb333690f6a7067005a8d_original.jpg"
width="130"
height="86"
alt="Wreckage,
bodies reveal jet's fate days after it disappeared"
align="left"
title="Wreckage,
bodies reveal jet'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>
</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
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
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-->
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']"]
d.
Create SiteArea and Content using above authoring
template and give the yahoo news feed url
e.
6.
Create a page and add Web Content
Viewer portlet to it and configure web content viewer portlet with above
content.
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="http://search.yahoo.com/mrss/"
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"
name="rss.ItemAttribute.itunesDuration"
value="./itunes:duration"
name="rss.ItemAttribute.mediaContentURL"
value="./media:content/@url"
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.yahoo"
value="http://news.yahoo.com/*"
9.
Restart the server , once portal
restarted I yahoo news feed as below on the portal .
Reference
