0

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?

3
  • Can you include some code exampes of what you have so far? That will help in getting a good answer. Apr 29, 2016 at 10:06
  • I am using javascript to get product Id, But I am searching for inbult tags so that I can get product Id on image selection and preserve the state of what product i have selected on step 1 or step 4. If their is any other solution that can work or help will also do. Apr 29, 2016 at 12:00
  • Create a hidden input field and bind that field with a variable in controller. Now, using javascript populate this hidden input field upon selection of the image
    – Sf_Noob
    Apr 29, 2016 at 13:52

1 Answer 1

0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .