function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
PFangPFang 

Visualforce child record table

Hi,

 

Good day!

 

I need assistance with the formatting of a summary row on a child record table used in a Visualforce form.

 

This is the CSS code for the table

#TableInfo{width: 1000px; margin: 70px 0; }
#TableInfo table{border: 1px solid #f78f1e;border-collapse: collapse;border-spacing: 0;}
#TableInfo table tr th{background: #f78f1e;padding: 5px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;}
#TableInfo table tr td{border: 1px solid #e3e3e3;padding: 5px;text-align: center;color: #000;font-size: 12px;font-weight: bold; height:25px;}
#TableInfo .WidthNormal{width: 240px;}
#TableInfo .WidthSmall{width: 200px;}
#TableInfo .SuperBold{font-size: 17px !important;}
#TotalWeightId{text-align: right !important;padding: 0 !important;}
#TotalWeightId span{padding: 11px 15px; background: #f78f1e; color: #fff !important;}

 

This is what the table currently looks like

http://screencast.com/t/dJgoXQBoN

 

This is what the table should look like, the total weight should be moved a bit to the left but there's a complication with the apex facet and HTML/CSS code

http://screencast.com/t/UCdLhbmNG8

 

<apex:column width="240">
<apex:facet name="header">DIMENSIONS</apex:facet>
<apex:outputText value="{!boflading.Dimension__c}"/>
<apex:facet name="footer"><font id="TotalWeightId"><span>TOTAL WEIGHT</span></font></apex:facet></apex:column>
          
<apex:column width="240">
<apex:facet name="header">WEIGHT</apex:facet>
<apex:outputText value="{!boflading.Weight__c}"/>
<apex:facet name="footer"><apex:outputText style="font-size:17px;font-weight:bold!important;" value="{!Bill_of_Lading__c.Total_Weight__c}"/></apex:facet>       </apex:column>     
            
<apex:column width="240">
<apex:facet name="header">UOM</apex:facet>
<apex:outputText value="{!boflading.UOM__c}"/>
<apex:facet name="footer"><font style="font-size:17px;font-weight:bold!important;">L</font></apex:facet>     
</apex:column>  

Thanks in advance! 

 

Regards,

 

Phil Dennison C. Fang

Salesforce Developer

sivaextsivaext

Hi ,

 

#TotalWeightId span{padding: 11px 15px; background: #f78f1e; color: #fff !important;}

 

change 11px and 15px to 16px  15px  and try it

PFangPFang
Thanks siva
PFangPFang
Avidev9Avidev9

Try this

 

Adjust the width value that is in red

#TotalWeightId{float: right !important;padding: 0 !important; width:100px}
#TotalWeightId div{padding: 11px 15px; background: #f78f1e; color: #fff !important;}

 

<apex:facet name="footer">
<div id="TotalWeightId">
<div>TOTAL WEIGHT</div>
</div>
</apex:facet>
PFangPFang

Hi Avi,

 

I've tried that and here's what happened.

 

http://screencast.com/t/mZnnrk6ktUey

 

Here's how I entered your code.

 

#TableInfo{width: 1000px; margin: 70px 0; }
#TableInfo table{border: 1px solid #f78f1e;border-collapse: collapse;border-spacing: 0;}
#TableInfo table tr th{background: #f78f1e;padding: 5px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;}
#TableInfo table tr td{border: 1px solid #e3e3e3;padding: 5px;text-align: center;color: #000;font-size: 12px;font-weight: bold; height:25px;}
#TableInfo .WidthNormal{width: 240px;}
#TableInfo .WidthSmall{width: 200px;}
#TableInfo .SuperBold{font-size: 17px !important;}
#TotalWeightId{float: right !important;padding: 0 !important; width:100px}
#TotalWeightId div{padding: 11px 15px; background: #f78f1e; color: #fff !important;}

 

<apex:column width="240">
<apex:facet name="header">DIMENSIONS</apex:facet>
<apex:outputText value="{!boflading.Dimension__c}"/>
<apex:facet name="footer">
<div id="TotalWeightId">
<div>TOTAL WEIGHT</div>
</div>
</apex:facet>
</apex:column>
            
<apex:column width="240">
<apex:facet name="header">WEIGHT</apex:facet>
<apex:outputText value="{!boflading.Weight__c}"/>
<apex:facet name="footer">
<apex:outputText style="font-size:17px;font-weight:bold!important;" value="{!Bill_of_Lading__c.Total_Weight__c}"/>
</apex:facet>       
</apex:column>     
            
