Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Walter@AdicioWalter@Adicio 

Can I create a character limit for a outputText field in a visualforce page?

Hello,

 

Can someone roughly point me in the right direction to learn how to cutt off the test displayed before I present a "..." and then a "click here to view more" link, because I only want say 255 characters to show and not the full length. I want users to have to click a link to view full details.

 

Thank you,

Walter 

Best Answer chosen by Admin (Salesforce Developers) 
kamlesh_chauhankamlesh_chauhan

Hi Walter, This can be done by substring your first 255 characters and display with three dots "...". by click on link, just retrieve your full string and rerender the output portion again. here is the sample code for you. hope it will helpful to you. Reply me if you have any more difficulty.

 

 

Sample Controller:

 

Public Class TestController {
    private string FullString = 'Can someone roughly point me in the right direction to learn how to cutt off the test displayed before I present a "..." and then a "click here to view more" link, because I only want say 255 characters to show and not the full length. I want users to have to click a link to view full details.Can someone roughly point me in the right direction to learn how to cutt off the test displayed before I present a "..." and then a "click here to view more" link, because I only want say 255 characters to show and not the full length. I want users to have to click a link to view full details.Can someone roughly point me in the right direction to learn how to cutt off the test displayed before I present a "..." and then a "click here to view more" link, because I only want say 255 characters to show and not the full length. I want users to have to click a link to view full details.';
    private string TestString = FullString.substring(0,255) +'...'; 
    public string getTestString() {
        return TestString;
    }
    public void doGetFullString() {
        TestString = FullString;
    }
}

 

Sample Page

<apex:page id="MytestPage" controller="TestController">

    <apex:form >

            <table>

                <tr>

                    <td width="50%">

                        <apex:outputPanel id="TestOutput">

                        {!TestString}

                        </apex:outputPanel>

                        <apex:commandLink value="Click here for more details" action="{!doGetFullString}" reRender="TestOutput"/>

                    </td>

                    <td width="50%">

                    </td>

                </tr>

            </table>

    </apex:form>

</apex:page>

 

Thanks,

Kamlesh

All Answers

kamlesh_chauhankamlesh_chauhan

Hi Walter, This can be done by substring your first 255 characters and display with three dots "...". by click on link, just retrieve your full string and rerender the output portion again. here is the sample code for you. hope it will helpful to you. Reply me if you have any more difficulty.

 

 

Sample Controller:

 

Public Class TestController {
    private string FullString = 'Can someone roughly point me in the right direction to learn how to cutt off the test displayed before I present a "..." and then a "click here to view more" link, because I only want say 255 characters to show and not the full length. I want users to have to click a link to view full details.Can someone roughly point me in the right direction to learn how to cutt off the test displayed before I present a "..." and then a "click here to view more" link, because I only want say 255 characters to show and not the full length. I want users to have to click a link to view full details.Can someone roughly point me in the right direction to learn how to cutt off the test displayed before I present a "..." and then a "click here to view more" link, because I only want say 255 characters to show and not the full length. I want users to have to click a link to view full details.';
    private string TestString = FullString.substring(0,255) +'...'; 
    public string getTestString() {
        return TestString;
    }
    public void doGetFullString() {
        TestString = FullString;
    }
}

 

Sample Page

<apex:page id="MytestPage" controller="TestController">

    <apex:form >

            <table>

                <tr>

                    <td width="50%">

                        <apex:outputPanel id="TestOutput">

                        {!TestString}

                        </apex:outputPanel>

                        <apex:commandLink value="Click here for more details" action="{!doGetFullString}" reRender="TestOutput"/>

                    </td>

                    <td width="50%">

                    </td>

                </tr>

            </table>

    </apex:form>

</apex:page>

 

Thanks,

Kamlesh

This was selected as the best answer
Walter@AdicioWalter@Adicio
This works like a charm! Thank you kamlesh_chauhan .
Walter@AdicioWalter@Adicio

Hi kamlesh_chauhan,

 

Can you help me understand how to correctly incoporate in a popup window to display the "full string"

 

Here is what I am trying so far:

 

 

 

 

<apex:page id="MytestPage" controller="characterLimitController">

<script>
function myFunction()
{
myWindow=window.open('','','height=500,width=500,titlebar=no,toolbar=no','false')
myWindow.document.write(myActionFunction)
myWindow.focus()
}
</script>

    <apex:form >

