Dynamic functions

We show a dynamic function that displays the current date and time. The format is adjustable via element settings.

Related links

1 The result

The following example content is a dynamic function with parameters and settings configured. The function provider displays the parameters and settings and uses them to format a date.

If you are offline, edit the dynamic function and see how its appearance changes. Moreover, you can add the dynamic function again ("Add content" -> "Dynamic functions" -> "Demo dynamic function".

 

Dynamic Function Demo.

Apr 26, 2024 6:53:15 PM
Settings:
  • Format: both
  • Style: medium
Parameters:
  • locale: en_US
 

2 Example resources and interesting spots

A dynamic function consists of two main parts: the function itself and a function provider, that is kind of a formatter for the function.

The function itself is an XML content where the provider, element settings and parameters passed to the function provider are configured. Moreover, the containers where the function can be rendered (optionally with different providers) can be defined. Below, the function for the above example is shown. It also opens, when you edit the above example.

/system/modules/com.alkacon.opencms.documentation/functions/demo/time-example.xml

The second component, the function provider is a JSP that renders the shown content and therefore it may read parameters and element settings from the function.

Here is the code of the provider from the above example.

/system/modules/com.alkacon.opencms.documentation/functions/demo/time-example.jsp
<%@page buffer="none" session="false" trimDirectiveWhitespaces="true" %>
<%@taglib prefix="cms" uri="http://www.opencms.org/taglib/cms"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:setLocale scope="page" value="${param.locale}" />
<div>
    <%-- Title of the article --%>
    <h4>Dynamic Function Demo.</h4>
    <div>
        <%-- The text field of the article with image --%>
        <div class="paragraph">
            <jsp:useBean id="date" class="java.util.Date" />
            <%-- Use the setting option to define the format and style of the date time output. --%>
            <c:set var="format"><cms:elementsetting name="format"/></c:set>
            <c:set var="style"><cms:elementsetting name="style"/></c:set>
            <b><fmt:formatDate value="${date}" dateStyle="${style}" type="${format}" /></b>
            <h6>Settings:</h6>
            <ul>
                <li><b>Format:</b> <cms:elementsetting name="format"/></li>
                <li><b>Style:</b> <cms:elementsetting name="style"/></li>
            </ul>
            <h6>Parameters:</h6>
            <ul>
                <li><b>locale:</b> ${param.locale}</li>
            </ul>
        </div>
    </div>
</div>