Metadata field to add color selection

Topics: General, XSLT
May 23, 2011 at 5:30 PM

I need a way to specify a <div> background color when a page template, consuming this value (#C0C0C0 for example), is chosen by a user for their new page. It looks like a Page Datatype should be created and that the page include a metadata field based on DataIdMultiSelector in the case of predetermined choices, or a simple text field to enter the hex RGB string into. How is the metadata field used in an XSLT function to generate the proper resulting markup for the <div>? 

Coordinator
May 24, 2011 at 6:30 AM
Edited May 24, 2011 at 6:30 AM

Hello,

Check these discussions: http://compositec1.codeplex.com/discussions/248504 and http://compositec1.codeplex.com/discussions/249212

May 24, 2011 at 1:49 PM

Thanks so much Inna.

I have the XSLT function I created returning

        <div class="row" style="background-color: #{$RGBColor};">
          <div id="contenttopdiv" class="twelvecol last">
            <article>
              <div class="contentbox">
                <rendering:placeholder id="contenttop" title="Top Content" />
              </div>
            </article>
          </div>
        </div>

where $RGBColor equals the value set in the metadata. However, what's the best way to divide the markup between the XSLT function and the page template? The placeholder markup returned by the XSLT function call (above) happens too late to bind the content to it.

Russ

Coordinator
May 24, 2011 at 4:08 PM

You should pass contenttop placeholder  as input parameter to your XSLT.

Add additional input parameter to your XSLT, e.g named Content, set parameter type  to XhtmlDocument. On the "Template" tab XSLT markup will be something like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in lang f">
  <xsl:template match="/">
    <html>
      <head>
        <!-- markup placed here will be shown in the head section of the rendered page --></head>
      <body>
        <div class="row" style="background-color: #{&RGBColor};">
          <div id="contenttopdiv" class="twelvecol last">
            <article>
              <div class="contentbox">
                <xsl:copy-of select="/in:inputs/in:param[@name='Content']/*" />
              </div>
            </article>
          </div>
        </div>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

Then on the Layout insert that XSLT function call and pass contenttop placeholder as input parameter:
  <f:function  name="Layout.ContentTop">
    <f:param  name="Content">
      <rendering:placeholder id="contenttop" title="contenttop"/>
   </f:param>
</f:function>

May 24, 2011 at 5:47 PM

That seems close, but below is what I see in Preview. The "Test value" has to be a well-form XHTML document, or the data editor will not accept any input (hence the extra markup in blue).

Everything in red is what I am trying to pass in (more than just a placeholder).

If I run the function from the page using the template that calls the XSLT function, then I get an unhandled exception thrown. Seems like I have to pass-in a XhtmlDocument object?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head/>
     <body>
         <div class="row" style="background-color: #0093D0;">
             <html>
                <head/>
                 <body>
                     <div id="contenttopdiv" class="twelvecol last">
                         <article>
                             <div class="contentbox">
                                <rendering:placeholder id="contenttop" title="contenttop" xmlns:rendering="http://www.composite.net/ns/rendering/1.0"/>
                            </div>
                        </article>
                    </div>
                </body>
            </html>
        </div>
    </body>
</html>

Coordinator
May 24, 2011 at 7:00 PM

If Content input parameter has XhtmlDocument  type, so yes,  you should  pass-in a XhtmlDocument object.

<rendering:placeholder /> element returns XhtmlDocument object, so it can be passed-in (without extra markup) like I described above.

But you can change Content input parameter type  and set to Object and then checkout your example.


May 25, 2011 at 1:38 PM

Thanks again Inna, that did it. Now all of my templates for the customer are wired to consume the selected page accent color, much like a theme, only far simpler.

Russ