JavaScript

LumisXP allows you to develop styles in JavaScript. To create a style in JavaScript, simply choose the programming language "JavaScript" when creating the style.

For information about the format of a style in script, see the topic Styles in Thymeleaf, JavaScript, and Groovy.

Below are some examples of styles in JavaScript.

Quick News List

<ul class="lum-list">
<%
  var rows = lum_xpath.selectNodes("//data/row");
  for(var i in rows)
   {
      var row = lum_xpath.toMap(rows[i]);
%>
  <li class="lum-list-item"<%=i == 0 ? " lum-first" : "" + i == rows.length-1 ? " lum-last" : ""%>>
      <article class="lum-content" data-lum-entityid="<%=row.contentId%>" data-lum-title="<%=row.title%>" data-lum-url="<%=row.$href%>" data-lum-serviceinstanceid="<%=row.serviceInstanceId%>">
          <header class="lum-content-header">
              <h1 class="lum-content-title">
                  <a href="<%=row.$href%>">
                      <%=row.title%>
                  </a>
              </h1>
              <ul class="lum-content-meta-information">
                  <li class="lum-first lum-last">
                       On
                      <time datetime="<%=row.publishStartDate.year%>-<%=row.publishStartDate.month%>-<%=row.publishStartDate.day%>T<%=row.publishStartDate.hours%>:<%=row.publishStartDate.minutes%>:<%=row.publishStartDate.seconds%>">
                          <%=row.publishStartDate.value%>
                      </time>
                  </li>
              </ul>
              <div class="lum-content-introduction">
                  <p>
                      <%=row.introduction%>
                  </p>
              </div>
          </header>
      </article>
  </li>
<%
   }//end of for loop
%>
</ul>

In the example above, utility methods provided by LumisXP. For complete information on them, see the topic lum_xpath Variable

List<Node> lum_xpath.selectNodes(String xpath)	Returns a list of all Node type Elements with the provided XPath. In JavaScript, the list is converted into an array.
Map<String, Object> lum_xpath.toMap(Node node)	Returns a Map<String, Object> representing the provided Node. The conversion rules can be found on the page IXPath. In JavaScript, the map is converted into an array[String] = Object

Using Property Bag in Style

This example shows how to read values from a property bag of the current page to a variable in JavaScript, and thus be able to use them in the style.

Using Environment Property in Style

This example shows how to read values from an environment property to a variable in JavaScript, and thus be able to use them in the style.