RedDot Trick with Conditional Tags

A little trick I have developed for use in RedDot CMS.

Requirements

  1. A part of the page needs 3 elements in this order:
    • TITLE – a user editable Standard Field.
    • DESCRIPTON – a user editable Text Field.
    • FOOTER – fixed text.
  2. If the TITLE is not populated, none of these elements should appear on the page, regardless of whether the DESCRIPTION is populated.
  3. If the TITLE is populated, the TITLE and FOOTER should appear, regardless of whether the DESCRIPTION is also populated.
  4. The DESCRIPTION should only appear on the page if both the DESCRIPTION and the TITLE are populated.

So:

Populated? Show
Title Description Title Description Footer
No No No No No
Yes No Yes No Yes
No Yes No No No
Yes Yes Yes Yes Yes

Initial Solution

All the elements need to be wrapped in a conditional block, otherwise they will always be visible, so:

 <!IoRangeConditional>

  <!-- Title -->

  <!IoRangeRedDotEditOnly>
   <br /><!IoRedDot_stf_Alert><span class="rd"> Edit the title.</span><br />
  <!/IoRangeRedDotEditOnly>

  <h2><%stf_Title%></h2>

  <!-- Description -->

  <!IoRangeRedDotEditOnly>
   <br /><!IoRedDot_txt_Description><span class="rd"> Edit the detailed description.</span><br />
  <!/IoRangeRedDotEditOnly>

  <%txt_Description%>

  <!-- Footer -->

  <div class="hr"><hr /></div>

 <!/IoRangeConditional>

Problems with the Initial Solution

<!IoRangeConditional> tags work on an all-or-nothing basis. If any of the fields are not populated, all the items wrapped in the conditional tags are excluded from the published page.

In this case, if the desription is missing then the title and footer will also be suppressed, violating requirement (2).

So:

Populated? Show
Title Description Title Description Footer
No No No No No
Yes No No* No No*
No Yes No No No
Yes Yes Yes Yes Yes

* = problem.

The Final Solution

  1. Split the problem into three parts, one for each of the components we are working with.
  2. Wrap the TITLE, DESCRIPTION and FOOTER in their own conditional blocks.
  3. Include the TITLE field in  the DESCRIPTION and FOOTER conditional block.
  4. In the DESCRIPTION and FOOTER blocks, wrap the TITLE field in comments.

Thus:

 <!IoRangeConditional>

  <!-- Title -->

  <!IoRangeRedDotEditOnly>
   <br /><!IoRedDot_stf_Alert><span class="rd"> Edit the title.</span><br />
  <!/IoRangeRedDotEditOnly>

  <h2><%stf_Title%></h2>

 <!/IoRangeConditional>
 <!-- Description -->

 <!IoRangeConditional>

  <!-- <%stf_Title%> -->

  <!IoRangeRedDotEditOnly>
   <br /><!IoRedDot_txt_Description><span class="rd"> Edit the detailed description.</span><br />
  <!/IoRangeRedDotEditOnly>

  <%txt_Description%>

 <!/IoRangeConditional>
 <!IoRangeConditional>

  <!-- Footer -->

  <!-- <%stf_Title%> -->

  <div class="hr"><hr /></div>
 <!/IoRangeConditional>

Now, for each of the 3 blocks :

  • TITLE will only show if it is populated.
  • DESCRIPTION will only show if both TITLE and DESCRIPTION are populated. TITLE will be included on the page, but not rendered.
  • FOOTER will only show if TITLE is populated. TITLE will be included on the page, but not rendered.

Notes

Although it is not rendered, the TITLE field in the DESCRIPTION and FOOTER blocks is still sent to the user’s browser. Therefore, this technique should only be applied where TITLE is anticipated to be short.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: