Image selection on VF Page

Question

I have a 4 step wizard displaying images on visualforce page. I have created a text rich field on product with family as "t1", "t2", "t3", "t4" where I store images.

I have to display images to my client where needs to get all products image with family t1, on second page he needs to see products which family t2, on third page he needs to see product with family t3 and so on.

<apex:page controller="productListController" showHeader="true" sidebar="false">
    <script>
            function getProductId(productId){
                alert('Hii'+productId);
            }
    </script>
    <apex:pageblock >
        <apex:pageblocksection >
           <apex:pageblocktable var="e" value="{!product}">
                 <apex:column headervalue="name" onclick="getProductId('{!e.Id}')">
                     <apex:outputField value="{!e.Product_Image__c}"/>
                     <apex:outputField value="{!e.name}"/>
                 </apex:column>
            </apex:pageblocktable>
         </apex:pageblocksection>    
    </apex:pageblock>
</apex:page>

public class productListController
{
    public list<Product2> product {get; set; }

    public productListController(){
        product = [select Id, name, Product_Image__c from product2];
    }
}

My problem is, I know how to work with step wizard. But, I have to display only images on page. Depending on image selection I should get all the products and add it to oppty. How should I give him the look and feel of selecting/deselecting the products on image. Are their any vf tags that I am missing?

Answer 1

Since your getting the selected Id in JS you can utilize an actionFunction to pass the value to your apex controller for more flexibility.

<apex:page controller="productListController" showHeader="true" sidebar="false">
<script>
        function getProductId(productId){
             changeSelected(productId);
        }
</script>
<apex:pageblock id='pb'>
    <apex:pageblocksection >
       <apex:pageblocktable var="e" value="{!product}">
             <apex:column headervalue="name" onclick="getProductId('{!e.Id}')">
                 <apex:outputField value="{!e.Product_Image__c}"/>
                 <apex:outputField value="{!e.name}"/>
             </apex:column>
        </apex:pageblocktable>
     </apex:pageblocksection>    
</apex:pageblock>
<apex:form>
    <apex:actionFunction name='changeSelected' action='{!setSelected}' rerender='pb'>
        <apex:param name='selected' value=''/>
    </apex:actionFunction>
</apex:form>

public class productListController
{
    public list<Product2> product {get; set; }
    public String selected{get; set; }

    public productListController(){
        product = [select Id, name, Product_Image__c from product2];
    }

    public setSelected(){
        String selectedId = ApexPages.currentPage().getParameters().get('selected');
        if(String.isNotBlank(selectedId)
            selected = selectedId;
    }
}

Now, your selected variable holds the selected Id. You can perhaps add/remove a css class to the selected image in your JS function prior to the actionFunction call for a visual cue to the user that he/she has selected it. This may be a bit of overkill for what your trying to accomplish, but it can be done this way.