Customizing Your Related List Layout

Remove Related List Table Formatting

Sometimes the standard S-Docs related list doesn't result in the right layout of data for your use case. In this event, you can use <class>none</class> instead of <class>tableXXX</class> to remove all the HTML that S-Docs automatically inserts into the table. You'll have to delete the table markup that was inserted around your related list as well. However, you don't need to do any of the previous steps manually; if you check the Insert related list without table markup checkbox in the "Format Data Columns" tab of the "Insert Related List" window, your list will be inserted as the following:

<!–{{! <LineItems>
<class>none<class>
<ListName>OpportunityLineItems</ListName>
<column>PriceBookEntry.product2.Name</column>
<column>PriceBookEntry.product2.Description</column>
<column>UnitPrice</column>
<column>Quantity</column>
<column>TotalPrice</column>
</LineItems> }}–>

Add Row Numbers to Your Table

If you'd like to display a number for each row in your related list table, you can insert the rownum column by adding the following to your related list statement:

<column>rownum</column>

For example, a related list statement that looks like this:

<lineitems>
<class>table646</class>
<listname>opportunitylineitems</listname>
<column>rownum</column>
<column>PricebookEntry.Product2.name</column>
<column>PricebookEntry.Product2.description</column>
<column>unitprice</column>
<column>quantity</column>
<column>totalprice</column>
</lineitems>
}}-->

Would output a table that looks like this:

Offset The Starting Row Number

If you'd like your table's row numbers to begin at a number other than 1, you can use the startIndex related list column attribute to specify a number that should be added to the first row. For example, if your related list statement looked like this:

<lineitems>
<class>table646</class>
<listname>opportunitylineitems</listname>
<column startIndex="3">rownum</column>
<column>PricebookEntry.Product2.name</column>
<column>PricebookEntry.Product2.description</column>
<column>unitprice</column>
<column>quantity</column>
<column>totalprice</column>
</lineitems>
}}-->

Your table would look like this:

You can also use the mergenext related list column attribute to merge the row number into another column. Please visit our advanced template features article to read more about mergenext and other column attributes.

Build A Custom Table

Then, you can use the column prefix and postfix attributes to insert the HTML tags and build the table yourself (you may modify the HTML outside of the related list comment as well):

<table>
<tbody>
<!--{{! <LineItems>
<class>none<class>
<ListName>OpportunityLineItems</ListName>
<column prefix="<tr><td>" postfix="</td>">PriceBookEntry.product2.Name</column>
<column prefix="<td>" postfix="<br />">PriceBookEntry.product2.Description</column>
<column postfix="</td>">UnitPrice</column>
<column prefix="<td>" postfix="</td>">Quantity</column>
<column prefix="<td>" postfix="</td></tr>">TotalPrice</column>
</LineItems> }}-->
</tbody>
</table>

The above related list is now equivalent to the following related list (i.e. the kind of related list S-Docs inserts by default):

<table>
<tbody>
<!--{{! <LineItems>
<class>table251<class>
<ListName>OpportunityLineItems</ListName>
<column>PriceBookEntry.product2.Name</column>
<column>PriceBookEntry.product2.Description</column>
<column>UnitPrice</column>
<column>Quantity</column>
<column>TotalPrice</column>
</LineItems> }}-->
</tbody>
</table>

This technique provides plenty of flexibility in table formatting. For example, if you wanted PriceBookEntry.product2.Name and PriceBookEntry.product2.Description to appear in the same table cell, you would use:

<table>
<tbody>
<!--{{! <LineItems>
<class>none<class>
<ListName>OpportunityLineItems</ListName>
<column prefix="<tr><td>" postfix="</td>">PriceBookEntry.product2.Name</column>
<column prefix="<td>" postfix="</td>">PriceBookEntry.product2.Description</column>
<column prefix="<td>" postfix="</td>">UnitPrice</column>
<column prefix="<td>" postfix="</td>">Quantity</column>
<column prefix="<td>" postfix="</td></tr>">TotalPrice</column>
</LineItems> }}-->
</tbody>
</table>

Finally, if you wanted to insert table headers and add CSS styling, you would use something like the following:

<style>
  #myCustomTable { border: none }
  .nameAndDescriptionCell { border: 1px solid black; }
</style>
  
<table id="myCustomTable">
<thead>
<th>Name &amp; Description</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</thead>
<tbody>
<!--{{! <LineItems>
<class>none<class>
<ListName>OpportunityLineItems</ListName>
<column prefix="<tr><td class='nameAndDescriptionCell'>" postfix="</td>">PriceBookEntry.product2.Name</column>
<column prefix="<td>" postfix="<br />">PriceBookEntry.product2.Description</column>
<column postfix="</td>">UnitPrice</column>
<column prefix="<td>" postfix="</td>">Quantity</column>
<column prefix="<td>" postfix="</td></tr>">TotalPrice</column>
</LineItems> }}-->
</tbody>
</table>

Alternate Customization Option

Using <class>none</class> to remove your related list table formatting works great if you only need your data to be displayed as a comma-delimited list, or in a custom table that you build yourself. However, if you need to format your related list data in an entirely new way, you can also generate a template component that formats your data and then merges it into your final document. Click here to read more about this feature.

Tags: Column Attributes, Formatting, Related List, SOQL Query