Sightly Pagination Component using Sling Model and JavaScript Use API in AEM 6.1

 

I will be demonstrating a Sightly Pagination Component in AEM 6.1, complete code and sample authored pages are available on our GitHub Repository

To any AEM Developer, I would highly recommend you to go through this article as this pagination component works together with some of the important concepts of AEM like Query Builder, Sling Model, JavaScript Use API and Sightly. In terms of functionality of this component its very similar to what we have in our AEM Community.

Here’s the overview of our pagination component:-

Component will accept two inputs from author, one being title of component and other being path from where it has to read pages. Let’s say the path you have give is /content/geometrixx-media/en now it will select all pages having node type as cq:Page . Type of query you want to perform can be easily changed. Now based on the search result it gets, paginations will be created on page. It uses selector based approach, once you click next page or any number you can notice selector will be added on URL.

Operations performed by each modules:-

1. Sling Model: It adapts the pages as SlingHttprequest thus we can easily retrieve selector parameter.

2. Query Builder: Based on the selector received on step it queries the JCR.

3. JavaScript Use API: With the help of number of results it create pagination links.

4. Sightly: As usual its used as View to render everything to user.

Let’s get started with authoring our component…

1. Use the component name “Sightly Pagination” and drag and drop it onto page

Sightly Pagination Component in Sidekick

2. Author the two required fields. One is the title displayed on top of page and other being the root page.

 pagination component it works together some of the important aspects of AEM which are Query Builder, Sling Model, JavaScript Use API and Sightly.

3. Once you have submitted that component output can be seen on page

First section 

Sightly-Pagination-Component-on-Page

Mid Section

Sightly-Pagination-Component-on-Page

Invalid Selector

Sightly Pagination Component on Invalid Selector

Time to take a look at code…

When dialog is submitted request goes to sling model class which adapts itself as SlingHttpServletRequest.class

Our sling model injects OSGI Service and  @PostConstruct method gets called once all the injections are done.

Now this method is very important from implementation point of view. Its checks for the selector which is further passed to our OSGI service which uses Query Builder to get the data. Returned data is put in list with the help of class SimplePage and returned to Sightly File. sightly-pagination.html files displays all the data on the page. 

The pagination you are seeing on the page are shown with the help of our sightly-pagination.js which uses JavaScript use API.

(Refer to our previous article if you are new to JavaScript Use API )

Above shown code creates sectional pagination and “Next” and “Previous” links.

Comment below in case face you any issue or have questions.

5 thoughts on “Sightly Pagination Component using Sling Model and JavaScript Use API in AEM 6.1

  1. nice article…

    could you please provide a package of sightly pagination component and nested multifield component to download.

    i am waiting for your response

    Thanks and regards

     
  2. Hi Lokesh,

    I could download it(SightlyPagination component) but i am getting error(eg:- like invalid length/bit)while uploading to crx/packmgr

     
    1. Hi,

      I have send you the details for code in email, I will check the issue you are facing with code in github.

      Thanks

       
  3. Hi Praveen,

    I could download it(SightlyPagination component) but i am getting error(eg:- Missing ‘jcr_root’.)while uploading to crx/packmgr

    Thanks
    Chaitali K

     

Leave a Reply

Your email address will not be published. Required fields are marked *