3

I have an embedded VF Page that has a few output fields that are long text fields. Generally users don't put that much in the notes but when they do it messes the rows up because the words get wrapped and it makes the row extremely long just for that one field. Is there a way to limit it from showing the word wrapping at all or just a few lines of the word wrapping and then they could click on something to see the rest?

Here's my page...the fields that says Notes are the offenders.

<apex:page standardController="Opportunity" extensions="ContactDemoinlineedit" standardStylesheets="false">
    <apex:stylesheet value="{!URLFOR($Resource.CourseInLineRes, '/css.css')}"/>
    <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.CourseInlineRes, '/jquery-1.7.1.min.js')}" ></script>
    <apex:form >
        <apex:outputpanel id="mainWrap">
            <script type="text/javascript" language="javascript">
                jQuery.noConflict();
                jQuery(document).ready(function(){
                    //EVERY TIME SOMEONE DOUBLE CLICKS ON AN EDITABLE FIELD
                    jQuery('.nonEdit').dblclick(function(){
                        //HIDE THE OUTPUTFIELD AND THEN UNHIDE THE INPUTFIELD
                        jQuery(this).addClass('hideMe').next().removeClass('hideMe');
                        jQuery(this).parent().parent().find('.editLink').addClass('inEdit').text('Cancel');
                    });            
                });

                function EditMe(item)
                {
                    //IF IT HAS THIS CLASS WE KNOW THEY WANT TO CANCEL THIS EDIT
                    if(item.hasClass('inEdit'))
                    {
                        //REMOVE THE INEDIT CLASS AND CHANGE THE TEXT BACK TO EDIT
                        item.removeClass('inEdit').text('Edit');

                        //FOR EACH EDITABLE FIELD IN THE ROW RETRIEVE THE ORIGINAL VALUE AND APPLY IT BACK TO THE INPUTFIELD
                        item.parent().parent().find('.nonEdit').each(function(){
                            var value = jQuery(this).text();
                            jQuery(this).next().find('input').val(value);
                        });

                        //THEN FOR EACH EDITABLE FIELD IN THE ROW HIDE THE INPUTFIELD AND SHOW THE OUTPUTFIELD
                        item.parent().parent().find('.nonEdit').removeClass('hideMe');
                        item.parent().parent().find('.edit').addClass('hideMe');
                    }
                    else
                    {
                        //IF IT DOESN'T HAVE THE INEDIT CLASS THEN WE KNOW THEY WANT TO EDIT THE WHOLE ROW
                        //ADD THE INEDIT CLASS AND CHANGE THE TEXT TO CANCEL SO THEY CAN UNDO CHANGES
                        item.addClass('inEdit').text('Cancel')

                        //THEN FOR EACH EDITABLE FIELD IN THE ROW HIDE THE OUTPUTFIELD AND SHOW THE INPUTFIELD
                        item.parent().parent().find('.nonEdit').addClass('hideMe');
                        item.parent().parent().find('.edit').removeClass('hideMe');
                    }
                }                      

                //hide show of the loading icon
                function Loading(b){
                    if(b){
                        jQuery('.loadingIcon').removeClass('hideIt');
                    }else{
                        jQuery('.loadingIcon').addClass('hideIt');
                    }
                }

                //Sets the title of the current tab to "SFDC"
                function setTitle() {
                    sforce.console.setTabTitle('Test');
                }
            </script>



            <table id="listTable" class="listTable" width="100%">
            <apex:pageMessages ></apex:pageMessages>
            <tbody>
                <thead>
                    <tr>
                        <th width="5%">Action</th>
                        <th width="10%">Contact</th>
                        <th width="10%">Demo Status</th>                        
                        <th width="10%">Date of Demo</th>
                        <th width="5%">Time Demo Requested</th>
                        <th width="10%">Demo Time Zone</th>
                        <th width="10%">Sales Scientist</th>
                        <th width="10%">Date Demo Completed</th>
                        <th width="10%">Account Manager Notes</th>
                        <th width="10%">PreDemo Info Quality</th>
                        <th width="10%">Sales Scientist Notes</th>
                    </tr>
                </thead>
                <tbody>
                    <apex:repeat value="{!FirstContacts}" var="c">
                    <tr>
                        <td><span class="editLink" onclick="EditMe(jQuery(this));">Edit</span></td>
                        <td>
                            <div class="nonEdit">
                                <a href="/{!c.id}" target="_blank" title="Opens in new window"><apex:outputfield value="{!c.Contact__c}"/></a>
                            </div>
                        </td>
                        <td>
                            <div class="nonEdit">
                                <apex:outputfield value="{!c.Demo_Status__c}"/>
                            </div>
                            <div class="edit hideMe">
                                <apex:inputfield value="{!c.Demo_Status__c}"/>
                            </div>
                        </td>
                        <td>
                            <div class="nonEdit">
                                <apex:outputfield value="{!c.Date_of_Demo__c}"/>
                            </div>
                            <div class="edit hideMe">
                                <apex:inputfield value="{!c.Date_of_Demo__c}"/>
                            </div>
                        </td> 
                        <td>
                            <div class="nonEdit">
                                <apex:outputfield value="{!c.Time_Demo_Requested__c}"/>
                            </div>
                            <div class="edit hideMe">
                                <apex:inputfield value="{!c.Time_Demo_Requested__c}"/>
                            </div>
                        </td> 
                        <td>
                            <div class="nonEdit">
                                <apex:outputfield value="{!c.Demo_Time_Zone__c}"/>
                            </div>
                            <div class="edit hideMe">
                                <apex:inputfield value="{!c.Demo_Time_Zone__c}"/>
                            </div>
                        </td> 
                        <td>
                            <div class="nonEdit">
                                <apex:outputfield value="{!c.Sales_Scientist__c}"/>
                            </div>
                            <div class="edit hideMe">
                                <apex:inputfield value="{!c.Sales_Scientist__c}"/>
                            </div>
                        </td> 
                        <td>
                            <div class="nonEdit">
                                <apex:outputfield value="{!c.Date_Demo_Completed__c}"/>
                            </div>
                            <div class="edit hideMe">
                                <apex:inputfield value="{!c.Date_Demo_Completed__c}"/>
                            </div>
                        </td> 
                        <td>
                            <div class="nonEdit">
                                <apex:outputfield value="{!c.Account_Manager_Notes__c}"/>
                            </div>
                            <div class="edit hideMe">
                                <apex:inputfield value="{!c.Account_Manager_Notes__c}"/>
                            </div>
                        </td>
                        <td>
                            <div class="nonEdit">
                                <apex:outputfield value="{!c.PreDemo_Info_Quality__c}"/>
                            </div>
                            <div class="edit hideMe">
                                <apex:inputfield value="{!c.PreDemo_Info_Quality__c}"/>
                            </div>
                        </td>  
                        <td>
                            <div class="nonEdit">
                                <apex:outputfield value="{!c.Sales_Scientist_Notes__c}"/>
                            </div>
                            <div class="edit hideMe">
                                <apex:inputfield value="{!c.Sales_Scientist_Notes__c}"/>
                            </div>
                        </td>  
                    </tr>
                    </apex:repeat>
                    <tr class="bottomRow">
                        <td class="bottomRow">

                            <apex:commandButton value="Save All" action="{!updateListItems}" onclick="Loading(true);" oncomplete="Loading(false);" rerender="mainWrap"/>
                        </td>
                        <td class="bottomRow">
                            <div class="loadingIcon hideIt">
                                <apex:image id="loadingImage" value="{!URLFOR($Resource.CourseInLineRes, 'loader_24x26.gif')}" width="24" height="26"/>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </tbody>
            </table>

        </apex:outputpanel>
    </apex:form>
</apex:page>

Also, <a href="/{!c.id}" target="_blank" title="Opens in new window"><apex:outputfield value="{!c.Contact__c}"/></a> isn't working. It opens the page within the imbedded VF section instead of in a new tab.

Here is my controller:

Public with Sharing Class ContactDemoinlineedit {
    Private Final Opportunity opp;
    Private Final Opportunity_Contact_Role__c ocr;
    Public ContactDemoInLineEdit (Apexpages.StandardController Stdcontroller)
    {
        this.opp= (Opportunity)Stdcontroller.getrecord();

        FirstContacts = [select ID, Contact__c, Demo_Status__c, Date_of_Demo__c, Opportunity__c,
        date_demo_completed__c, demo_time_zone__c, account_manager_notes__c, sales_scientist_notes__c,
        predemo_info_quality__c, time_demo_requested__c, Sales_Scientist__c, Demo_Tracked_On__c, Marketing_Campaign__c, Contact_Name__c
        from Opportunity_Contact_Role__c where Opportunity__c= :this.opp.id order by Name];
      System.debug('My contacts = ' + FirstContacts);

    }
    public list<Opportunity_Contact_Role__c> FirstContacts{get;set;}

    public pagereference updateListItems()
    {


        if(GlobalHelper.CheckForNotNull(FirstContacts))
        {
            try{
            List<database.saveresult> saveResults = database.update(FirstContacts);
            }
            catch(Exception e){
                    ApexPages.addMessages(e);
            }
            }
        return null;
    }
}

