0

I am trying to populate list of opportunities in a pagination fashion.

here is the output I got

enter image description here

But what here I didn't get is action for the next button....

Please find below the code and let me know where did I gone wrong.

Main Component:

<aura:attribute name="opportunities" type="Opportunity[]" />
<aura:attribute name="page" type="integer"/>
<aura:attribute name="pages" type="integer"/>
<aura:attribute name="total" type="integer"/>
<aura:attribute name="searchKey" type="String" default=""/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
<aura:handler event="c:SearchBarEvent" action="{!c.searchKeyFunction}"/>
<aura:handler event="c:PageChange" action="{!c.pageChange}"/>
<div class="slds-grid slds-grid--align-spread">
    <c:SearchBarCmpt />

    <fieldset class="slds-form-element">
        <div class="slds-form-element__control">
            <label class="slds-radio">
            <input type="radio" name="options" />
            <span class="slds-radio--faux"></span>
            <span class="slds-form-element__label">My Opportunities</span>
            </label>
            <label class="slds-radio">    
            <input type="radio" name="options" />
            <span class="slds-radio--faux"></span>
            <span class="slds-form-element__label">All Oportunities</span>
            </label>
        </div>
    </fieldset>

    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <label class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-01" />
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Open Opportunities</span>
            </label>
        </div>
    </div>

    <div>
        <button class="slds-button slds-button--neutral">New Opportunity</button>
    </div>

</div>
<table class="slds-table slds-table--bordered slds-table--striped">
    <thead>
        <tr class="slds-text-heading--label">
            <th width="20%"><span class="slds-truncate"><strong>Owner</strong></span></th>
            <th width="35%" scope="col"><span class="slds-truncate"><strong>Name</strong></span></th>
            <th width="10%" scope="col"><span class="slds-truncate"><strong>CloseDate</strong></span></th>
            <th width="15%" scope="col"><span class="slds-truncate"><strong>Stage</strong></span></th>
        </tr>
    </thead>
    </table>

    <aura:iteration items="{!v.opportunities}" var="opportunities">
       <c:AccOppListItem opportunities="{!opportunities}"/>  
    </aura:iteration>


<c:Paginator page="{!v.page}" pages="{!v.pages}" total="{!v.total}"/>

Controller.js:

({
    doInit : function(component, event, helper) { 
        helper.getOpps(component);
        //Fetch the expense list from the Apex controller   
        //var action = component.get("c.getOpps");

        //Set up the callback
        //var self = this;
        //action.setCallback(this, function(actionResult) {
        //    component.set("v.opportunities", actionResult.getReturnValue());            
        //});
        //$A.enqueueAction(action);
    },

    pageChange: function(component, event, helper) {
        var page = component.get("v.page") || 1;
        var direction = event.getParam("direction");
        page = (direction == "previous" ? (page - 1) : (page + 1));
        helper.getOpps(component, page);
    },

    searchKeyFunction: function(component, event, helper) {
        var searchKey = event.getParam("searchKey");
        helper.getOpps(component, searchKey);
        //var action = component.get("c.findByName");
        //action.setParams({
        //  "searchKey": searchKey
        //});
        //action.setCallback(this, function(a) {
        //    component.set("v.opportunities", a.getReturnValue());
        //});
        //$A.enqueueAction(action);
    }
})

helper:

({
    getOpps: function(component, event, page) {
        page = page || 1;
        var action = component.get("c.findByPage");
        action.setParams({
            "pageNumber": page
        });
        action.setCallback(this, function(a) {
            var result = a.getReturnValue();
            component.set("v.opportunities", result.entries);
            component.set("v.page", result.page);
            component.set("v.total", result.total);
            component.set("v.pages", Math.ceil(result.total/2));
        });
        $A.enqueueAction(action);
    }
})

Paginator Component:(where exactly the next button is included in the main component)


