Accessing a NAVON's variable selector value from the global template

Rhythmyx Technical Discussion
1

We have a site that has multiple stylesheets depending on which section you’re viewing. We can’t merge the stylesheets because they all contain the same elements (just with different attributes). So, we’re left to try and dynamically render the stylesheet link in the global template at publishing time. We have set up a publishing variable containing the name of the stylesheet, however we have been unable to bind this variable to our template. We can’t hardcode the binding because there will be multiple publishing variables we need to access (depending on the section). So, we are using the NAVON variable selector to specify the variable to use for all content items in that NAVON’s folder, but we don’t know how to access that property from our global template.
We tried following the example layed out in the Rhythmyx_Implementation_Guide_Version_6_5.pdf
Section: Variable Selectors (pg 288 under Managed Navigation)
but it wasn’t much help. We even tried setting a custom folder property within content explorer and then tried to access that property from within the template (using JEXL) but we unsuccessful with that also.

Please Help!

2

The short answer to your question is that you will use $rxs_navbase to refer to the CSS file like this:

<link rel="stylesheet" href="${rxs_navbase}/css/mystyles.css"  >

The value of $rxs_navbase will be replaced by the value of the selected variable name (in the dropdown on the Navon) for all content in that section.

However, there’s a little more background needed to understand what’s going on here. There are several steps needed to get this right. The documentation is correct as far as it goes.

BTW, the Fast Forward implementation is somewhat incorrect in this area: it uses rxs_navbase, but it doesn’t show how to substitute other variables.

In the big picture, what you are trying to do is implement multiple “style schemes” across different sections of your site. This is exactly the problem that variable selectors were added to address.

A “style scheme” can be as simple as a single CSS file, or it can be a directory tree with multiple CSS, JavaScript and Image files in it. In the simplest case, there will be only one section per style scheme, but it’s also possible to re-use a single scheme across multiple sections.

Your first step is to design your style schemes, bearing in mind that

  1. Rhythmyx only gives you the option to select 1 style scheme per section, so all of your style elements (that can change) need to go into the style scheme.

  2. All files (images, scripts, CSS, etc) and CSS elements must have the same names across different schemes. You’re going to refer to each CSS class (or image) by the same name in all of your different style schemes.

You will need a copies of the files that make up your style schemes in two places: in the web_resources folder of the Rhythmyx server and on your web server (and any staging servers). These files are not managed by Rhythmyx: they are “site furniture”.

Once you have the files, you must create a publishing variable for each different scheme. The values of this variable point to the “root” of the directory fragment that holds the style scheme. In the simple case of 1 CSS fiile, this is simply the name of the CSS file. Each variable will have at least 2 values : one for Preview and one for the Publishing context. If you publish more than one context you will need more values.

In the Navon at the top of each section, select the Variable that holds the styles for that section. All pages and subsections from that point downwards in the site tree will inherit this value.

In the templates (both Global and Local) the variable $rxs_navbase will inherit the value of the selected variable. Your templates should never refer to the other style variables, only to rxs_navbase.

Let me know if this helps or if you have further questions

Dave

3

I should add that the above assumes that you’ve bound

$rxs_navbase = $sys.variables.rxs_navbase
4

Thanks for the reply. I went ahead and tried your suggestion but when I selected a variable for the navon, the $rxs_navbase variable in my global template didn’t change (it still had the rxs_navbase value).

5

I think if we knew what the JEXL expression was to access the NAVON’s variable selector property, we would be able to append that value to the end of our CSS include code.

for example:

<link rel="stylesheet" type="text/css" href="$rxs_navbase/css/$section_style" />

Where $section_style is bound to the NAVON’s variable selector

$section_style = $sys.GetCurrentNAVON.SelectedVariable.Value
6

You’re correct. This is currently broken, and we’re still figuring out what the long term solution is.

In the short term, you can use the $nav.base variable, which like all $nav things is only available in snippets of Navons. This variable contains the value of the selected variable. I’ve been a bit busy this week, but I’ll try to post an example of this in a day or two.

Dave

7

The attached zip file contains 3 templates that show how to use $nav.base to find the variable selector.

I implemented a simple “multi-color” site, which has 3 sections: red, green and blue. I created 3 different variables (mcsNavRed, mcsNavGreen and mcsNavBlue).

In my global template (mcsGtCommon) I included a slot in the header that assembles the nav link template (mcsCSSLink). The nav link template renders the <link> tag for that pulls in the CSS. The page temple is nothing special, but it was easier to have a complete set.

When I preview the page template in the “Red” folder, the link tag looks like this:

<link rel="stylesheet" href="/web_resources/mcsnav/red/css/mystyles.css" />

when I preview the page in the “Blue” folder, it looks like this:

<link rel="stylesheet" href="/web_resources/mcsnav/blue/css/mystyles.css" />

As I stated before, we’re still discussing how to fix this long term, but this should work for anybody who needs to use variable selectors in Rhythmyx 6.x

Dave