Page History

...

V5 Predefined Theme Template

...

Predefined Variables

Predefined variable with value for template usage template.

Name	Template	Data Type	Default Value	Data Type	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					body_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			content				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	embed
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
footer
head
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	header
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	locale
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_footerafter		login.ftl	java.lang.String		Value from "Custom HTML (After Login Form)" under Userview Builder - Settings
login_linkform_before	login.ftl	java.lang.String
logout_link
main_container_id
menus
menu_classes
menus_container_classes
metas
nav_id
nav_classes
params
title
right_to_left
sidebar_id
user
username
userview

Templates

/templates/userview/pageNotFound.ftl

/templates/userview/layout.ftl

/templates/userview/header.ftl

/templates/userview/footer.ftl

/templates/userview/contentContainer.ftl

/templates/userview/menus.ftl

/templates/userview/head.ftl

How to use and override V5 template

...

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

All these template are used by org.joget.apps.userview.model.UserviewV5Theme abstract class.
Override the abstract class method to set different value for the variables used in template.
All templates are constructed using FreeMaker syntax.

/templates/userview/pageNotFound.ftl

Code Block

language	xml

<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

Code Block

language	xml

<!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

Code Block

language	xml

${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

Code Block

language	xml

<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

Code Block

language	xml

${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

Code Block

${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

Code Block

language	xml

${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!}"/>

Code Block

<#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.

Code Block

language	java

    @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.

Code Block

language	java

    @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.

Tutorials

Not available right nowGuideline for developing a plugin

Related Community Plugins

Corporati Theme
org.joget.plugin.enterprise.CorporatiTheme (wflow-core)
V3 Default Theme
org.joget.apps.userview.lib.DefaultTheme (wflow-core)Not available right now

Space shortcuts

Page tree

Versions Compared

Old Version 5

New Version Current

Key

V5 Predefined Theme Template

Predefined Variables

Templates

/templates/userview/pageNotFound.ftl

/templates/userview/layout.ftl

/templates/userview/header.ftl

/templates/userview/footer.ftl

/templates/userview/contentContainer.ftl

/templates/userview/menus.ftl

/templates/userview/head.ftl

How to use and override V5 template

Templates

/templates/userview/pageNotFound.ftl

/templates/userview/layout.ftl

/templates/userview/header.ftl

/templates/userview/footer.ftl

/templates/userview/contentContainer.ftl

/templates/userview/menus.ftl

/templates/userview/head.ftl

How to use and override V5 template

Reuse the predefined template

Override or replace the predefined template

Plugin Properties Options

Tutorials

Related Community Plugins

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 5

New Version Current

Key

V5 Predefined Theme Template

Predefined Variables

Templates

/templates/userview/pageNotFound.ftl

/templates/userview/layout.ftl

/templates/userview/header.ftl

/templates/userview/footer.ftl

/templates/userview/contentContainer.ftl

/templates/userview/menus.ftl

/templates/userview/head.ftl

/templates/userview/login.ftl

How to use and override V5 template

Templates

/templates/userview/pageNotFound.ftl

/templates/userview/layout.ftl

/templates/userview/header.ftl

/templates/userview/footer.ftl

/templates/userview/contentContainer.ftl

/templates/userview/menus.ftl

/templates/userview/head.ftl

/templates/userview/login.ftl

How to use and override V5 template

Reuse the predefined template

Override or replace the predefined template

Plugin Properties Options

Tutorials

Related Community Plugins