How can I Use Inline CSS Styles with XSLT?

  • 14 June 2019
  • 7 replies
  • 61 views
kelliganp
Userlevel 4
Badge +10

Hi Folks,

I just produced a use case for a project we are working on with @mlauer's excelent Repeating section as html table in mail post. My output table in the email this workflow produces looks like figure 1.

2612iA899A560495A3528.png

This is a huge leap forward from the looping mechanism I was using before with my InfoPath form. I want it to look like figure 2 (an Excel mock-up) though with a bold heading and formatted for curreny in the last two columns. I also want to add an additional row at the botom that renders a grand total.

2613i6387872FF9EF5BD7.png

Can anyone tell me how to add the inline CSS styles I need into the following XSLT code?

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <xsl:template match="/">
      <xsl:apply-templates />
   </xsl:template>
   <xsl:template match="Items">
      <table border="1" width="100%" style="border-collapse:collapse;background-color:#eee;border:1px solid;color:black;font-size:100%;font-family:arial,helvetica,sans-serif;">
         <thead>
            <tr>
               <td>Item Number</td>
               <td>Item Nomenclature</td>
               <td>Quantity</td>
               <td>Estimated Unit Cost</td>
               <td>Total Estimated Cost (USD)</td>
            </tr>
         </thead>
         <tbody>
            <xsl:apply-templates />
         </tbody>
      </table>
   </xsl:template>
   <xsl:template match="Item">
      <tr>
         <xsl:apply-templates select="cv_CurrentRowNumber" />
         <xsl:apply-templates select="txt_ItemNomenclature" />
         <xsl:apply-templates select="txt_Quantity" />
         <xsl:apply-templates select="txt_EstimatedUnitCost" />
         <xsl:apply-templates select="cv_TotalEstimatedCost" />
		 </tr>
   </xsl:template>
   <xsl:template match="cv_CurrentRowNumber">
      <td>
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="txt_ItemNomenclature">
      <td>
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="txt_Quantity">
      <td>
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="txt_EstimatedUnitCost">
      <td>
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="cv_TotalEstimatedCost">
      <td>
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
</xsl:stylesheet>

I am referencing you here @rhia since you have expressed an interest in CSS with your CSS - Nintex Style post.

Thanks,

Patrick

7 replies

kelliganp
Userlevel 4
Badge +10

Hey folks, I just wanted to bump this unanswered question up in the queue. Any CSS experts out there have any ideas?

Thanks and Regards,

Patrick

M
Badge +9

Hi Patrick,

 

the table tag in your example gives the answer: use the style attribute.

 

Kind regards

Manfred

kelliganp
Userlevel 4
Badge +10

Hi @mlauer ,

Thanks for the reply Manfred! So am I bale to add the style attribute in the <td> tag to alter the cell individually then?

Thanks again and Best Regards,

Patrick

kelliganp
Userlevel 4
Badge +10

Hi @mlauer , I made some progress with your note. My email table ahs progressed to Figure 1.

3853i93ACD751625AC7A2.png

Figure 1.

Here is what I added to my XML...

/* Here I added CSS to my header row  */
            <tr style="text-align:center;font-weight: bold;">
               <td>Item Number</td>
               <td>Item Nomenclature</td>
               <td>Quantity</td>
               <td>Estimated Unit Cost(s)</td>
               <td>Estimated Total Cost(s)</td>
            </tr>

/* Here I added a formatted Grand total row. I just need to learn how to manage the currency format and combine the first 4 cells into one cell.  */
         <tr style="text-align:center;font-weight: bold;">
		    <td style="text-align:right;font-weight: bold;"></td>
			<td style="text-align:right;font-weight: bold;"></td>
			<td style="text-align:right;font-weight: bold;"></td>
            <td style="text-align:right;font-weight: bold;">Grand Total:</td>
            <td style="text-align:right;font-weight: bold;">{WorkflowVariable:var_GrandTotalEstimatedCost_NUM}</td>
         </tr>

/* Here is the inline CSS I was able to add to the opening td tags with the style attribute like you suggested. Again, I need to figure out how to get the currency to work */
   <xsl:template match="cv_CurrentRowNumber">
      <td style="text-align:center;">
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="txt_ItemNomenclature">
      <td>
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="txt_Quantity">
      <td style="text-align:center;">
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="txt_EstimatedUnitCost">
      <td style="text-align:right;">
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="cv_TotalEstimatedCost">
      <td style="text-align:right;">
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>

I will keep plugging away at this to refine it ansd post my final XML for others. If anyone has advice on combining cells in this context or on how to render some columns as currency (USD and KWD will be needed eventually) let me know.

 

Thanks and Best Regards,

Patrick

M
Badge +9

>If anyone has advice on combining cells in this context

 

use HTML <td> colspan Attribute

kelliganp
Userlevel 4
Badge +10

Worked Great! It is looking really good now. I got the grand total from a calculated valus in the form that I connected to a list column. I put the currency symbol in there as a literal string in the workflow by concatenating with a build string action. I onluy need to figure out how to force (in form or workflow) 2 decimals when only one is rendered by the CV.

3888iA0CAA9F3FAD51CCD.png

 

Thanks @mlauer !

kelliganp
Userlevel 4
Badge +10

Oh... and here is my final working XSLT...

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <xsl:template match="/">
      <xsl:apply-templates />
   </xsl:template>
   <xsl:template match="Items">
      <table border="1" width="100%" style="border-collapse:collapse;background-color:#eee;border:1px solid;color:black;font-size:100%;font-family:arial,helvetica,sans-serif;">
         <thead>
            <tr style="text-align:center;font-weight: bold;">
               <td>Item Number</td>
               <td>Item Nomenclature</td>
               <td>Quantity</td>
               <td>Estimated Unit Cost(s)</td>
               <td>Estimated Total Cost(s)</td>
            </tr>
         </thead>
         <tbody>
            <xsl:apply-templates />
         </tbody>
         <tr style="text-align:center;font-weight: bold;">
		    <td colspan="4" align="right"><b>Grand Total (USD):</b></td>
            <td style="text-align:right;font-weight: bold;">{WorkflowVariable:var_GrandTotalEstimatedCost_TXT}</td>
         </tr>
      </table>
   </xsl:template>
   <xsl:template match="Item">
      <tr>
         <xsl:apply-templates select="cv_CurrentRowNumber" />
         <xsl:apply-templates select="txt_ItemNomenclature" />
         <xsl:apply-templates select="txt_Quantity" />
         <xsl:apply-templates select="txt_EstimatedUnitCost" />
         <xsl:apply-templates select="cv_TotalEstimatedCost" />
		 </tr>
   </xsl:template>
   <xsl:template match="cv_CurrentRowNumber">
      <td style="text-align:center;">
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="txt_ItemNomenclature">
      <td>
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="txt_Quantity">
      <td style="text-align:center;">
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="txt_EstimatedUnitCost">
      <td style="text-align:right;">
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
   <xsl:template match="cv_TotalEstimatedCost">
      <td style="text-align:right;">
         <xsl:value-of select="." disable-output-escaping="yes" />
      </td>
   </xsl:template>
</xsl:stylesheet>

Thanks again @mlauer !

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings