Article summary

Summary

Discusses how to create an AEM page that displays RSS data. 

A special thank you to Ratna Kumar Kotla, a member of the AEM community for testing this article and ensuring it works. 

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, JavaScript, HTML
Tested On Adobe Experience Manager 6.x

Introduction

You can create an Adobe Experience Manager (AEM) component that is able to retrieve data from a RSS feed and display the data in the component's view. A RSS uses standard web feed styles to publish data such as:

  • blog entries
  • news headlines
  • audio
  • video

When developing a custom AEM component (such as a RSS component), you can select a third-party library and use that library within AEM. This is a benefit of developing an AEM component because there are many plug-ins on the Internet that you can use. As a result, you obtain flexiblity to address your business requirements by selecting the plug-in that best meets your needs.

In this use case, the following third-party library is used: 

http://jquery-plugins.net/FeedEK/FeedEk_demo.html

The following illustration shows the component created in this development article. 

client
An AEM page displaying data from a RSS feed

This development article steps you through how to build an AEM component that displays data from an RSS feed. 

Note:

For a similiar use case that uses HTL and Java, see this AEM community article: Creating an AEM HTL Headline component.

Create an AEM application folder structure  

Create an AEM application folder structure that contains templates, components, and pages by using CRXDE Lite.  

CQAppSetup

 

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components: contains components that your application uses.
  • page: contains page components. A page component is a script such as a JSP file.
  • global: contains global components that your application uses.
  • template: contains templates on which you base page components.
  • src: contains source code that comprises an OSGi component (this development article does not create an OSGi bundle using this folder).
  • install: contains a compiled OSGi bundles container.

To create an application folder structure:

  1. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp#.
  2. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  3. Enter the folder name into the Create Folder dialog box. Enter rssAEM.
  4. Repeat steps 1-4 for each folder specified in the previous illustration.
  5. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.  

Create a template 

You can create a template by using CRXDE Lite. A CQ template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp#.

2. Right-click the template folder (within your application), select Create, Create Template.

3. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateRSS.
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter rssAEM/components/page/templateRSS.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

4. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

5. Click Next for Allowed Parents.

6. Select OK on Allowed Children.

Create the page component based on the template  

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp#.

2. Right-click /apps/website2/components/page, then select Create, Create Component.

3. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateRSS.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type: foundation/components/page 

4. Select Next for Advanced Component Settings and Allowed Parents.

5. Select OK on Allowed Children.

6. Open the templateWeb.jsp located at: /apps/rssAEM/components/page/templateRSS/templateRSS.jsp.

7. Enter the following HTML code.

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is where your RSS component will go</h1>
</body>
</html>

Add CSS and JQuery files to a CQ:ClientLibraryFolder node

Download the dependent files from the following URL (click the Green Download button): 

http://jquery-plugins.net/FeedEK/FeedEk_demo.html

Add the FeedEK.css and FeedEK.js files obtained from this download to a cq:ClientLibraryFolder node, as shown in the following illustration.  

clientlib
An AEM ClientLib node

Add these two properties to this clientlibs node.

  • categories (String) - jqueryrss
  • dependencies (String) - cq.jquery
The dependencies property informs AEM to include the JQuery libraries in the page. The categories property informs AEM which clientlibs must be included in a given page. After you create the Clientlibs folder, add two map text files named css.txt and js.txt. In css.txt, specify the name of the CSS file. Likewise, in the js.txt file, add the name of the JS file. 
 
To create a clientLibs folder:
  1.  Right-click /apps/slingServletApp/components then select New, Node.
    Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.
  2. Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node.
  3. Add the JS and CSS files that you downloaded to the clientlibs node.
  4. Add a TXT file to the clientlibs folder named js.txt. The content of the js.txt file is the JS file name (shown in the illustration).
  5. Add a TXT file to the clientlibs node named css.txt. The content of the css.txt file is the CSS file name (shown in the illustration).

     

 

Modify the templateRSS JSP

Add JavaScript logic to the templateRSS JSP file. Add the following application logic to the JSP file located at: /apps/rssAEM/components/page/templateRSS.

<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jqueryrss" />
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />
    <title>FeedEk jQuery RSS/ATOM Feed Plugin Demo | jQuery RSS/ATOM Parser Plugin FeedEk Demo</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#divRss').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 3
            });

            $('#divRss2').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 4,
                ShowDesc: true,
                ShowPubDate: false,
                DescCharacterLimit: 100
            });

            $('#divRss3').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 5,
                ShowDesc: false
            });

            $('#divRss4').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'L',
                DateFormatLang: 'en'
            });

            $('#divRss5').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'L',
                DateFormatLang: 'tr'
            });

            $('#divRss6').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'L',
                DateFormatLang: 'en-gb'
            });

            $('#divRss7').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'LL',
                DateFormatLang: 'en'
            });

            $('#divRss8').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'LLL',
                DateFormatLang: 'en'
            });

            $('#divRss9').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'll',
                DateFormatLang: 'en'
            });
            $('#divRss10').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'lll',
                DateFormatLang: 'en'
            });

            $('#divRss11').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'DD MMMM YYYY',
                DateFormatLang: 'en'
            });
            $('#divRss12').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'MM/DD/YYYY'
            });

            $('#divRss13').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'MM/DD/YYYY HH:mm'
            });

            $('#divRss14').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'MM-DD-YYYY'
            });

            $('#divRss15').FeedEk({
                FeedUrl: 'http://jquery-plugins.net/rss',
                MaxCount: 2,
                DateFormat: 'MM-DD-YYYY HH:mm'
            });
        });

    </script>
    <style>
        body{font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;background-color: #efefef;font-size: 13px;line-height: 17px !important;}
        .rssDiv{float: left;padding-right: 35px;}
        ul{width: 300px !important;}
    </style>
</head>
<body>
  <div style="padding:10px;">
    <h1>AEM RSS Example</h1>
    <div>
        <div class="rssDiv">
            <p>
                <strong>RSS Data</strong>
            <p />
            <div id="divRss"></div>
            
        </div>

        
</body>

</html>

Create an AEM web page that displays the RSS data

The final task is to create a site that contains a page that is based on the templateRSS (the template created earlier in this development article). This page displays the data returned by the RSS feed (see the illustration shown at the start of this article).  

Create a CQ web page that submits data to a custom sling servlet:

  1. Go to the CQ Websites page at http://localhost:4502/siteadmin#/content.
  2. Select New Page.
  3. Specify the title of the page in the Title field.
  4. Specify the name of the page in the Name field.
  5. Select templateRSS from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.
  6. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser.

See also

Congratulations, you have just created an AEM RSS component. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy