This series will give those RedDot developers who have never worked with Render Tags before a introduction on how to use the Open Text Web Solutions Management Server Render Tags. Render Tags can replace RQL code and add new functionality to your project. By using Render Tags you can gain project performance and stability within your project. Some things can be done with RedDot Render Tags which can’t even be done with the RedDot Query Language. Other things should not be done with Render Tags and you are about to learn when to use what. The experienced users of course will get something to nibble a bit later, too.

... render tag code ...

<%!! Context:CurrentPage.Headline !!%>

<reddot:cms>
  <output type="object" object="Context:CurrentPage.Headline" />
</reddot:cms>

<%!! Navigation:OutputArea(breadcrumb) !!%>

If you are starting to build projects and find this useful you should also have a look into the great RedDot CMS tutorial by Adrian Mateljan called “The One True Container – RedDot CMS Tutorial – Part I” which you can find here.

Share and Enjoy:

Integrating Microsoft ASP.NET into RedDot CMS
Learn it the right way here

Is it easy to integrate .NET into your RedDot CMS project? Yes it is, if you know how and obey some simple rules. This article gives you a best practice on how to include any .NET functionality for your published website within your RedDot CMS templates.

If you can avoid using inline code within your RedDot Content Classes then do it

Inline code within a content class can’t be versioned as it could be with a version control system when developing standard .NET solutions outside of any CMS. You can’t develop or test properly using inline code within the CMS. Whenever you have to change the .NET part of your project you would need a RedDot Consultant or some of their knowledge and hence your project doubles up on resources. Don’t integrate inline code within your CMS.

Let the CMS handle content – Don’t care about the rest

There is a clear understanding of what your CMS should handle for you – your content – and what it should not take care of – styling and dynamic functionality may it be Javascript, .NET or any other scripting technology. The CMS is your data storage and management layer, the web server is your presentation and visualization layer and hence it is the point where dynamic functionality, styling and user interaction takes place. By keeping those parts separate you ensure to have a stable, scalable and furthermore easily maintain- and upgradeable Content Management Solution. Read more on this topic here

Example – How to integrate .Net properly using User Controls

Instead of just adding a page directive followed by your inline code you should use user controls. Given that your code will be used on your website and not within the Open Text CMS ASP.NET User Controls are the best way to embedded dynamic functionality within your project.
There are basically two points where .NET is included in your template. The first one needs to be in every template which uses User Controls unless you integrate it using a container. The second one works as placeholder for the .NET functionality:

Referencing .ascx files and placing User Controls within templates
Read more »

Share and Enjoy:

Another big question that comes up every couple of weeks when people start developing websites with the RedDot CMS Open Text Web Solutions Management Server is this one:

How should I integrate my CSS code into the CMS?

And the answer is fairly easy to give and even easier to remember:

Don’t do it. Do NOT integrate your CSS code into the CMS !

It took me several projects to actually reach encounter this epiphany. It’s not worth doing it. And there are several good reasons for not doing it. And I will share them with you, more than happy to discuss it.

Since last year I suggest the following procedure for every project I come across:
Remove the CSS templates and related images to style your site from your project and put them outside of the template and therefore outside of your CMS logic.

A template is meant to semantically structure the stored data from the datasource (a database or sometimes even just XML files). We call this environment a CMS – Content Management System. The presentation layer for this content is formed by those templates and the combined usage of style sheet files. This methodology is similar to XML and XSL, where one stores content, the other defines the way to present it.

Don’t integrate CSS into Content Classes » Markup arguments

• CSS is not a template

  Keep in mind style sheets are NOT templates. CSS influences the way content is presented graphically. CSS is not responsible for the semantically correct markup. There is a reason why it is called “content class” inside the CMS. Because it’s about content.

• Background images are no content

  Images such as background images, bullet points, logos, etc. are NO content, they are a way to present content. Hence they don’t belong inside the CMS template structure. They do not help you manage the content nor do they store any valuable information for your visitors which you want to change as CMS editor.

• Border or Shades are no separators

  A border below a DIV or a headline is not a separator, a separator is a horizontal ruler set in the HTML by using a <hr>-tag and. That’s how content is semantically correct separated not using the content elements borders.

Don’t integrate CSS into Content Classes » Process & Budget

And if these three semantic reasons are not enough for you then here are another four development reasons why you should not mix up CSS & templating.

• It takes more time

  Changing a value in a CSS file takes about 5 minutes. In RedDot CMS you have to do this: Open your CSS template, change the value, publish it to your staging server, test the result, go back to the CMS, if required make some changes, publish again to the staging server, then test again – repeat this step until you have the desired outcome, then – publish the file to your live environment, done.

• It doesn’t work fast enough with international projects / shared RedDot projects

  When using shared content classes for several projects they develop over time different layouts. Some marketing departments want slightly separate styles and your CMS construct starts to get cracks and you have to add an special CSS template here and another one there. Keeping styles separate from projects gives you more options to change them faster without having to pay too much attention to all depending projects.

• It gives you more flexibility

  Assuming you have multiple projects and you run a style change on all of them. You have to test each change which works for Project A also in Project B, C and all the others. And you have to wait for all of them to be changed in the development process until you can start testing because they still might change in the background if you start testing before the last change has been made

• It adds more stability

  Your presentation layer should be static. Whenever your content gets published usually the styles heet files will get published too if they are part of the template set. Content changes approximately everyday in your company.
  How often does the style change of your project? Exactly.
  Why would you re-publish this everyday risking that it might fall over because editors have the ability to influence your companies CI? They don’t have access to it? Fine then again, remove the CSS from your project.

What should you do instead?

• Use a proper set of HTML templates before you start setting up your RedDot CMS project. Each final page template in the CMS should have an according HTML template. (If you didn’t go down that path yet it’s about time to set it up now, it safes you a lot of maintenance time and stress)
• Develop, test and maintain CSS changes in these HTML templates. If you find out that entered content in the CMS affects the way your site renders then test it in here and create an example page. It’s faster to test these pages in all browsers anyway.
• Once your development & testing is ready set up your project or update your existing project. A good place for your CSS files is the plugin folder of your CMS.
• Create a folder for each project inside the plugins folder and place the CSS folder structure and relevant files in there.
• Do the same by manually deploying the CSS files to your web server.

In your RedDot CMS project reference to the CSS files on your RedDot server when parsing the template code. For published files reference to your website CSS. This can be done by using render tags as described here.

How could Open Text tackle this issue

Open Text could easily integrate a CSS file compressor. This module takes the set of referenced CSS files and compresses them as one single file. It also reads out the image references. The compressed file and the image reference then will be attached to a publishing process. A file watcher checks for updates on the CSS files / CSS images. Whenever the CSS files change the compression / publishing process takes place.
This module can be switched off for development purposes and specific publishing targets. The RedDot CMS is NOT an IDE and should not be used to develop or maintain HTML and CSS changes. This module would be a great enhancement.

What do you think? How do you use CSS within RedDot CMS and what is your best practise for this?

Share and Enjoy:

Screenshot of the RSS Feed Template

This is a classic article about how to create a RSS Feed using our beloved CMS and this topic has been asked about 5 million times now on Google Groups Wiki and everywhere else… This question or furthermore one of these variations below will now be answered:

How to get an RSS Feed for my Open Text project?

• How do I create an RSS Feed in Open Text Web Solutions Management Server?
• How do I set up an Podcast?
• How can I create a news feed for my news section?
• How do I get my news list as a XML document

To create an RSS Feed within RedDot CMS you just need ONE template.
There is no need to create a separate XML variant or anything like this.
Just change the elements within the template to match your news elements and you are ready to go.
Don’t change the date element, this is a sensitive one which needs some ASP script to read a proper readable date for the RSS Feed.

The RSS Feed Template

The template below makes use of some nice Render Tags which you should check out. Especially the Render Tag described in the SEO article come in handy when you link news from different sections within the project connected to your RSS feed list using keywords.

Explanation of RedDot Elements

