cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
kelliganp
Nintex Newbie

How can I Use Inline CSS Styles with XSLT?

Jump to solution

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.

Figure 1.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.

Figure 2.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

Labels: (2)
Tags (5)
0 Kudos
Reply
7 Replies
kelliganp
Nintex Newbie

Re: How can I Use Inline CSS Styles with XSLT?

Jump to solution

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

0 Kudos
Reply
mlauer
Nintex Newbie

Re: How can I Use Inline CSS Styles with XSLT?

Jump to solution

Hi Patrick,

 

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

 

Kind regards

Manfred

Reply
kelliganp
Nintex Newbie

Re: How can I Use Inline CSS Styles with XSLT?

Jump to solution

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

0 Kudos
Reply
kelliganp
Nintex Newbie

Re: How can I Use Inline CSS Styles with XSLT?

Jump to solution

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

HTML Table Progress 20190806.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

0 Kudos
Reply
mlauer
Nintex Newbie

Re: How can I Use Inline CSS Styles with XSLT?

Jump to solution

>If anyone has advice on combining cells in this context

 

use HTML <td> colspan Attribute

0 Kudos
Reply
kelliganp
Nintex Newbie

Re: How can I Use Inline CSS Styles with XSLT?

Jump to solution

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.

HTML Table Progress 20190809.png

 

Thanks @mlauer !

0 Kudos
Reply
kelliganp
Nintex Newbie

Re: How can I Use Inline CSS Styles with XSLT?

Jump to solution

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