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
Joey HoJoey Ho 

Display less in a cell of a Data Table

Hi,

 

I have a pageBlockTable that outputs a list of custom items that I created in APEX. One of the columns extract a very long string which I only want to show part of the string the Table instead of the entire string block which makes the table big and huge.

 

I'd like to maybe display the first 3-5 lines on this block and if the user wishes to see more than they will need to click on the row to open a new window to the record.

 

Here is the VF Table code:

 

    <apex:outputPanel layout="block" style="overflow:auto;height:500px" >
        <apex:pageBlock id="timeline" title="Timeline" >
            <apex:pageBlockTable value="{!Emessages}" var="e" rendered="{!NOT(ISNULL(Emessages))}"> 
                <apex:column value="{!e.eventID}">
                    <apex:facet name="header">ID</apex:facet>
                </apex:column>  
                
                <apex:column value="{!e.eventType }">
                    <apex:facet name="header">Type</apex:facet>
                </apex:column>  
                       
                <apex:column value="{!e.eventMainBody}" > 
                    <apex:facet name="header">Main Body</apex:facet>
                </apex:column> 
                            
                <apex:column value="{!e.eventFromOrCreatedBy}"> 
                    <apex:facet name="header">Created By or From</apex:facet>
                </apex:column> 
                            
                <apex:column value="{!e.eventCreatedDate}">     
                    <apex:facet name="header">Created Date</apex:facet>
                </apex:column> 
                                   
            </apex:pageBlockTable>    
        </apex:pageBlock>
    </apex:outputPanel>

 

The line 

<apex:column value="{!e.eventMainBody}" > 

 

is the line that dumps the entire block of string which typically is a dump of the TextBody of an EmailMessage record (very long text at times!)

 

Here is what it looks like: example of VF table

 

How do I resize the column to only display a few lines instead of everything?

 

Many thanks all.

Regards,

Joey Ho.

 

Avidev9Avidev9
 <apex:column value="{!e.eventMainBody}" > 
     <apex:facet name="header">Main Body</apex:facet>
 </apex:column>

 Try changing above to 

 

 <apex:column> 
     <apex:facet name="header">Main Body</apex:facet>
     <div style="height:100px;text-overflow:ellipsis">{!e.eventMainBody}</div>
 </apex:column>

 

 

 
Vinita_SFDCVinita_SFDC

Hello Joey,

 

Please try this:

<style>

.wrapping {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

</style>

and then in your table:

<td class="wrapping">your text here</td>

 

Hope this helps!
Joey HoJoey Ho

Thanks Avi and Vinita,

 

Although both your solutions did not get my requirements, using both your methods allowed me to get a solution together which got what I needed! (Please note I have very little skill in HTML/CSS coding so what I did here was trialling different codes!)

 

Here's what I did:

 

Used Vinita's suggestion to include styles but instead of using pre-wrap for white-space I used pre-line instead. This provided a better view for me.

 

<style>
.wrapping {
    white-space: pre-line; /* css-3 */
    white-space: -moz-pre-line; /* Mozilla, since 1999 */
    white-space: -pre-line; /* Opera 4-6 */
    white-space: -o-pre-line; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

</style>

 

The main collumn changed to include <div> tag that Avi recommended but used overflow:hidden along with class=wrapping to include the styles

 

<apex:column > 
                    <apex:facet name="header">Main Body</apex:facet>
                    <apex:outputPanel id="theEmailRow" rendered="{!e.eventType = 'Email'}">

                         <apex:outputPanel rendered="{!toggleEmailScroll = false}">
                            <div id="theEmailRow" style="height:90px;overflow:hidden;" class="wrapping">     
                                {!e.eventMainBody}        
                            </div >
                        </apex:outputPanel>
                        <apex:outputPanel rendered="{!toggleEmailScroll = true}">
                            <div id="theEmailRow" style="height:90px;overflow-y:auto;" class="wrapping">    
                                {!e.eventMainBody}            
                            </div >
                        </apex:outputPanel>
                    </apex:outputPanel>
                    <apex:outputPanel id="notEmailRow" rendered="{!e.eventType != 'Email'}">
                        <div id="notEmailRow"> 
                            {!e.eventMainBody}                                             
                        </div >
                    </apex:outputPanel>                   
                </apex:column>

 

Thanks all.