Version indicator with DekiScript

Last updated
Save as PDF

Applies to:: All versions
Role required:: Draft Contributor

Create a custom template to indicate which products an article applies to.

Version indicators can help your customers identify the correct documentation they need, and help unsure users figure out which documentation they should read.

Other reasons to use version indicators:

Your team can deprecate an old version of your product, or features that no longer apply.
You can encourage customers to upgrade to a new product.
Support agents can easily determine product support flows and guidance.

Prerequisite

Admin user role

How to add a version indicator

To create a version indicator template:

Go to Site tools > Dashboard > Site Administration > Template Directory > Template:Custom > Views.
Or append /Template:Custom/Views to your site URL.
Click New.
Enter a title for your template.
Save.

Add DekiScript code

On the editor toolbar click Styles > DekiScript.
Paste the following DekiScript code into the 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

In the Editor toolbar, click Styles > CSS.
Paste the following CSS code into the box.
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 for your product, replace V1 and V2 in the DekiScript 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 to that document.

The href attribute would look like the following: /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.

Open your page in Edit mode.
Place your cursor at the top of the page.
In the Editor toolbar, click Styles > DekiScript.
Paste the following code in the box:

template("Custom/Views/Template_Title", {version:"V1"});

Replace Template_Title with the title of your template. Make sure to use an underscore (_) instead of a space.
Replace V1 with the version to which the document applies. Make sure the name of the version has quotation marks around it. Two quotation marks by themselves ("") refer to "Only Version 1," while "both" refers to "Version 1 and Version 2."