<div class="slds-container">
    <div class="slds-grid slds-grid--align-spread">            
        <div></div>
        <div id="count" class="slds-text-heading--label slds-align--absolute-center">{!v.total} Total Records  |  page {!v.page} / {!v.pages}</div> 
        <div class="right"> 

                <aura:renderIf isTrue="{!v.page > 1}">  
                    <button type="button" class="slds-button slds-button--neutral" onclick="{!c.previousPage}">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Previous
                    </button>
                </aura:renderIf>  
                <aura:renderIf isTrue="{!v.page &lt; v.pages}">  
                    <button type="button" class="slds-button slds-button--neutral" size="5px" onclick="{!c.nextPage}">
                        Next <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </button>
                </aura:renderIf> 

        </div>  

    </div>
</div>  

Controller.js

({
    previousPage : function(component, event, helper) {
        var myEvent = $A.get("e.c:PageChange");
        myEvent.setParams({ "direction": "previous"});
        myEvent.fire();
    },
    nextPage : function(component, event, helper) {
        var myEvent = $A.get("e.c:PageChange");
        myEvent.setParams({ "direction": "next"});
        myEvent.fire();
    }
})

Pagechange.evt

<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="direction" type="String"/>
</aura:event>

Apex Controller:

public class AccOppRLController {

    @AuraEnabled
    public static PagedResult findByPage(Decimal pageNumber){
        Integer pageSize = 5;
        //String name = '%' + searchKey + '%';
        Integer offset = ((Integer)pageNumber - 1) * pageSize;
        system.debug('offset==='+offset+'  pageNumber===='+pageNumber);
        PagedResult r =  new PagedResult();
        r.pageSize = pageSize;
        r.page = (Integer) pageNumber;
        r.total = [SELECT Count() FROM Opportunity];
        r.entries = [SELECT Id, name, Owner.Name, CloseDate, StageName FROM Opportunity LIMIT :pageSize OFFSET :offset];
        return r;
    }

    @AuraEnabled
    public static List<Opportunity> getOpps() {
        return [SELECT Id, name, Owner.Name, CloseDate, StageName FROM Opportunity LIMIT 10];
    }   
    @AuraEnabled
    public static List<Opportunity> findByName(String searchKey){
        String name = '%' + searchKey + '%';
        return [SELECT Id, name, Owner.Name, CloseDate, StageName FROM Opportunity WHERE name LIKE :name LIMIT 10];
    }
}

Please help, it's really urgent.

Thanks in advance.

  • Look like even after click next button, you get only first 5 records. Am i right? Just confirming the issue. – Praveen Jul 16 '16 at 17:30
  • Srinivas, if the answer solves your issue, mark it as accepted so that we can close the question. – Praveen Jul 16 '16 at 17:56
  • Srinivas, Please remove this answer and mark my answer as accepted.See here the steps to mark the accepted answer.All you have to do is, upvote and click the tick icon below the down vote button. – Praveen Jul 17 '16 at 19:04
2

Looks like even after clicking next button, you get only first 5 records.It is because, page number value is not properly set ,so always it contains 1.

({
    getOpps: function(component, event, page) {
         console.log(component); //component is properly assigned
         console.log(event); // event contain the page number
         console.log(page); // nothing is passed to the 3rd parameter,so it is undefined
         page = page || 1; // so, page always contains 1

    }

});

So, change this helper.getOpps(component, page) to helper.getOpps(component,event,page)

| improve this answer | |
  • Hi Praveen, I need your help to complete my task.I am unable to give the action to the Radio button. If you look at the screen shot at the top you can find 2 radio buttons (My Opps and All Opps) . when I click My Opps it should display only opps owned by current logged in user. can you please help me on this.... – Srinivas Jul 26 '16 at 13:14
  • @Srinivas, you need to add where condition(select ... from opportunity where ownerid = :UserInfo.getUserId()) to the query when my opportunity is selected. – Praveen Jul 26 '16 at 17:24
  • It's would be wise to ask a follow-up question – Praveen Jul 27 '16 at 5:34
  • Srinivas, just post enough code of what you tried,we'll help you out – Praveen Jul 27 '16 at 5:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.