<apex:actionFunction action="{!getTestString}" name="myActionFunction" />

            <table>

                <tr>

                    <td width="50%">

                        <apex:outputPanel id="TestOutput">

                        {!TestString}

                        </apex:outputPanel>

                        <apex:commandLink onClick="myFunction()" value="Click here for more details" action="{!doGetFullString}" reRender="TestOutput"/>

                    </td>

                    <td width="50%">

                    </td>

                </tr>

            </table>

    </apex:form>

</apex:page>
 
 
 
 
Thank you,
Walter 
Message Edited by Walter@Adicio on  07-23-2009 12:58 PM


kamlesh_chauhankamlesh_chauhan
Hi Walter,
Here is the solution. I have make some changes in both controller as well as page. Hope it will helpful to you.
 
Public Class TestController {
    public string FullString{get;set;}
    public string TestString;
    public string getTestString() {
        return TestString;
    }
    public void doGetFullString() {
        FullString = 'Can someone roughly point me in the right direction to learn how to cutt off the test displayed before I present a "..." and then a "click here to view more" link, because I only want say 255 characters to show and not the full length. I want users to have to click a link to view full details.Can someone roughly point me in the right direction to learn how to cutt off the test displayed before I present a "..." and then a "click here to view more" link, because I only want say 255 characters to show and not the full length. I want users to have to click a link to view full details.Can someone roughly point me in the right direction to learn how to cutt off the test displayed before I present a "..." and then a "click here to view more" link, because I only want say 255 characters to show and not the full length. I want users to have to click a link to view full details.';
        TestString = FullString.substring(0,255) +'...'; 
    }
}
<apex:page id="MytestPage" controller="TestController" action="{!doGetFullString}">

<script>

    function myFunction()

    {

        var fString = document.getElementById("MytestPage:myForm:hidFullString").value

        myWindow=window.open('','','height=500,width=500,titlebar=no,toolbar=no','false')

        myWindow.document.write(fString)

        myWindow.focus()

    }

</script>


    <apex:form id="myForm">

            <apex:inputHidden id="hidFullString" value="{!FullString}"/>

            <table>

                <tr>

                    <td width="50%">

                        {!TestString}

                        <apex:commandLink onClick="myFunction()" value="Click here for more details"/>

                    </td>

                    <td width="50%">

                    </td>

                </tr>

            </table>

    </apex:form>

</apex:page>
 
Thanks,
Kamlesh (Happy to help)


Walter@AdicioWalter@Adicio
Hi kamlesh_chauhan,
 
Yes this is extreamly helpful for me, thanks again.
 
Your example works perfects as-is, but not in Google Chrome for me, but Im not worried about Chrome.
 
I do have question related to access the correct element by ID when the element is used in a dataTable.
 
I am having trouble accessing finding the correct element path.
 
Here is my page:
<apex:pageBlock id="myPageBlock1">
		
<apex:form id="myForm1">

<apex:pageBlockTable id="myPageBlockTable1" value="{!customerList}" var="a">
			
<apex:column id="myCol1">
			
<apex:facet name="header">Comment</apex:facet>
				
<apex:panelGroup>

<apex:outputText id="myComment" value="{!a.comment}" />

<apex:outputPanel layout="block" rendered="{!a.showMoreLink}">	
						
<apex:outputLink target="_blank" value="/{!a.commentId}">Go to Comment</apex:outputLink>	
					
<apex:commandLink onClick="myFunction()" value="PopOut Comment"/>

</apex:outputPanel>	
						
</apex:panelGroup>	
				
</apex:column>
			
</apex:pageBlockTable>
		
</apex:form>
		
</apex:pageBlock> 
 
 
This is the HTML output I am seeing:
 
<span id="MytestPage:myPageBlock1:myForm1:myPageBlockTable1:0:myComment">

this is my comment text

</span>
 
 
 
And here is how I am trying to access the "myComment" element:
 
 
<script>
function myFunction()
{
    var fString = document.getElementById("MytestPage:myPageBlock1:myForm1:myPageBlockTable1:myComment").value
    myWindow=window.open('','','height=500,width=500,titlebar=no,toolbar=no','false')
    myWindow.document.write(fString)
    myWindow.focus()
}
</script>
 
 
 
 
Thanks for all your help.