So what did we do here? Let’s have a closer look at the single bits and pieces within the template.
The first part contains two ASP functions “GetMonthName” and “GetDayName” to render the date returned by the RedDot element stf_pageDate properly in a RSS format. So DON’T TOUCH THE stf_pageDate element.
Then we have this part in the links:

<%stf_siteURL%><%!! Escape:HtmlEncode(Context:Indexes.GetIndexByPageId(Guid:<%info_PageGuid%>).Page.GetUrl()) !!%>

The siteUrl element should be the URL of your site (for example: www.reddotcmsblog.com if this would be your site..)
The second Render Tag bit returns the MainLink of the page to the linked site no matter what publication package is assigned to the RSS Feed.
All the other bits and pieces should be self-explaining.

Integration into my Open Text project

To integrate this template in your project:

1. Download the template below
2. Donate a decent amount to keep this site running
3. Import the template into your project
4. Make sure PreExecute is activated for your project
5. Create a page based on this template
6. Reference the list inside the template to your news list
7. Create a publication package for the RSS Feed list so that your pages get published into a hidden folder (this is to avoid double indexed files in your site search)
8. Change the filename to yourfeedname.xml
9. Integrate the file into your HTML page templates with something like this

10. Publish everything
11. You are done. Get yourself a Cookie!

Disclaimer & Credits

Feel free to re-use the code linked below. Don’t use the code above because it is just an example and it gets scrambled by the Syntax Highlighter. However both versions come with no warranty. When re-used by you we expect you to attribute this work and use it according to the CC license BY-SA 3.0. Thanks to the famous Plugin Developer and super coder Kim Dezen who helped me out with the code bits but hates writing other things than pretty code so I have to do it.
It also needs to be said that this example is a very basic one and you can enhance any fields you need. Feel free to send us your examples if you have improved this marvelous Open Text solution!

Download and Donate

We can’t get around to outline it and remind you. This site still runs for free. And this won’t change from todays point of view unless we manage to convince OpenText to make a bigger donation because we solve at least as many support requests per day as they do.
So grab your code, enjoy the work we share here with you and if you find it useful then after downloading the template feel free to donate (it should be enough for a beer..).

Share and Enjoy:

Taming the beast that Open Text so frankly called ‘Web Solutions Management Server’ we have some pretty nice tools available since version 7.1. Render Tags are a quick and effective way to create navigation elements like this breadcrumb navigation below.

    
        
            
<%!! Context:CurrentIndex.Headline !!%>

                <% currentDepth = <%!! Context:CurrentDepth !!%> %>
            
        
        
            
                
                    
<a class="first" href="<%!! Context:CurrentIndex.GetUrl() !!%>"
                            title="<%!! Context:CurrentIndex.Headline !!%>"><%!! Context:CurrentIndex.Headline !!%></a> / 

                        
                    
                
                
                    
<a href="<%!! Context:CurrentIndex.GetUrl() !!%>" title="<%!! Context:CurrentIndex.Headline !!%>">
                            <%!! Context:CurrentIndex.Headline !!%></a> / 

                        
                    
                
            
        
    

A pretty nice piece of code. It creates a breadcrumb navigation with several CSS class names, giving you many options to style the whole thing very detailed.

Embed this in your project

1. Put it in a separate template
2. Create a container (for example ‘con_breadcrumb’) in your MasterPage(s)
3. Create ONE instance of the breadcrumb template in the container inside the homepage template (you don’t need to place the container in the HTML of your homepage it’s just a good place to store unique project wide pages)
4. Reference the ‘con_breadcrumb’ container in your homepage page to all MasterPage templates (and if required to all already exisiting pages – thankfully there is a plugin available from Open Text for this, just ask them!)

Done.

Credits

I asked Neil Fegen, if I can use his enhanced version of the script from Ingo Hillebrand who came up with it last Friday on the RedDot Google Group. Thank you guys for sharing this stuff with us!

Share and Enjoy:

When pages are connected to multiple links allover the project – for example by using keywords – you will end up with one page published multiple times in several folder. This leads to duplicate content and search engines like Google, Yahoo, Bing, … basically any engine crawling your page will assume that you are trying to get a higher ranking by duplicating your content and keyword density. This can unfortunately lead to a full exclusion from Google’s search index and none of your pages within your domain would be found. Disturbing, isn’t it?

Why does it happen?

So why does the publishing of multiple pages happen?
Let’s have a look at the architecture of link elements within the Web Solutions Management Server RedDot CMS:
The PageBuilder is the core piece which follows the link structure of your Content Management Project and verifies every link and page within your project. Beside that the PageBuiler has been rewritten recently in .NET and shows now a performance than before when configured properly.

Different link types

There are two or furthermore three types of link elements:

1. References
   they just reference/point to the origin place where a page “lives” within the project and
2. Connected pages
   which can be expanded in SmartTree and are ‘truly connected’ to the link element
3. Mainlink
   One exception is the Mainlink, this is the place where the page usually has been created at first and it defines the place where the page really lives in the CMS project.

What happens during publishing?

During the publishing process within WSMS RedDot CMS referenced links are not followed by the PageBuilder and hence don’t produce a published page follwing this link.
Connected pages to links are recognized by the PageBuilder which picks up the publication package assigned to the link and according to the settings in this package the page gets published. If a page is connected multiple times in a project, not just referenced, this structure creates multiple pages with the same content.

How do we solve multiple publishing?

We will convince the CMS PageBuilder that it is looking at a reference instead of a connected page link. The code for this is easy:

<%=Replace("<%list_teaser%>","islink=2","islink=10")%>

The only limitation here is:

• The link element needs to be set to ‘insert path- and filename only’.
• The code block runs in a prexecute so that the code is executed and returned as html when published

What the code does is that it replaces the link type

• 2 = link, follow and publish the site based on the publication package attached to this link element
  to
• 10 = reference, don’t follow this page and don’t publish it, just use the MainLink the page is connected to

The (almost) ready to go template code

    

<%hdl_pagetitle%>

      

<%stf_metadescription%>


    
  

Attention:

• Don’t forget to wrap the code above in a pre execute
• The RenderTag in the href=” ” doesn’t show up properly in so replace “RenderTag” with the tag above as described in the comment

EXPLANATION: So what does this all do?

This code hides the link from the HTML structure. Although it is hidden now from the HTML it doesn’t stop the PageBuilder from following the link and publishing the page, so we have to replace the two link types as discussed above.

Render Tag Code? What do we do here with the Render Tag?

<%!! Context:Pages.GetPage(Guid:<%info_PageGuid%>).GetUrl() !!%>

This nice Render Tag sets the link URL to the MainLink of the page. If this is used everywhere all links will point to the same place and make sure that you won’t have duplicate content or unwanted sites published in the wrong place.

Other ways?

I am sure there are of course other ways to solve this issue and I am keen to read them below!

Share and Enjoy:

Render tags can be used in many different ways. By using them one not only is able to read content from several places in the project you also can change and manipulate page rendering and use the render tag technology for your control structures.
The following list gives a overview and is meant to be an introduction into the functionality and use cases for render tags.

The most common use of render tags is probably the output of content:

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value
!!%>

Manipulating the returned content

Only returning content might often be not of interest. This can be done by a reference or just the element placeholder itself. Hence here are a couple of ways to manipulate the render tag content output.

PadRight()
Return the content of an element with a maximum length of 15 characters

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.PadRight(Int:15)
!!%>

Substring()
Return the first 10 characters of a content element

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.Substring(Int:0, Int:10)
!!%>

Trim()
Return content and remove white space from beginning and end of string

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.Trim()
!!%>

Replace()
Return element content but replace parts of the string. In this example I replace “RedDot” with “OpenText”

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.Replace(RedDot,OpenText)
!!%>

ToUpper()
Return the output in UPPERCASE

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.ToUpper()
!!%>

ToLower()
Return the value of the string in lowercase

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.ToLower()
!!%>

ToString()
Change the output type to type “String()”

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.ToString()
!!%>

Length
Return the character length of returned value

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.Length
!!%>

HtmlEncode()
Return HTML encoded value of the element

<%!!
Escape:HtmlEncode(Context:CurrentPage.Elements.GetElement(std_elem).Value)
!!%>

