Modifying CSS Styles based on InfoPath field without code

/

This is an article expanding on a comment I made previously on the Microsoft InfoPath forums.

http://social.msdn.microsoft.com/Forums/en-US/sharepointcustomizationprevious/thread/4a8dbae1-4641-4ee2-b034-3768ebda5a47

The Problem

How do we modify the margin of a column based on a field within InfoPath. 

 

Solution

Invoking dark magics of XSL (you have read the disclaimer).  This is totally unsupported, but fun.

  1. Create a new form, add a number field "n1".
  2. Put this field onto the design area within a section
  3. Create a rule on the section, "if n1 > 0", make the background red.
    (these steps are useful to set up the form to a stage where we can add additional rules).
  4. save your form as "MarginForm.xsn", we're about to do unsupported magic. 
  5. go to File | Publish | Export | Export Source Files - save the component files of your form into a blank folder, e.g. "C:\Temp\MarginForm\"
  6. close InfoPath designer, go to your folder, and look for the XSL file for your view, typically, it's <view name>.xsl.  For me, this is: C:\Temp\MarginForm\view1.xsl
  7. Open the xsl in a text editor - preferably one that understands XSL to give you syntax highlighting.
  8. Find our formatting rule, it looks like this:
    <xsl:attribute name="style">BORDER-BOTTOM: 0pt; BORDER-LEFT: 0pt; WIDTH: 100%; MARGIN-BOTTOM: 0px; BORDER-TOP: 0pt; BORDER-RIGHT: 0pt;<xsl:choose>
    <xsl:when test="../my:n1 &gt; 0">BACKGROUND-COLOR: #ff6600; caption: Rule 1;</xsl:when>
    </xsl:choose>
    </xsl:attribute>
  9. add additional formatting for margin-left, like this:
    <xsl:attribute name="style">BORDER-BOTTOM: 0pt; BORDER-LEFT: 0pt; WIDTH: 100%; MARGIN-BOTTOM: 0px; BORDER-TOP: 0pt; BORDER-RIGHT: 0pt;<xsl:choose>
    <xsl:when test="../my:n1 &gt; 0">BACKGROUND-COLOR: #ff6600; caption: Rule 1; MARGIN-LEFT: <xsl:value-of select="../my:n1"/>px;</xsl:when>
    </xsl:choose>
    </xsl:attribute>
  10. save your XSL, close it.  Open  the whole thing back in InfoPath designer from manifest.xsf
  11. test it and save it back into MarginForm.xsn file.
  12. Once you are comfortable and understand what's going on, clean up the rule in xsl (don't use the designer) and get rid of the rule for "red".

The Results

 

Download Files

 

A site maintenance notice.  I've removed all back references on the site - they were being spammed like crazy and I wasn't doing a good job of cleaning them up.  If you need a back reference, please leave a comment and I'll verify them.