1

I have a requirement.

Levels

I have 4 images (or) icons on my VF page. I have a NEXT and PREV buttons. So it is like, based on a {!level} value These images gets highlighted from step 1 .. step 4 based on the Level increment.

For the Highlighted images(orange color), For example, if the level is 3 currently, The user should be able to view Level 2 data and Level 1 data when they click on respective images. Basically, if i shuffle across the levels and click it, i should get the desired list.

Here is what i have done so far, In my controller, My previous page and Next page goes by this,

public Integer level {get{return intLevel;} set;}

public PageReference PreviousPage()
    {
        saveSelectedOptions();
        intLevel--;
        getLstSSA();
        return null;
    }
public PageReference NextPage()
    {
            saveSelectedOptions();
            intLevel++;
            getLstSSA();
            return null;
        }

Here, in the above methods, the Next and prev operations runs on the same page with rerender of GetLstSSA(). SaveSelectedoptions() gives me the selected values on the pageblocktable. I need both these methods to render the list when i shuffle across levels

In MY VF page:

<apex:panelGrid id="NavPanel">

<apex:outputPanel id="level1" rendered="{! If(level == 1 ,true,false) }">
<div class="centerDiv">
    <div class="stepDiv completed"></div>
        <div class="stepDiv ellipsis"></div>
        <div class="stepDiv incomplete"></div>
        <div class="stepDiv ellipsis"></div>
        <div class="stepDiv incomplete"></div>
        <div class="stepDiv ellipsis"></div>
        <div class="stepDiv incomplete"></div>
</div>
</apex:outputPanel>
<apex:outputPanel id="level2" rendered="{! If(level == 2 ,true,false) }">
<div class="centerDiv">
        <div class="stepDiv completed"></div>
        <div class="stepDiv ellipsis"></div>
        <div class="stepDiv completed"></div>
        <div class="stepDiv ellipsis"></div>
        <div class="stepDiv incomplete"></div>
        <div class="stepDiv ellipsis"></div>
        <div class="stepDiv incomplete"></div>
</div>
</apex:outputPanel>

<!-- this goes till level 4 -->

Here, in the above code, 'stepDiv Completed' denotes a *Orange highlighted image*. and 'stepDiv Incomplete' denotes a *Gray image*. 'ellipsis' are the dots in between.

How do i pass my {!level} value over each of this images and use <outputlink> or <a href> and retrieve the Level value and pass it to controller

0

You just to add and handle the onclick event.

Page:

<div class="centerDiv">
        <div class="stepDiv completed" onclick="setPageLevel(1)"></div>
        <div class="stepDiv ellipsis"></div>
        <div class="stepDiv completed" onclick="setPageLevel(2)"></div>
        <div class="stepDiv ellipsis"></div>
        <div class="stepDiv incomplete" onclick="setPageLevel(3)"></div>
        <div class="stepDiv ellipsis"></div>
        <div class="stepDiv incomplete"></div>
</div>

<apex:actionFunction name="setPageLevel" action="{!setPageLevel}" rerender="NavPanel">
    <apex:param name="setLevel" assignTo="{!setLevel}"/>
</apex:actionFunction>

Controller:

public PageReference setPageLevel()
{
    Integer setLevel = ApexPages.currentPage().getParameters.get('setLevel');
    saveSelectedOptions();
    intLevel = setLevel;
    getLstSSA();
    return null;
}

Definitely you will need more code to handle your scenario to catch which step is already processed which is not. But the above code should be able to give you a brief idea.

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.