+ Start a Discussion
JackMckracken83JackMckracken83 

Noob question - Displaying related records

I've got a tree view of nested categories on the left side of my page - I'd like for the user to be able to click one of the categories and see a list of related videos on the right side of the page. Is there an available snippet or tutorial out there with this type of functionality?

Best Answer chosen by Admin (Salesforce Developers) 
ClintLeeClintLee

This is actually not as straightforward as you might think.  On your tree of categories, you can hook in an onclick javascript event to the element.   The onclick event takes the name of the category as an argument.  Then, create an ActionFunction that calls a controller method, using the name of the category to find related videos via a SOQL query.   Below is an example where the VF page shows a list of Accounts. Clicking on one of the account names will display a list of related Contacts.

 

Controller 
 

    public with sharing class RelatedContacts {
 

                public List<Account> accounts             { get; set; }

                public String acctName                          { get; set; }

                public List<Contact> relatedContacts { get; set; }

 

                public RelatedContacts() { 

                            accounts = [ select Id, Name from Account ];

                }

   

                public PageReference showContacts() {

                            acctName = ApexPages.currentPage().getParameters().get'a' );

                            relatedContacts = [ select Name, Description from Contact where Account.Name = :acctName ];  

                            return null

                }

    }

 

VF Page

<apex:pagecontroller="RelatedContacts"> 

    <apex:form>

        <apex:actionFunction action "{!showContacts}" name "showrelatedcontacts" rerender "contacts">

            <apex:param name="a" value="" />

        </apex:actionFunction>

      

       <apex:repeat value "{!accounts}" var "acct">

           <p><a href="#" onclick = "showrelatedcontacts( this.innerHTML );return false;">{!acct.Name}</a></p>

       </apex:repeat>

      

       <apex:outputPanel layout "block" id "contacts">

           <apex:dataTable value "{!relatedContacts}" var "s">

               <apex:column>

                   <apex:facet name "header" />

                   <apex:outputText value "{!s.Name}" />

              </apex:column>

              <apex:column>

                  <apex:facet name "header" />

                  <apex:outputText value "{!s.Description}"/>

              </apex:column>

          </apex:dataTable> 

      </apex:outputPanel>

  </apex:form>

</apex:page>

 

Hope that helps!

 

~ Clint

 

 


All Answers

ClintLeeClintLee

This is actually not as straightforward as you might think.  On your tree of categories, you can hook in an onclick javascript event to the element.   The onclick event takes the name of the category as an argument.  Then, create an ActionFunction that calls a controller method, using the name of the category to find related videos via a SOQL query.   Below is an example where the VF page shows a list of Accounts. Clicking on one of the account names will display a list of related Contacts.

 

Controller 
 

    public with sharing class RelatedContacts {
 

                public List<Account> accounts             { get; set; }

                public String acctName                          { get; set; }

                public List<Contact> relatedContacts { get; set; }

 

                public RelatedContacts() { 

                            accounts = [ select Id, Name from Account ];

                }

   

                public PageReference showContacts() {

                            acctName = ApexPages.currentPage().getParameters().get'a' );

                            relatedContacts = [ select Name, Description from Contact where Account.Name = :acctName ];  

                            return null

                }

    }

 

VF Page

<apex:pagecontroller="RelatedContacts"> 

    <apex:form>

        <apex:actionFunction action "{!showContacts}" name "showrelatedcontacts" rerender "contacts">

            <apex:param name="a" value="" />

        </apex:actionFunction>

      

       <apex:repeat value "{!accounts}" var "acct">

           <p><a href="#" onclick = "showrelatedcontacts( this.innerHTML );return false;">{!acct.Name}</a></p>

       </apex:repeat>

      

       <apex:outputPanel layout "block" id "contacts">

           <apex:dataTable value "{!relatedContacts}" var "s">

               <apex:column>

                   <apex:facet name "header" />

                   <apex:outputText value "{!s.Name}" />

              </apex:column>

              <apex:column>

                  <apex:facet name "header" />

                  <apex:outputText value "{!s.Description}"/>

              </apex:column>

          </apex:dataTable> 

      </apex:outputPanel>

  </apex:form>

</apex:page>

 

Hope that helps!

 

~ Clint

 

 


This was selected as the best answer
JackMckracken83JackMckracken83

Thanks!