<apex:column width="240">
<apex:facet name="header">UOM</apex:facet>
<apex:outputText value="{!boflading.UOM__c}"/>
<apex:facet name="footer">
<font style="font-size:17px;font-weight:bold!important;">L</font></apex:facet>     
</apex:column>  

 Thanks Avi, you're always a big help.

 

Regards,

 

Pfang

Avidev9Avidev9
Pfang check my prev answer you need to adjust the width, that is highlighted in red
PFangPFang

Hi Avi,

 

Thanks for clarifying that. 

 

Here's what it looks like at 130px. 

 

http://screencast.com/t/U5g1MYBxRFpo

 

#TableInfo{width: 1000px; margin: 70px 0; }
#TableInfo table{border: 1px solid #f78f1e;border-collapse: collapse;border-spacing: 0;}
#TableInfo table tr th{background: #f78f1e;padding: 5px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;}
#TableInfo table tr td{border: 1px solid #e3e3e3;padding: 5px;text-align: center;color: #000;font-size: 12px;font-weight: bold; height:25px;}
#TableInfo .WidthNormal{width: 240px;}
#TableInfo .WidthSmall{width: 200px;}
#TableInfo .SuperBold{font-size: 17px !important;}
#TotalWeightId{float: right !important;padding: 0 !important; width:130px}
#TotalWeightId div{padding: 11px 15px; background: #f78f1e; color: #fff !important;}

 

I've tried it with a lower width and here's what happened.

 

http://screencast.com/t/9IsHa8DqEd1H

 

#TableInfo{width: 1000px; margin: 70px 0; }
#TableInfo table{border: 1px solid #f78f1e;border-collapse: collapse;border-spacing: 0;}
#TableInfo table tr th{background: #f78f1e;padding: 5px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;}
#TableInfo table tr td{border: 1px solid #e3e3e3;padding: 5px;text-align: center;color: #000;font-size: 12px;font-weight: bold; height:25px;}
#TableInfo .WidthNormal{width: 240px;}
#TableInfo .WidthSmall{width: 200px;}
#TableInfo .SuperBold{font-size: 17px !important;}
#TotalWeightId{float: right !important;padding: 0 !important; width:80px}
#TotalWeightId div{padding: 11px 15px; background: #f78f1e; color: #fff !important;}

 

 

 

PFangPFang

I also have this test class for this form's extension.

 

@isTest
//This is a test case for a situation where a lead will be converted.  The developer must explicitly call the convert lead
//method to simulate the user action.

private class BillofLadingtest4Extensiontest {

public List<Bill_of_Lading__c> bol {get;set;}

    static testMethod void BillofLadingtest4Extension() {
    
    //test.startTest();
    
    Bill_of_Lading__c b = new Bill_of_Lading__c(Name ='testbilloflading');
    insert b;
    
    List<Skid__c> skids;

    List<Bill_of_Lading__c> bol;
    
    Skid__c sk = new Skid__c(Name ='test', Bill_of_Lading__c = b.Id);
    insert sk;
    update sk;
 
    ApexPages.StandardController con = new ApexPages.StandardController(b);
    BillofLadingtest4Extension bole = new BillofLadingtest4Extension(con);
    PageReference ref = bole.save();
    
//test.stopTest();

}

}

 

This is a snippet of the extension and I'm only getting 38% coverage.

 

Not tested

private boolean updateSkids()
 37	      {
 38	          boolean result=true;
 39	          if (null!=skids)
 40	             {
 41	                // TODO: should work out what's changed and then save, easier to update everything for prototype
 42	             List<Skid__c> updSkids=new List<Skid__c>();
 43	                try
 44	                {
 45	                 update skids;
 46	                }
 47	                catch (Exception e)
 48	                {
 49	                   String msg=e.getMessage();
 50	                   integer pos;
 51	                    
 52	                   // if its field validation, this will be added to the messages by default
 53	                   if (-1==(pos=msg.indexOf('FIELD_CUSTOM_VALIDATION_EXCEPTION, ')))
 54	                   {
 55	                      ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, msg));
 56	                   }
 57	                    
 58	                   result=false;
 59	                }
 60	             }
 61	              
 62	             return result;
 63	      }

