Version indicator with DekiScript

Create a custom template to indicate which product(s) a particular article applies to.

Version indicators can help your customers easily identify the correct documentation for the version they are using and help unsure users figure out which version documentation they should be looking at. Other reasons may include:  

How to add a version indicator

To create a template that will tell you what version of your software your documentation applies to:

  1. Go to Site tools > Dashboard > Site Administration > Template Directory > Template:Custom > Views.
  2. Click New to create a new template under Views.
  3. Choose a title for your template. (You will be using this title later.)

Add DekiScript code

  1. On the editor toolbar click Styles and select DekiScript. 
  2. Paste the following DekiScript code into the DekisScript code box.
var version = $version ?? "default";

<div class="version-indicator">
  <span class="version-text">"This article applies to:"</span>
  if (!version || version == "" || version =="V1")
  {
      <span class="version-tag version-V1">
          <a class="F1 version-reference-link" href="#">"Only Version 1"</a>
      </span>
  }
  if (version == "V2")
  {        
      <span class="version-tag version-V2">
          <a class="F1 version-reference-link" href="#">"Only Version 2"</a>
      </span>
  }
  if (version == "both")
  {
      <span class="version-tag version-both">
          <a class="F1 version-reference-link" href="#">"Version 1 and Version 2"</a>
      </span>
  }
</div>

Add CSS code

  1. On the editor toolbar, click Styles and select CSS. 
  2. Paste the following CSS code into the CSS code box.
  3. Click Save.
.version-indicator {
   padding:4px;
   background:#efefef;
   overflow:hidden;
   font-size:11px;
   border:1px solid #ccc;
   border-radius:3px;
}
.version-indicator span {
   float:left;
   display:block;
   margin-right:20px;
}
.version-indicator .version-text {
   font-weight:bold;
}

Edit your DekiScript code

To edit the code to pertain to your product, replace V1 and V2 in the DekiScript code with versions of your product. To add more versions, paste the following snippet at the end of the code (before the </div> tag!)

if (version == "V3")
{
<span class="version-tag version-V3">
<a class="F1 version-reference-link" href="#">"Only Version 3"</a>
</span>
}

Link to a document (optional)

To link versions to a document that explains, for example, which version a customer is using, replace the # (of the href attribute) with the path only to that document. The href attribute would look something like this: /Documentation/User_Guide/What_version_of_MindTouch_am_I_using%3F

Add your template to a page

Now that you have created the template, you must add another piece of DekiScript code to your page to surface the version indicator.

  1. Open your page in Edit mode.
  2. Make sure your cursor is at the top of the page. 
  3. On the editor toolbar, click Styles and select DekiScript.
  4. Paste the following code in a DekiScript box:
template("Custom/Views/Template_Title", {version:"V1"});
  1.  Replace Template_Title with the title of your template. Make sure to use an underscore (_) instead of a space.
  2.  Replace V1 with the version to which the document applies. Make sure the name of the version has quotation marks around it. Keep in mind that two quotation marks by themselves ("") refer to "Only Version 1," while "both" refers to "Version 1 and Version 2."