OpenCms Documentation

Function detail pages

 Show GitHub edit links  Hide GitHub edit links
In OpenCms since: 8.0.3 Valid for OpenCms: 11.0.0

We show a simple calculator. A first dynamic function provides the input fields for the calculation and a second dynamic function, used for the detail page, shows the result.

The result

Enter numbers and click "Calculate". This will redirect you the the configured function detail page and display the result. Press you browser "Back" button to get back to this page.

 

Simple calculator

 

 

Example resources and interesting spots

Linking to the dynamic function detail page.

The simple calculator shown above is a normal dynamic function with function and JSP as demonstrated in the dynamic functions demo. The only function detail page specific part is the link to the function detail page in the function JSP. It is set as action attribute of the form. The link is: ${cms.functionDetail['Demo: Calculation result']}. Where the given name is the name of the "named function" to whose detail page we link.

Below, you see the source of the function JSP of the simple calculator.

<%@page buffer="none" session="false" trimDirectiveWhitespaces="true" %>
<div class="margin-bottom-30">
    <%-- Title of the article --%>
    <div class="headline"><h3>Simple calculator</h3></div>
    <div>
        <%-- The text field of the article with image --%>
        <div class="paragraph">
            <form action="${cms.functionDetail['Demo: Calculation result']}" method="post">
                <input type="text" size="8" maxlength="6" name="operant1" />
                <select name="operator">
                    <option>+</option>
                    <option>-</option>
                    <option>*</option>
                    <option>/</option>                                                            
                </select>
                <input type="text" size="8" maxlength="6" name="operant2" />
                <p>&nbsp;</p>
                <input type="submit" value="Calculate" />
            </form>
        </div>
    </div>
</div>

The function detail page and its configuration

To create a function detail page, first create a normal dynamic function and its function JSP. Preferably, place them in a module.

Below, you see the function for displaying the calculations result and its JSP. Note that neither parameters nor element settings are configured.

<%@page buffer="none" session="false" trimDirectiveWhitespaces="true" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="margin-bottom-30">
    <c:set var="operant1" value="${param.operant1}" />
    <c:set var="operant2" value="${param.operant2}" />
    <c:if test="${(!empty operant1)&&(!empty operant2)}">
        <c:catch var="error">
            <c:choose>
                <c:when test="${param.operator == '+'}">
                    <c:set var="result" value="${operant1+ operant2}" />
                </c:when>
                <c:when test="${param.operator == '-'}">
                    <c:set var="result" value="${operant1 - operant2}" />
                </c:when>
                <c:when test="${param.operator == '*'}">
                    <c:set var="result" value="${operant1 * operant2}" />
                </c:when>
                <c:when test="${param.operator == '/'}">
                    <c:set var="result" value="${operant1 / operant2}" />
                </c:when>
            </c:choose>
        </c:catch>
        <c:if test="${error == null}">
            <div class="view-article">
                <%-- Title of the article --%>
                <div class="headline">
                    <h3>Calculation result:&nbsp;<c:out value="${operant1}" escapeXml="true"/>&nbsp;<c:out value="${param.operator}" escapeXml="true"/>&nbsp;<c:out value="${operant2}" escapeXml="true"/>&nbsp;=&nbsp;<c:out escapeXml="true" value="${result}"/></h3>
                </div>
            </div>
        </c:if>
        <c:if test="${error != null}">
            <div class="view-article">
                <%-- Title of the article --%>
                <h2>Error</h2>
                <%-- The text field of the article with image --%>
                <div class="paragraph">
                    <p>Error occurs during the calculation. Please check the input fields.</p>
                </div>
            </div>
        </c:if>
    </c:if>
</div>

What makes the function available as detail function page are several configurations.

First, your template has to be prepared to handle function detail pages. Therefore, set the property container.info on your template to functionDetail={containername}, where {containername} has to be replaced with the name attribute of the template's <cms:container> tag from the container the function should be displayed in. In the above example, the property is set as follows:

Second, the function is exported as a named function by a module. Here, it is configured in the module com.alkacon.opencms.documentation as shown below. The configuration is done in the .config file of the module in the tab "Function". Offline, you can follow the link to see the configuration file.

Third, a detail page for the function is placed in the sitemap. Here we placed the page "Calculation result" as a subpage of the current page.

The page is added via the "Add wizard" using the tab "Detail pages". There you'll find the dynamic function with its name as title.

Have a look in the sitemap editor to see the function detail page. It is marked with a star, indicating that it is used as a detail page and behind its title it is indicated for which function it is used.

After all three steps, your function detail page is configured and links to the named function should point to the detail page.

You can improve this page

Please contribute your suggestions or comments regarding this topic on our wiki. For support questions, please use the OpenCms mailing list or go for professional support.