Userview Theme Plugin

Usages

• License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• A useable Userview Theme plugin must extends org.joget.apps.userview.model.UserviewV5Theme or org.joget.apps.userview.model.UserviewTheme abstract class.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• Since version 5.0, It is encourage to use org.joget.apps.userview.model.UserviewV5Theme instead of org.joget.apps.userview.model.UserviewTheme abstract class for Userview Theme plugin

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• development as the new theme provided more flexibility to control how you want your theme to display to user. 

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

Abstract Class

org.joget.apps.userview.model.UserviewV5Theme

• Under wflow-core module

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• Extended org.joget.plugin.base.ExtDefaultPlugin. Please refer to Plugin Base Abstract Class and Interface.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• Implemented org.joget.plugin.property.model.PropertyEditable. Please refer to Plugin Base Abstract Class and Interface.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• A base abstract class to develop a Userview Theme plugin for version v5.0 onward. 

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• Please refer to V5 Predefined Theme Template on template options.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• Only need to override the function accordingly to change part of the display.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

Method Detail

Overridable Methods

handleContentError

public java.lang.String handleContentError(java.lang.Exception e, java.util.Map<java.lang.String, java.lang.Object> data)

HTML template to handle error when retrieving userview content.

handlePageNotFound

public java.lang.String handlePageNotFound(java.util.Map<java.lang.String, java.lang.Object> data)

HTML template to handle page not found. Default using /templates/userview/pageNotFound.ftl as template.

getLayout

public java.lang.String getLayout(java.util.Map<java.lang.String, java.lang.Object> data)

HTML template to handle theme layout. Default using /templates/userview/layout.ftl as template.

getHeader

public java.lang.String getHeader(java.util.Map<java.lang.String, java.lang.Object> data)

HTML template to handle page header. Default using /templates/userview/header.ftl as template.

getFooter

public java.lang.String getFooter(java.util.Map<java.lang.String, java.lang.Object> data)

HTML template to handle page footer. Default using /templates/userview/footer.ftl as template.

getContentContainer

public java.lang.String getContentContainer(java.util.Map<java.lang.String, java.lang.Object> data)

HTML template to handle userview menu content. Default using /templates/userview/contentContainer.ftl as template.

getMenus

public java.lang.String getMenus(java.util.Map<java.lang.String, java.lang.Object> data)

HTML template to handle menus. Default using /templates/userview/menus.ftl as template.

getJsCssLib

public java.lang.String getJsCssLib(java.util.Map<java.lang.String, java.lang.Object> data)

HTML template for putting javascript and css link for getHead() template.

getCss

public java.lang.String getCss(java.util.Map<java.lang.String, java.lang.Object> data)

Gets dynamic generated CSS for getHead() template

getJs

public java.lang.String getJs(java.util.Map<java.lang.String, java.lang.Object> data)

Gets dynamic generated javascript for getHead() template 

getMetas

public java.lang.String getMetas(java.util.Map<java.lang.String, java.lang.Object> data)

Gets dynamic generated meta data for getHead() template 

getHead

public java.lang.String getHead(java.util.Map<java.lang.String, java.lang.Object> data)

HTML template to handle for <head> tag. Default using /templates/userview/head.ftl as template.

getFavIconLink

public java.lang.String getFavIconLink(java.util.Map<java.lang.String, java.lang.Object> data)

Gets the fav icon relative path for getHead() template.

getLoginForm

public java.lang.String getLoginForm(java.util.Map<java.lang.String, java.lang.Object> data)

HTML template for login form. Default using /templates/userview/login.ftl as template.

decorateCategoryLabel

public java.lang.String decorateCategoryLabel(org.joget.apps.userview.model.UserviewCategory category)

HTML template for menu category label.

Utility Methods

getUserview

public org.joget.apps.userview.model.Userview getUserview()

Gets userview which using this theme

setUserview

public void setUserview(org.joget.apps.userview.model.Userview userview)

Sets userview which using this theme

getRequestParameters

public java.util.Map getRequestParameters()

Gets request parameters

setRequestParameters

public void setRequestParameters(java.util.Map requestParameters)

Sets request parameters

getRequestParameter

public java.lang.Object getRequestParameter(java.lang.String requestParameter)

Convenience method to get a parameter value

getRequestParameterString

public java.lang.String getRequestParameterString(java.lang.String requestParameter)

Convenience method to get a parameter String value.

Return Empty string instead of NULL.

Deprecated Methods

getCss

public java.lang.String getCss()

Deprecated not use for UserviewV5Theme

getJavascript

public java.lang.String getJavascript()

Deprecated not use for UserviewV5Theme

public java.lang.String getHeader()getHeader

Deprecated not use for UserviewV5Theme

getFooter

public java.lang.String getFooter()

Deprecated not use for UserviewV5Theme

getPageTop

public java.lang.String getPageTop()

Deprecated not use for UserviewV5Theme

getPageBottom

public java.lang.String getPageBottom()

Deprecated not use for UserviewV5Theme

getBeforeContent

public java.lang.String getBeforeContent()

Deprecated not use for UserviewV5Theme

org.joget.apps.userview.model.UserviewTheme

• Under wflow-core module

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• Extended org.joget.plugin.base.ExtDefaultPlugin. Please refer to Plugin Base Abstract Class and Interface.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• Implemented org.joget.plugin.property.model.PropertyEditable. Please refer to Plugin Base Abstract Class and Interface.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• A base abstract class to develop a Userview Theme plugin. 

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

Method Detail

Abstract Methods

getCss

public abstract java.lang.String getCss()

Return css to inject in <head> tag

getJavascript

public abstract java.lang.String getJavascript()

Return javascript to inject in <head> tag

getHeader

public abstract java.lang.String getHeader()

Return HTML template to replace default header

getFooter

public abstract java.lang.String getFooter()

Return HTML template to replace default footer

getPageTop

public abstract java.lang.String getPageTop()

Return HTML template to inject before the page container

getPageBottom

public abstract java.lang.String getPageBottom()

Return HTML template to inject after the page container

getBeforeContent

public abstract java.lang.String getBeforeContent()

Return HTML template to inject before content

Utility Methods

getUserview

public org.joget.apps.userview.model.Userview getUserview()

Gets userview which using this theme

setUserview

public void setUserview(org.joget.apps.userview.model.Userview userview)

Sets userview which using this theme

getRequestParameters

public java.util.Map getRequestParameters()

Gets request parameters

setRequestParameters

public void setRequestParameters(java.util.Map requestParameters)

Sets request parameters

getRequestParameter

public java.lang.Object getRequestParameter(java.lang.String requestParameter)

Convenience method to get a parameter value

getRequestParameterString

public java.lang.String getRequestParameterString(java.lang.String requestParameter)

Convenience method to get a parameter String value.

Return Empty string instead of NULL.

V5 Predefined Theme Template

Predefined Variables 

• Predefined variable with value for template usage template.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

Templates

• All these template are used by org.joget.apps.userview.model.UserviewV5Theme abstract class.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• Override the abstract class method to set different value for the variables used in template.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• All templates are constructed using FreeMaker syntax.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

/templates/userview/pageNotFound.ftl

<h3>@@ubuilder.pageNotFound@@</h3>
@@ubuilder.pageNotFound.message@@
<br><br>
@@ubuilder.pageNotFound.explanation@@
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
    <a href="${home_page_link!}">@@ubuilder.pageNotFound.backToMain@@</a>
</p>

/templates/userview/layout.ftl

<!DOCTYPE html>
<html lang="${locale!}">
    ${html_inner_before!}
    <head>
        ${head_inner_before!}
        ${head!}
        ${head_inner_after!}
    </head>
    <body id="${body_id!}" class="${body_classes!}">
        ${body_inner_before!}
        ${page_before!}
        <div id="page">
            ${page_inner_before!}
            ${header!}
            ${content_container!}
            ${footer!}
            ${page_inner_after!}
        </div>
        ${page_after!}
        ${joget_footer!}
        ${body_inner_after!}
    </body>
    ${html_inner_after!}
</html>

/templates/userview/header.ftl

${header_before!}
<header class="${header_classes!}">
    ${header_inner_before!}
    ${header_info_before!}
    <div id="header-info" class="${header_info_classes!}">
        ${header_info_inner_before!}
        ${header_name_before!}
        <div id="header-name" class="${header_name_classes!}">
            ${header_name_inner_before!}
            <a href="${home_page_link!}" id="header-link" class="${header_link_classes!}">
                <span>${userview.properties.name!}</span>
            </a>
            ${header_name_inner_after!}
        </div>
        ${header_name_after!}
        ${header_description_before!}
        <div id="header-description" class="${header_description_classes!}">
            ${header_description_inner_before!}
            <span id="description" class="${header_description_span_classes!}">${userview.properties.description!}</span>
            ${header_description_inner_after!}
        </div>
        ${header_description_after!}
        <div class="clearfix"></div>
        ${header_info_inner_after!}
    </div>
    ${header_info_after!}
    ${header_message_before!}
    <div id="header-message" class="${header_message_classes!}">
        ${header_message_inner_before!}
        <div id="header-welcome-message" class="${header_welcome_classes!}">
            <span id="welcomeMessage">${userview.properties.welcomeMessage!}</span>
        </div>
        <div id="header-logout-text" class="${header_logout_classes!}">
            <#if is_logged_in>
                <a href="${logout_link!}">
                    <span id="logoutText">${userview.properties.logoutText!}</span>
                </a>
            <#else>
                <a href="${login_link!}">
                    <span id="loginText">@@ubuilder.login@@</span>
                </a>
            </#if>
        </div>
        <div class="clearfix"></div>
        ${header_message_inner_after!}
    </div>
    ${header_message_after!}
    ${header_inner_after!}
</header>
${header_after!}

/templates/userview/footer.ftl

<div class="clearfix"></div>
${footer_before!}
<footer class="${footer_classes!}">
    ${footer_inner_before!}
    <div id="footer-message">
        <p><span id="footerMessage">${userview.properties.footerMessage!}</span></p>
    </div>
    ${footer_inner_after!}
</footer>
${footer_after!}

/templates/userview/contentContainer.ftl

${main_container_before!}
<div id="${main_container_id!}" class="${main_container_classes!}">
    <div class="${main_container_inner_classes!}">
        ${main_container_inner_before!}
        <#if !embed && !hide_nav>
            ${sidebar_before!}
            <div id="${sidebar_id!}" class="${sidebar_classes!}">
                ${sidebar_inner_before!}
                ${menus!}
                ${sidebar_inner_after!}
            </div>
            ${sidebar_after!}
        </#if>
        ${content_before!}
        <div id="${content_id!}" class="${content_classes!}">
            <main>
                ${content_inner_before!}
                ${content!}
                ${content_inner_after!}
            </main>
        </div>
        ${content_after!}
        ${main_container_inner_before!}
    </div>
</div>
${main_container_before!}

/templates/userview/menus.ftl

${nav_before!}
<nav id="${nav_id!}" class="${nav_classes!}">
    ${nav_inner_before!}
    ${categories_container_before!}
    <ul id="${categories_container_id!}" class="${categories_container_classes!}">
        ${categories_container_inner_before!}
        <#list userview.categories as category>
            <#if category.properties.hide! != 'yes' && category.menus?size gt 0>
                ${category_before!}
                <#assign cClass = category_classes!>
                <#if category_index == 0>
                    <#assign cClass = cClass + " " + first_category_classes!>
                </#if>
                <#if (category_index + 1) == userview.categories?size>
                    <#assign cClass = cClass + " " + last_category_classes!>
                </#if>
                <#if userview.currentCategory?? && category.properties.id == userview.currentCategory.properties.id>
                    <#assign cClass = cClass + " " + current_category_classes!>
                </#if>
                <#assign firstMenu = category.menus[0]>
                <#if combine_single_menu_category! && category.menus?size == 1>
                    <li id="${firstMenu.properties.id}" class="${cClass}">
                        ${category_inner_before!}
                        ${firstMenu.menu}
                        ${category_inner_after!}
                    </li>
                <#else>
                    <li class="${cClass}">
                        ${category_inner_before!}
                        <a class="${category_label_classes!} dropdown" href="#"><span>${theme.decorateCategoryLabel(category)}</span></a>
                        ${menu_container_before!}
                        <ul class="${menus_container_classes!}" >
                            ${menu_container_inner_before!}
                            <#list category.menus as menu>
                                <#assign mClass = menu_classes!>
                                <#if menu_index == 0>
                                    <#assign mClass = mClass + " " + first_menu_classes!>
                                </#if>
                                <#if (menu_index + 1) == category.menus?size>
                                    <#assign mClass = mClass + " " + last_menu_classes!>
                                </#if>
                                <#if userview.current?? && menu.properties.id == userview.current.properties.id>
                                    <#assign mClass = mClass + " " + current_menu_classes!>
                                </#if>
                                ${menu_before!}
                                <li id="${menu.properties.id!}" class="${mClass}">
                                    ${menu_inner_before!}
                                    ${menu.menu}
                                    ${menu_inner_after!}
                                </li>
                                ${menu_after!}
                            </#list>
                            ${menu_container_inner_after!}
                        </ul>
                        ${menu_container_after!}
                        ${category_inner_after!}
                    </li>
                </#if>
                ${category_after!}
            </#if>
        </#list>
        ${categories_container_inner_after!}
    </ul>
    ${categories_container_after!}
    ${nav_inner_after!}
