3

in my page I show a list of records along with pagination as below:

enter image description here

the navigation buttons at the top are output from a VF component in my controller:

// List Records pagination
public Component.Apex.pageBlockButtons getnavButtons() {

    //the reRender attribute is a set NOT a string
    Set<string> theSet = new Set<string>();
    theSet.add('navGroup');
    theSet.add('myButtons');

    integer totalPages;
    if (math.mod(total_size, list_size) > 0) {
        totalPages = total_size/list_size + 1;
    } else {
        totalPages = (total_size/list_size);
    }

    integer currentPage;        
    if (selectedPage == '0') {
        currentPage = counter/list_size + 1;
    } else {
        currentPage = integer.valueOf(selectedPage);
    }                           

    Component.Apex.pageBlockButtons pbButtons = new Component.Apex.pageBlockButtons();        
    pbButtons.style='align:center';
    pbButtons.location = 'top';
    pbButtons.id = 'myPBButtons';

    Component.Apex.outputPanel opPanel = new Component.Apex.outputPanel();
    opPanel.id = 'myButtons';

    //the Previous button will alway be displayed
    Component.Apex.commandButton b1 = new Component.Apex.commandButton();
    b1.expressions.action = '{!Previous}';
    b1.title = 'Previous';
    b1.value = 'Previous';
    b1.expressions.disabled = '{!disablePrevious}';        
    b1.reRender = theSet;

    opPanel.childComponents.add(b1);        

    for (integer i=0;i<totalPages;i++) {
        Component.Apex.commandButton btn = new Component.Apex.commandButton();

        if (i+1==1) {
            btn.title = 'First Page';
            btn.value = 'First Page';
            btn.rendered = true;                                        
        } else if (i+1==totalPages) {
            btn.title = 'Last Page';
            btn.value = 'Last Page';
            btn.rendered = true;                            
        } else {
            btn.title = 'Page ' + string.valueOf(i+1) + ' ';
            btn.value = ' ' + string.valueOf(i+1) + ' ';
            btn.rendered = false;             
        }

        if (   (i+1 <= 5 && currentPage < 5)
            || (i+1 >= totalPages-4 && currentPage > totalPages-4)
            || (i+1 >= currentPage-2 && i+1 <= currentPage+2))
        {
            btn.rendered = true;
        }

        if (i+1==currentPage) {
            btn.disabled = true; 
            btn.style = 'color:blue;';
        }  

        btn.onclick = 'queryByPage(\''+string.valueOf(i+1)+'\');return false;';

        opPanel.childComponents.add(btn);

        if (i+1 == 1 || i+1 == totalPages-1) { //put text after page 1 and before last page
            Component.Apex.outputText text = new Component.Apex.outputText();
            text.value = '...';        
            opPanel.childComponents.add(text);
        } 

    }

    //the Next button will always be displayed
    Component.Apex.commandButton b2 = new Component.Apex.commandButton();
    b2.expressions.action = '{!Next}';
    b2.title = 'Next';
    b2.value = 'Next';
    b2.expressions.disabled = '{!disableNext}';        
    b2.reRender = theSet;
    opPanel.childComponents.add(b2);

    //add all buttons as children of the outputPanel                
    pbButtons.childComponents.add(opPanel);  

    return pbButtons;

} 

what I'd like to do is have the dynamic component create buttons like th other ones you see on the page:

enter image description here

that button is created in my VF page by the below code:

<div align="center" class="WidthAuto HeightAuto" id="Buttons">
    <div class="block-link" id="NewButton" 
            onmouseover="ButtonMouseOver('NewButton');" 
            onmouseout="ButtonMouseOut('NewButton');" >
        <apex:outputLink style="color: rgb(255,255,255)" value="/apex/SystemChangeRequest_New?mode=new">New</apex:outputLink>
    </div>

</div>

so what I'd like to do is have my dynamic VF component create elements like that with the correct events on them...

so I tried this:

  //        b2.expressions.action = '{!Next}';
  //        b2.title = 'Next';
  //        b2.value = 'Next';
  //        b2.expressions.disabled = '{!disableNext}';        
  //        b2.reRender = theSet;
  //                                    
Component.Apex.OutputText htmlTxt = new Component.Apex.OutputText(); 
htmlTxt.value = '<div class="block-link" id="PrevButton" onmouseover="ButtonMouseOver(\'PrevButton\');" onmouseout="ButtonMouseOut(\'PrevButton\');" >';        
htmlTxt.escape = false; 

Component.Apex.outputLink pbLink = new Component.Apex.outputLink();     
pbLink.style='color: rgb(255,255,255)';
pbLink.expressions.action = '{!Next}';
pbLink.value='{!Next}';
pbLink.id = 'mynewButtons';

Component.Apex.OutputText htmlTxt2 = new Component.Apex.OutputText(); 
htmlTxt2.value = '</div>';      
htmlTxt2.escape = false; 

but I cannot get it to compile...

all I can see is error after error - the latest one is:

Save error: Expression of type ApexPages.expressions has no member named action

So what is the correct way to do what I want, have the dynamic VF component output custom div elements with the outputLink and events?

1
  • 2
    1) You need to remember that <apex:outputPanel layout="block" /> is a div itself. use that 2)Link doesnt allow to call action. use apex:commandbutton
    – kurunve
    Feb 8 '16 at 13:12
2

The compile error is because outputLink does not have action attribute .You can use Command Link Instead .

The below lines are causing issues

Component.Apex.outputLink pbLink = new Component.Apex.outputLink();     
pbLink.style='color: rgb(255,255,255)';
pbLink.expressions.action = '{!Next}';//Here is the issue .Get rid of this...
pbLink.value='{!Next}';
pbLink.id = 'mynewButtons';

Instead go with command link and the code will be as below

Component.Apex.CommandLink pbLink = new Component.Apex.CommandLink ();     
pbLink.style='color: rgb(255,255,255)';
pbLink.expressions.action = '{!Next}';//Here is the issue .Get rid of this...
pbLink.value='Next';
pbLink.id = 'mynewButtons';
6
  • so does it become: Component.Apex.outputLink pbLink = new Component.Apex.commandLink(); and do the other properties remain the same? Feb 8 '16 at 14:38
  • 1
    Take a look at vf guide for command link .I think except for value attribute you should be good with command link Feb 8 '16 at 14:57
  • @OurManInBananas Please check the updated code .Thanks ! Feb 8 '16 at 15:38
  • Thanks Mohith, but it doesn't show the DIV elements in the VF component because the getnavButtons() method is returning Component.Apex.pageBlockButtons. What is the signature for what I am doing? Feb 8 '16 at 15:59
  • 1
    You may wrap everything inside the pageblock or an outputpanel and then return that instead of the page block buttons Feb 8 '16 at 16:17

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.