Not tested

 public PageReference saveAndExit()
 66	      {
 67	       boolean result=true;
 68	      result=updateSkids();
 69	        
 70	       if (result)
 71	       {
 72	          // call standard controller save
 73	          return std.save();
 74	       }
 75	       else
 76	       {
 77	        return null;
 78	       }
 79	      }

 Not tested

 public PageReference save()
 82	      { 
 83	       Boolean result=true;
 84	       PageReference pr=Page.Billofladingtest05222013;
 85	       if (null!=getBillofLading().id)
 86	       {
 87	        result=updateSkids();
 88	       }
 89	       else
 90	       {
 91	        pr.setRedirect(true);
 92	       }

 Not tested

 public void newSkid()
 106	      {
 107	         if (updateSkids())
 108	         {
 109	            Skid__c skid=new Skid__c(Name=newSkidName, Dimension__c=newSkidDimension, Number_of_Pieces__c=newSkidNumberofPieces, UOM__c=newskiduom, Weight__c=newskidweight, Bill_of_Lading__c=getBillofLading().id);
 110	            insert skid;
 111	           
 112	            newSkidName=null;
 113	            newSkidDimension=null;
 114	            newSkidNumberofPieces=null;
 115	            newskidbilloflading=null; 
 116	            newskiduom=null;
 117	            newskidweight=null;
 118	            skids=null;
 119	         }
 120	      }
 121	       
 122	      public void deleteSkid()
 123	      {
 124	         if (updateSkids())
 125	         {
 126	            if (null!=chosenskidId)
 127	            {
 128	               Skid__c skid=new Skid__c(Id=chosenskidId);
 129	                delete skid;
 130	          
 131	                skids=null;
 132	                chosenskidId=null;
 133	            }
 134	         }
 135	      }
 136	       
 137	     public List<Skid__c> getSkids()
 138	      {
 139	         if ( (null!=getBillofLading().id) && (skids == null) )
 140	         {
 141	             skids=[SELECT Id, Name, Bill_of_Lading__c,  
 142	                          Dimension__c, Number_of_Pieces__c, UOM__c, Weight__c
 143	                          FROM Skid__c 
 144	                          WHERE Id =: getBillofLading().id
 145	                          ORDER BY CreatedDate];
 146	         }                           
 147	         return skids;
 148	      }
 149	      
 150	      public String getChooserender() {
 151	       if (ApexPages.currentPage().getParameters().get('p') != null)
 152	          return 'pdf';
 153	          else
 154	        return null;
 155	    }
 156	    
 157	     public PageReference deliverAsPDF() {
 158	        PageReference pdf =  Page.Billofladingtest05222013;
 159	          pdf.getParameters().put('p','p');
 160	          return pdf;
 161	    }

 Again, any help on this would be appreciated.

Avidev9Avidev9
Can you remove the padding ?
#TotalWeightId div{ background: #f78f1e; color: #fff !important;}
PFangPFang

Hi Avi,

 

I've made that change and this is what happened to the form. 

 

http://screencast.com/t/4dLBJQPzRgi

 

#TableInfo{width: 1000px; margin: 70px 0; }
#TableInfo table{border: 1px solid #f78f1e;border-collapse: collapse;border-spacing: 0;}
#TableInfo table tr th{background: #f78f1e;padding: 5px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;}
#TableInfo table tr td{border: 1px solid #e3e3e3;padding: 5px;text-align: center;color: #000;font-size: 12px;font-weight: bold; height:25px;}
#TableInfo .WidthNormal{width: 240px;}
#TableInfo .WidthSmall{width: 200px;}
#TableInfo .SuperBold{font-size: 17px !important;}
#TotalWeightId{float: right !important;padding: 0 !important; width:130px}
#TotalWeightId div{ background: #f78f1e; color: #fff !important;}

 

Regards,

 

Pfang

Avidev9Avidev9
add height: 100%; width:100% as well
PFangPFang

Hi Avi,

 

Tried that and this is what happened.

 

#TableInfo{width: 1000px; margin: 70px 0; }
#TableInfo table{border: 1px solid #f78f1e;border-collapse: collapse;border-spacing: 0;}
#TableInfo table tr th{background: #f78f1e;padding: 5px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;}
#TableInfo table tr td{border: 1px solid #e3e3e3;padding: 5px;text-align: center;color: #000;font-size: 12px;font-weight: bold; height:25px;}
#TableInfo .WidthNormal{width: 240px;}
#TableInfo .WidthSmall{width: 200px;}
#TableInfo .SuperBold{font-size: 17px !important;}
#TotalWeightId{float: right !important;padding: 0 !important; width:130px}
#TotalWeightId div{height: 100%; width:100%; padding: 11px 15px; background: #f78f1e; color: #fff !important;}

 http://screencast.com/t/XbLbVwz4