</nav>
${nav_after!}

/templates/userview/head.ftl

${metas!} 
<title>${title!}</title>
${joget_header!}
${js_css_lib!}
<script type="text/javascript">
    ${js!}
</script>
<style type="text/css">
    ${css!}
</style>
<link rel="shortcut icon" href="${fav_icon_link!}"/>

/templates/userview/login.ftl

<#if userview.params.login_error?? >
    ${login_error_before!}
    <div id="main-body-message" class="${login_error_classes!}">
        ${login_error_inner_before!}
        ${login_exception!}
        ${login_error_inner_after!}
    </div>
    ${login_error_after!}
</#if>
${login_form_before!}
<form id="loginForm" name="loginForm" action="${context_path!}/j_spring_security_check" method="POST">
    ${login_form_inner_before!}
    <table align="center">
        <tr><td><label>@@ubuilder.login.username@@: </label></td><td><input type='text' id='j_username' name='j_username'/></td></tr>
        <tr><td><label>@@ubuilder.login.password@@: </label></td><td><input type='password' id='j_password' name='j_password'/></td></tr>
        <tr><td>&nbsp;</td><td><input name="submit" class="form-button" type="submit" value="@@ubuilder.login@@" /></td></tr>
        <tr><td colspan="2">
            ${login_form_footer!}
        </td></tr>
    </table>
    ${login_form_inner_after!}
</form>
${login_form_after!}

How to use and override V5 template

Reuse the predefined template

• To reuse the predefined template, just override the theme method and set your custom HTML to the available variable of the template.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• Example: To reuse the header.ftl template in getHeader method.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

    @Override
    public String getHeader(Map<String, Object> data) {
        data.put("header_classes", "navbar");
        data.put("header_inner_before", "<div class=\"navbar-inner\"><div class=\"container-fluid\">");
        data.put("header_inner_after", "</div></div>");
        data.put("header_info_after", "<a id=\"mobile_menu\" class=\"btn btn-navbar\"><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span></a>");
        data.put("header_link_classes", "brand");
        data.put("header_info_classes", "inline-block");
        data.put("header_name_classes", "inline-block");
        data.put("header_description_classes", "inline-block visible-desktop");
        data.put("header_description_span_classes", "brand");
        return super.getHeader(data);
    }

Override or replace the predefined template

• To override or replace the predefined template, you just need to create your own template using FreeMaker syntax.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

• Example: Using a custom template file in getHeader method.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

    @Override
    public String getHeader(Map<String, Object> data) {
        return UserviewUtil.getTemplate(this, data, "/templates/userview/customHeader.ftl");
    }

Plugin Properties Options

• Please refer to Plugin Properties Options for more information.

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details

Tutorials

• Guideline for Developing a Plugin
• How to develop a Userview Theme Plugin

Related Community Plugins

• Corporati Theme

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details
  
  org.joget.plugin.enterprise.CorporatiTheme (wflow-core)

• V3 Default Theme

  License Error

  The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

  • License Details
  
  org.joget.apps.userview.lib.DefaultTheme (wflow-core)

• V6 Universal Theme
  org.joget.plugin.enterprise.UniversalTheme (wflow-core)
• DX Progressive Theme
  org.joget.plugin.enterprise.ProgressiveTheme (wflow-core)