Sushi Chef
Sushi Chef

Service Report Formatting

Jump to solution

I am working on a service report output doc where I want to apply a cell alignment to the work order details section for parts and labor. I can do this for the header of the table however, the formatting for alignment and font are not applied to the actual content of the table. I've looked at the standard ServiceMax Work Order Service Report where the labor and part details area all left-justified and using the same font and it isn't clear to me what I have missed. Here is the code we are using the that section in the report:

<!-- below code populates labor and parts -->

<div>

<table border="1" cellpadding="0" cellspacing="0" svmx-data="{{$D.Labor}}" width="100%">

<thead>

<tr>

<th class="theader" style="width: 16%; text-align: left; background-color: rgb(204, 204, 204);" svmx-data="{{$D.Labor.SVMXC__Start_Date_and_Time__c}}">

<center>

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">DATE</span></span></center>

</th>

<th class="theader" style="text-align: left; width: 16%; background-color: rgb(204, 204, 204);" svmx-data="{{$D.Labor.SVMXC__Product__c.Name}}">

<center>

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">DESCRIPTION</span></span></center>

</th>

<th class="theader" style="text-align: left; width: 16%; background-color: rgb(204, 204, 204);" svmx-data="{{SVMXC__Billable_Quantity__c}}">

<center>

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">HOURS</span></span></center>

</th>

<th class="theader" style="text-align: left; width: 16%; background-color: rgb(204, 204, 204);" svmx-data="{{SVMXC__Actual_Price2__c}}">

<center>

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">RATE</span></span></center>

</th>

<th class="theader" style="text-align: left; width: 16%; background-color: rgb(204, 204, 204);" svmx-data="{{Total_Line_Price_iPad__c}}">

<center>

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">TOTAL LINE PRICE</span></span></center>

</th>

<th class="theader" style="width: 16%; background-color: rgb(204, 204, 204);" svmx-data="{{SVMXC__Billable_Line_Price__c}}">

<center>

<span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">CUSTOMER CHARGE</span></span></center>

</th>

</tr>

</thead>

It displays this way on the iPad

Service Report Formatting.jpg

Where have I gone wrong?

Stephen Lortscher​,

1 Solution

Accepted Solutions
Highlighted
Sushi Chef
Sushi Chef

Re: Service Report Formatting

Jump to solution

<style type="text/css">

p{border:0;padding:0; margin:0}

.part-details table th.theader {height:10px; border:1px solid #FFA500; text-align:left;background-color: #FFA500;color: white;}

.part-details table tr td {text-align:left;border:1px solid #FFFFFF ;background-color: #FFFFFF; }

</style>

(To change something in the table header then add CSS styles to th.theader on the top and whereas if you need anything to be changed in the table data then add the styles to part-details tr td which is 4th line from top)

<div class="part-details">

<table border="0" cellpadding="0" cellspacing="0" style="float:left; font-size:13px; margin-bottom:10px; border-color: #FFFFFF;font-family: Arial Unicode MS, Helvetica, sans-serif;" svmx-data="{{$D.Labor}}" width="100%">

  <thead>

  <tr>

  <th class="theader" svmx-data="{{SVMXC__Product__c.ProductCode}}" width="14%">Part Number</th>

  <th class="theader" svmx-data="{{SVMXC__Product__c.Name}}" width="35%">Product</th>

  <th class="theader" svmx-data="{{SVMXC__Estimated_Quantity2__c}}" width="6%">Qty</th>

<th class="theader" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.SVMXC__Estimated_Price2__c))}}" width="12%">Est Price</th>

<th class="theader" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.Estimated_Line_price__c))}}" width="12%">Line Price</th>

  <th class="theader" svmx-data="{{$F.SNUMBER($D.Parts,'After_discount__c')}}" width="7%">Discount</th>

  <th class="theader" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.SVMXC__Total_Estimated_Price__c))}}" width="12%">Total Price</th>

  </tr>

  </thead>

  <tbody>

</table>

</div>

You need to add div and in that you can use the CSS styles in this way

Let me know if you have any difficulty in understanding it.

View solution in original post

Sushi Chef
Sushi Chef

Re: Service Report Formatting

Jump to solution

Here is the code from the style section of the template:

<style type="text/css">

p{padding:0; margin:0}                .container        {font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0 auto; width:100%}                .logo-title        {overflow:hidden}                .logo-title .title-txt {float:left; width:50%; padding:30px 0 0 0; font-size:12px; text-transform:uppercase; text-align:right}                .logo-title .logo {float:left; width:50%;}                                        .address-container {clear:both; position:relative; line-height:17px; text-align:right}                .title{clear:both; text-align:center; font-size:22px; line-height:40px}                                .address-to-for {border:1px solid #000; clear:both; margin:15px 0 0 0}                .address-to-for .address-to-for-container {width:100%; overflow:hidden; background:#f2f2f2}                .address-to-for-container .block {width:50%; float:left}                .address-to-for-container .block .header {background:#AEACB5; padding:5px; font-weight:bold; border-bottom:1px solid #000; color:#FFF}                .address-to-for-container .block .content {padding:5px; line-height:18px}                                        .workorder-details table, .part-details table {border-collapse: collapse; margin:20px 0 0 0}                .workorder-details table th, .workorder-details table td, .part-details table th, .part-details table td {border: 0px solid #000; padding: 5px; text-align: left; white-space: normal; background:#f2f2f2}                .workorder-details table th, .part-details table th {background:#AEACB5; color:#FFF; text-align:left; text-transform:uppercase;}                        .part-details table th.theader {background:#f2f2f2; color:#000; text-transform:capitalize}                .part-details table tr td {background:#fff;}                .part-details tfoot tr td{font-weight:bold; background:#f2f2f2}                                                .footer {clear:both; width:100%; margin:40px 0 30px;}                .footer strong {font-size:18px;}        </style>

0 Likes
Reply
Pastry Chef
Pastry Chef

Re: Service Report Formatting

Jump to solution

Jeff, Srikanth,

Not sure if you had your web-ex yet. I've spent some time trying to figure out many things related to the CSS and am re-learning HTML and CSS. So here's what I figured out on my table.

You can override the CSS by adding the "text- align: center" inline to each cell you want to change using Style. The syntax has to be correct, an extra " goofed up everything.

Line 01 below has the the text-align-right

Line 02 has is aligned by the CSS (or the Div settings)

Line 03 is aligned to the center

  <td style="width: 25%; text-align:right";> Technician:  </td>

  <td width="25%"> {{$D.Work_Order.SVMXC__Group_Member__c.Name}} </td>

  <td Style = "width:25%; text-align:Center";> Work Order: {{$D.Work_Order.Name}}</td>

Sushi Chef
Sushi Chef

Re: Service Report Formatting

Jump to solution

Do you still need the solution for this Issue?

Thanks,

Srikanth.

0 Likes
Reply
Sushi Chef
Sushi Chef

Re: Service Report Formatting

Jump to solution

HI Sikanth,

Yes this is  still an open issue for me. Do you have some suggestions or things to try?

Thanks,

Jeff

0 Likes
Reply
Highlighted
Sushi Chef
Sushi Chef

Re: Service Report Formatting

Jump to solution

<style type="text/css">

p{border:0;padding:0; margin:0}

.part-details table th.theader {height:10px; border:1px solid #FFA500; text-align:left;background-color: #FFA500;color: white;}

.part-details table tr td {text-align:left;border:1px solid #FFFFFF ;background-color: #FFFFFF; }

</style>

(To change something in the table header then add CSS styles to th.theader on the top and whereas if you need anything to be changed in the table data then add the styles to part-details tr td which is 4th line from top)

<div class="part-details">

<table border="0" cellpadding="0" cellspacing="0" style="float:left; font-size:13px; margin-bottom:10px; border-color: #FFFFFF;font-family: Arial Unicode MS, Helvetica, sans-serif;" svmx-data="{{$D.Labor}}" width="100%">

  <thead>

  <tr>

  <th class="theader" svmx-data="{{SVMXC__Product__c.ProductCode}}" width="14%">Part Number</th>

  <th class="theader" svmx-data="{{SVMXC__Product__c.Name}}" width="35%">Product</th>

  <th class="theader" svmx-data="{{SVMXC__Estimated_Quantity2__c}}" width="6%">Qty</th>

<th class="theader" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.SVMXC__Estimated_Price2__c))}}" width="12%">Est Price</th>

<th class="theader" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.Estimated_Line_price__c))}}" width="12%">Line Price</th>

  <th class="theader" svmx-data="{{$F.SNUMBER($D.Parts,'After_discount__c')}}" width="7%">Discount</th>

  <th class="theader" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.SVMXC__Total_Estimated_Price__c))}}" width="12%">Total Price</th>

  </tr>

  </thead>

  <tbody>

</table>

</div>

You need to add div and in that you can use the CSS styles in this way

Let me know if you have any difficulty in understanding it.

View solution in original post

Grill Chef
Grill Chef

Re: Service Report Formatting

Jump to solution

Emmanuel Bernier

Could you have a look at this to check whether it can help us align-center the table headers and align-right the table cell content, for the qty and price columns only ?

0 Likes
Reply
Sushi Chef
Sushi Chef

Re: Service Report Formatting

Jump to solution

Rupert, Use this code  to align the table headers center and align-right the table cell content, for the qty and price columns only

<style type="text/css">

p{border:0;padding:0; margin:0}

.part-details table th.theader {height:10px; border:1px solid #FFA500; text-align:center;background-color: #FFA500;color: white;}

.part-details table tr td {text-align:left;border:1px solid #FFFFFF ;background-color: #FFFFFF; }

                .part-details table th + th + th {text-align: right;}

             

                .part-details table td + td + td {text-align: right;}

</style>

(To change something in the table header then add CSS styles to th.theader on the top and whereas if you need anything to be changed in the table data then add the styles to part-details tr td which is 4th line from top)

<div class="part-details">

<table border="0" cellpadding="0" cellspacing="0" style="float:left; font-size:13px; margin-bottom:10px; border-color: #FFFFFF;font-family: Arial Unicode MS, Helvetica, sans-serif;" svmx-data="{{$D.Labor}}" width="100%">

  <thead>

  <tr>

  <th class="theader" svmx-data="{{SVMXC__Product__c.ProductCode}}" width="14%">Part Number</th>

  <th class="theader" svmx-data="{{SVMXC__Product__c.Name}}" width="35%">Product</th>

  <th class="theader" svmx-data="{{SVMXC__Estimated_Quantity2__c}}" width="6%">Qty</th>

<th class="theader" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.SVMXC__Estimated_Price2__c))}}" width="12%">Est Price</th>

<th class="theader" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.Estimated_Line_price__c))}}" width="12%">Line Price</th>

  <th class="theader" svmx-data="{{$F.SNUMBER($D.Parts,'After_discount__c')}}" width="7%">Discount</th>

  <th class="theader" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.SVMXC__Total_Estimated_Price__c))}}" width="12%">Total Price</th>

  </tr>

  </thead>

  <tbody>

</table>

</div>

Grill Chef
Grill Chef

Re: Service Report Formatting

Jump to solution

Srikanth Challa, looks great !

Emmanuel Bernier​, can you make this work for us ?

0 Likes
Reply
Sushi Chef
Sushi Chef

Re: Service Report Formatting

Jump to solution

Jeff, let me know if you want me to edit your code and post it

0 Likes
Reply
Sushi Chef
Sushi Chef

Re: Service Report Formatting

Jump to solution

Srikanth, It would be good for me to see the changes. Would you be willing to do a Webex session for this?

Thanks,

Jeff

0 Likes
Reply
Sushi Chef
Sushi Chef

Re: Service Report Formatting

Jump to solution

Jeff, you can send me web-ex invite to srikanth.sfdc99@gmail.com. Friday i.e tmrw after 1 PM works for me.

Thanks,

Srikanth.

0 Likes
Reply
Sushi Chef
Sushi Chef

Re: Service Report Formatting

Jump to solution

Thanks Srikanth for helping us with this issue. We are now able to format per our requirements. I really appreciated your willingness to meet with us as this helped speed up the process.

I also want to thank John Welisevich for his tips as these are also helpful.