and this is my css:

body{font-family:Arial; font-size:11px; padding:5px 0;}
ul li{text-decoration:none; list-style:none;text-align:left; margin:0;padding:0;}
.red{color:red;}
.floatL{float:left;}
.floatR{float:right;}
.hideIt{visibility:hidden;}
.clear{clear:both;}
.hideMe{display:none;}
.loadingIcon{text-decoration:none; border:0; background-color:transparent; width:24px; margin:auto;}

/* tables */

table.listTable {
    border-width: 2px;
    border-spacing: 2px;
    border-style: inset;
    border-color: black;
    border-collapse: collapse;
    background-color: white;
}
table.listTable th {
    border-width: 1px;
    padding: 2px;
    border-style: dotted;
    border-color: gray;
    background-color: rgb(166, 237, 234);
}
table.listTable td {
    border-width: 1px;
    padding: 2px;
    border-style: dotted;
    border-color: gray;
    background-color: white);
}

 th.bottomRow {
    border-width: 0px;
    padding: 2px;
    border-color: gray;
    background-color: rgb(166, 237, 234);
}
td.bottomRow {
    border-width: 0px;
    padding: 2px;
    border-color: gray;
    background-color: white);
}

I'm thinking TD needs to be modified somehow but I'm not sure how.

  • Also, <a href="/{!c.id}" target="_blank" title="Opens in new window"><apex:outputfield value="{!c.Contact__c}"/></a> isn't working. It opens the page within the imbedded VF section instead of in a new tab. – user2769 May 6 '13 at 16:35
3

Generally users don't put that much in the notes but when they do it messes the rows up because the words get wrapped and it makes the row extremely long just for that one field. Is there a way to limit it from showing the word wrapping at all or just a few lines of the word wrapping

