function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Andreas WissmeyerAndreas Wissmeyer 

How to list multiple contacts in a Lightning app based on a custom Visualforce page

Hello, I am quite new in Visualfroce so my question could be considered quite stupid by some of you. I apologize for that.

I created a custom VisualForce page listing one account and its related list of contacts. Display was done via a pageBlockTable (see code below), it worked fine but was not optimal to be displayed on a mobile device..            

<apex:pageBlockTable value="{!contacts}" var="cont_acc" columns="3">
                <apex:column value="{!cont_acc.Name}"/>
                <apex:column value="{!cont_acc.Phone}"/>
                <apex:column value="{!cont_acc.Email}"/>
</apex:pageBlockTable>

So I changed strategy, and I am using html formatting+apex:outputField function in order to enhance the layout of the page. It works, but only for the insertion of one single contact. See code extract below (part of a <table> element):

                <tr>
                    <td><apex:outputField value="{!contacts[0].Name}" /></td>                  
                    <td><apex:outputField value="{!contacts[0].Phone}" /></td>
                    <td><apex:outputField value="{!contacts[0].EMail}" /></td>   
                </tr>

Is there something which would allow me to have at the same time all data of pageBlockTable (so the whole list of contacts related to a particular account) but keeping the nice tabular HTML formatting? In other words, something like a C/C++ "for" cycle?

Thanks a lot in advance for your help on this! Cheers from Germany

Best Answer chosen by Andreas Wissmeyer
KaranrajKaranraj
Andreas - Use <apex:repeat> tag to iterate to the collection of items to display in a table format. Try the below code, 
<apex:page standardController="Contact" readOnly="true" recordSetVar="contactList" >

    <body>
        <table id="contacttable" class="display">
            <thead>
                <tr>
                    <th>Account</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!contactList}" var="con">
                    <tr>
                        <td>{!con.Account.Name}</td>
                        <td>{!con.Name}</td>
                        <td>{!con.LastName}</td>
                        <td>{!con.Phone}</td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </body>
</apex:page>

You can use the jQuery or Bootstrap to make the UI more responsible for the users. Check this link  http://elvery.net/demo/responsive-tables/ which helps to build the responsive table. Check this link for how to use bootstrap in visualforce page https://developer.salesforce.com/blogs/developer-relations/2014/03/twitter-bootstrap-and-visualforce-in-minutes.html
 

All Answers

KaranrajKaranraj
Andreas - Use <apex:repeat> tag to iterate to the collection of items to display in a table format. Try the below code, 
<apex:page standardController="Contact" readOnly="true" recordSetVar="contactList" >

    <body>
        <table id="contacttable" class="display">
            <thead>
                <tr>
                    <th>Account</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!contactList}" var="con">
                    <tr>
                        <td>{!con.Account.Name}</td>
                        <td>{!con.Name}</td>
                        <td>{!con.LastName}</td>
                        <td>{!con.Phone}</td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </body>
</apex:page>

You can use the jQuery or Bootstrap to make the UI more responsible for the users. Check this link  http://elvery.net/demo/responsive-tables/ which helps to build the responsive table. Check this link for how to use bootstrap in visualforce page https://developer.salesforce.com/blogs/developer-relations/2014/03/twitter-bootstrap-and-visualforce-in-minutes.html
 
This was selected as the best answer
Andreas WissmeyerAndreas Wissmeyer
Thanks a lot for your feedback, I followed your suggestions and got a very good result. At the moment, being my table very simple, I didn't go through all the bootstrap documentation you provided me wit, but I had a look and it will be surely useful for me in my next (more advanced) visualforce projects. Danke!