Knowledge Base
  • Select Role
  • English
  • Login

Userview Theme Plugin

Introduction

Abstract Class

org.joget.apps.userview.model.UserviewV5Theme

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.

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

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.

Name
Template
Data Type
Default Value
Description
base_link - java.lang.String   Base URL of current Userview
body_classes layout.ftl java.lang.String  

Used by system to add the following CSS classes and current locale code as CSS class to <body> tag.

embeded - When userview is in embed mode.

rtl - When System setting set display from right to left or language set to Arabic.
body_id layout.ftl java.lang.String   Use current userview menu page Id or Custom Id as <body> tag id
build_number - java.lang.String   Joget build number
categories_container_id menus.ftl java.lang.String category-container Id of the container which contains all menu categories
categories_container_classes menus.ftl java.lang.String nav nav-tabs nav-stacked main-menu CSS classes of the container which contains all menu categories
category_classes menus.ftl java.lang.String category CSS classes of menu category
combine_single_menu_category menus.ftl boolean false Flag to display the only menu in a category to replace the category as 1st level menu.
content contentContainer.ftl java.lang.String   Main content of the current page. Content from the Userview Menu or login form.
content_container layout.ftl java.lang.String   Value from theme getContentContainer method
content_id contentContainer.ftl java.lang.String content Id of content container
context_path login.ftl java.lang.String   Context Path of the Joget Server URL
css head.ftl java.lang.String   Value from theme getCss method
current_category_classes menus.ftl java.lang.String current-category active Extra CSS classes for current menu category
current_menu_classes menus.ftl java.lang.String current active Extra CSS classes for current menu
embed contentContainer.ftl boolean   Flag to decide whether userview is needed to display in embed mode
fav_icon_link head.ftl java.lang.String   Value from theme getFavIconLink  method
first_category_classes menus.ftl java.lang.String first Extra CSS classes for first menu category
first_menu_classes menus.ftl java.lang.String first Extra CSS classes for first menu in the menu category
footer layout.ftl java.lang.String   Value from theme getFooter method
head layout.ftl java.lang.String   Value from theme getHead method
header layout.ftl java.lang.String   Value from theme getHeader method
hide_nav contentContainer.ftl boolean false Flag to hide navigator
home_page_link

pageNotFound.ftl,

header.ftl

 java.lang.String   URL to the userview home page menu
is_logged_in header.ftl boolean   Flag to decide whether there is a logged in user
is_login_page - boolean   Whether or not the current page is a login form page
joget_header head.ftl java.lang.String   Additional HTML template injected by system to the header
joget_footer layout.ftl java.lang.String   Additional HTML template injected by system to the footer
js head.ftl java.lang.String   Value from theme getJs method
js_css_lib head.ftl java.lang.String   Value from theme getJsCssLib method
last_category_classes menus.ftl java.lang.String last Extra CSS classes for last menu category
last_menu_classes menus.ftl java.lang.String last Extra CSS classes for last menu in the menu category
locale layout.ftl java.lang.String   Current language code of the system
login_error_classes login.ftl java.lang.String form-errors alert alert-warning CSS classes for login error message container
login_exception login.ftl java.lang.String   To keep exception message when a login attempt failure.
login_form_after login.ftl java.lang.String   Value from "Custom HTML (After Login Form)" under Userview Builder - Settings
login_form_before login.ftl java.lang.String   Value from "Custom HTML (Before Login Form)" under Userview Builder - Settings  
login_form_footer login.ftl java.lang.String   HTML template retrieved from DirectoryUtil.getLoginFormFooter(). Used by User Security Implementation.
login_link header.ftl java.lang.String   URL to the login form
logout_link header.ftl java.lang.String   URL to log out from userview
main_container_id contentContainer.ftl java.lang.String main CSS classes for the main container
menus contentContainer.ftl     Value from theme getMenus method
menu_classes menus.ftl java.lang.String menu CSS classes for the menu
menus_container_classes menus.ftl java.lang.String menu-container CSS classes for the container which contains menus
metas head.ftl java.lang.String   Value from theme getMetas method
nav_id menus.ftl java.lang.String navigation Id of the navigator container
nav_classes menus.ftl java.lang.String nav-collapse sidebar-nav CSS classes of the navigator container
params - java.util.Map<java.lang.String, java.lang.Object>   Received Request Parameters
title head.ftl java.lang.String   Userview name and the current menu label
right_to_left - boolean   Flag to decide whether or not userview need to display from right to left
sidebar_id contentContainer.ftl java.lang.String sidebar Id of the sidebar container
user - org.joget.directory.model.User   Current logged in User object
username - java.lang.String   Current logged in username
userview

header.ftl, footer.ftl,

menus.ftl, login.ftl

 org.joget.apps.userview.model.Userview   Userview object which using this theme

Templates

/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.
  • Example: To reuse the header.ftl template in getHeader method.
@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.
  • Example: Using a custom template file in getHeader method.
@Override
public String getHeader(Map<String, Object> data) {
    return UserviewUtil.getTemplate(this, data, "/templates/userview/customHeader.ftl");
}

Plugin Properties Options

Tutorials

Related Community Plugins

  • Corporati Theme
    org.joget.plugin.enterprise.CorporatiTheme (wflow-core)
  • V3 Default Theme
    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)
Created by Damian Last modified by Aadrian on Dec 13, 2024
Tags:
Previous Userview Permission/ Form Permission Plugin NextWeb Service Plugin