What you're asking about is called "table text clipping". The answer is "yes, it can be" set in your CSS stylesheet for your table elements (or done in-line). Here's a link to the CSS 2.1 reference on overflow and clipping. The two are both related, so you'll want to look at both properties to decide how you want to apply them to your particular situation, along with how best to incorporate them into your CSS.

  • it's not actually overflowing....the box for the field is just dynamically increasing in size. Most likely something in my CSS needs to be edited which is below – user2769 May 6 '13 at 20:11
  • body{font-family:Arial; font-size:11px; padding:5px 0;} ul li{text-decoration:none; list-style:none;text-align:left; margin:0;padding:0;} .red{color:red;} .floatL{float:left;} .floatR{float:right;} .hideIt{visibility:hidden;} .clear{clear:both;} .hideMe{display:none;} .loadingIcon{text-decoration:none; border:0; background-color:transparent; width:24px; margin:auto;} /* tables */ table.listTable { border-width: 2px; border-spacing: 2px; border-style: inset; border-color: black; border-collapse: collapse; background-color: white; } – user2769 May 6 '13 at 20:12
  • table.listTable th { border-width: 1px; padding: 2px; border-style: dotted; border-color: gray; background-color: rgb(166, 237, 234); } table.listTable td { border-width: 1px; padding: 2px; border-style: dotted; border-color: gray; background-color: white); } th.bottomRow { border-width: 0px; padding: 2px; border-color: gray; background-color: rgb(166, 237, 234); } td.bottomRow { border-width: 0px; padding: 2px; border-color: gray; background-color: white); } – user2769 May 6 '13 at 20:13
  • I'm not very familiar with CSS so I'm a bit unsure of what to do. My guess is that the TD section needs more code but I'm not sure what would be best – user2769 May 6 '13 at 20:22
  • I don't think people will write code for you here. The code that you're copying and pasting is not readable at all. Whats wrong with the approach I just told you? – subodhbahl May 6 '13 at 20:24
0

For the link, use output link instead of tag. Can you use rows attribute to wrap up the text into smaller display?

OutputLink:

<apex:outputlink value="URL">Output</apex:outputlink> 

Here, URL can be a bind variable which the controller returns. example:

<apex:outputLink value="{!Test}">Output</apex:outputlink>

Workaround if rows attribute can't be used:

VF Page
<apex:outputText value="{!Param}"/>

Apex Class
public String getParam(String FullFieldValue){
   if(FullFieldValue.length() > 300){
       return FullFieldValue.substring(0,300);
   }
   else
       return FullFieldValue;
}

Let me know how it goes. This will just show a few characters, but if you want to show the whole field - wrap it in an outputlink and direct them to the record.

  • I'm not sure how to change it to an output link instead of a tag and when I tried to add a row classes attribute to my apex:repeat statement it said it wasn't allowed so I'm not sure where I can add the row attribute and have it do anything. I have tried adding height="1" to TD and to the div class and to tbody. No changes. If you could give me some more specifics on using an output link instead of a tag and where you think the row attribute should go that would be great. – user2769 May 6 '13 at 18:14
  • Which field is giving this issue cc: the #of rows? Mark that field in the code. Refer this in order to know how to use it: salesforce.com/us/developer/docs/pages/Content/… Basic use: <apex:outputlink value="URL">Output</apex:outputlink> Here, URL can be a bind variable which the controller returns. example: <apex:outputLink value="{!Test}">Output</apex:outputlink> – subodhbahl May 6 '13 at 18:36
  • Thanks! The link is now working properly. The fields having issues are the ones that say Notes in the field name. One of the lines specifically is <td> <div class="nonEdit"> <apex:outputfield value="{!c.Account_Manager_Notes__c}" /> </div> <div class="edit hideMe" > <apex:inputfield value="{!c.Account_Manager_Notes__c}"/> </div> </td> – user2769 May 6 '13 at 19:32
  • Workaround: Make Outputfield - OutputText. Now in the controller create a method which will receive the whole field/text as a param and return only 4 lines. Makes sense? This is a workaround that will work perfectly fine. – subodhbahl May 6 '13 at 20:01
  • I have updated the answer above with some code. Try it and mark my answer as the "answer" so others can benefit from it. Thanks! – subodhbahl May 6 '13 at 20:02
0

What ended up working did not involve changing my css or controller at all. I just had to change div class="nonEdit" to div class="nonEdit" style="max-height:3em;overflow:hidden;" for each of the fields that were causing issues. I thought there had to be a simple solution for this. It just took quite a bit of trial and error to find the right place to put the code.

  • div class="nonEdit" to div class="nonEdit" style="max-height:3em;overflow:hidden;" what you did is make adjustments to include in-line CSS styling. Its the equivalent to having changed your CSS style sheet without having done it across the board for all <Div> tags or more specifically, those that followed a <td> tag. Glad you got it sorted. – crmprogdev May 7 '13 at 7:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.