HtmlDecode()
Return HTML decoded value of the element

<%!!
Escape:HtmlDecode(Context:CurrentPage.Elements.GetElement(std_elem).Value)
!!%>

Control output based on render tag queries

Render tags are not only used to return element content.
It also can be used to check the value of an element and create several types of queries.

Equals()
Checks if two Strings are equal or not, return value is type of Boolean

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.Equals(STR)
!!%>

StartsWith()
Checks if the returned content starts with the given value (i.e. character) Return value is of type Boolean

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.StartsWith(STR)
!!%>

EndsWith()
Checks if the returned content ends with the given value (i.e. character) Return value is of type Boolean

<%!!
Context:CurrentPage.Elements.GetElement(std_elem).Value.EndsWith(STR)
!!%>

<If> and <else> render tag queries

These return values can be used as well as queries which are known from other programming languages.
Another way of controlling output for example are <if>- and <if>-<else>-queries
<IF>

<reddot:cms>
  <if>
    <query valuea="Context:CurrentPage.Elements.GetElement(std_elem).Value" operator="==" valueb="String:test">
      <htmltext>
        Value is "test"
      </htmltext>
    </query>
  </if>
</reddot:cms>

This IF-query can be enhanced by the ELSE-query which comes in handy when you need an SSL-Switch or you want to Skip levels in your navigation

<IF>-<ELSE>

<reddot:cms>
  <if>
    <query valuea=" Context:CurrentPage.Elements.GetElement(std_elem).Value" operator="==" valueb="String:test">
      <htmltext>
        Value is "test"
      </htmltext>
    </query>
    <query type="else">
      <htmltext>
        Value is certainly NOT "test"
      </htmltext>
    </query>
  </if>
</reddot:cms>

In the Loop

Beside these two options render tags offer other solutions. One of those is the possibility to use render tags for the output of elements within or outside of structure elements. For example you can use those outside of navigation manager templates to return your project structure

foreach

<reddot:cms>
  <foreach itemname="item" object="Context:CurrentPage.SubIndexes" countername="counter">
    <htmltext>
      <%!! Store:counter !!%>. <%!! Store:item.Headline !!%><br />
    </htmltext>
  </foreach>
</reddot:cms>

Reading structure elements

Not only can this be used to return your navigation structure at any point of the project – you also can use it to return the structure elements (lists, anchors, container) of any page. Although – in Version 7.5.x – not in the right sort order.

foreach

<reddot:cms>
  <foreach itemname="item" object="Context:CurrentPage.Elements.GetElement(lst_elem).Value" countername="counter">
    <htmltext>
      <%!! Store:counter !!%>. <%!! Store:item.Headline !!%><br />
    </htmltext>
  </foreach>
</reddot:cms>

Undocumented and documented render tags

Beside those and the already described functions in the documentation there are a couple of others which aren’t documented (yet?). For example it is possible to return the name of a content class by using this

Template
Reading a content-class

<%!!
Context:CurrentPage.Template.Name
!!%>

Render tags were quite new and a lot Open Text / RedDot CMS developers are used to ASP with VB.Net but these new tags are worth to have a look at because some of them can reach into parts of the project were you are stuck with your ASP code or you would have to use RQLs which can be slow down the editing process.

Disclaimer

Be aware of undocumented render tags, they might change with the next version of RedDot (oh, wait, there might be no next major version after version 10..) ok, they might change with the next hotfix and then you have to walk through your system and find the little buggers. We also don’t give any warranty for the code shown here, use it at your own risk.

Links

• Credits for this collection go to Ingo from Shift8, who has wrote all this down in German
• This is Phil McKenzies hardcore render tag article
  which will take you more than one step ahead the usual way of using render tags – Very nice read!
• Render tags to translate a site easily!
  A great article for international projects.
• Allowing external links in your navigation
  Growing your navigation beyond the basic tree – Interesting approach by Adrian

Do you know any render tag tricks? Let us know!

Show your render tags below in the comments field, but don’t forget to escape your HTML, which means that the code must be escaped by using HTML-Entities. For example one should write < as & lt; and > as & gt;.

Share and Enjoy: