...
V5 Predefined Theme Template
...
Predefined Variables
- Predefined variable with value for template usage template.
| Name | Template | Default Value | Data Type | Description |
|---|---|---|---|---|
| base_link | ||||
| body_classes | ||||
| body_id | ||||
| build_number | ||||
| categories_container_id | ||||
| categories_container_classes | ||||
| category_classes | ||||
| combine_single_menu_category | ||||
| content | ||||
| content_container | ||||
| content_id | ||||
| context_path | ||||
| css | ||||
| current_category_classes | ||||
| current_menu_classes | ||||
| embed | ||||
| fav_icon_link | ||||
| first_category_classes | ||||
| first_menu_classes | ||||
| footer | ||||
| head | ||||
| header | ||||
| hide_nav | ||||
| home_page_link | ||||
| is_logged_in | ||||
| is_login_page | ||||
| joget_header | ||||
| joget_footer | ||||
| js | ||||
| js_css_lib | ||||
| last_category_classes | ||||
| last_menu_classes | ||||
| locale | ||||
| login_error_classes | ||||
| login_exception | ||||
| login_form_after | ||||
| login_form_before | ||||
| login_form_footer | ||||
| login_link | ||||
| 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
...
- 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.
/templates/userview/
...
pageNotFound.ftl
...
| Code Block | ||
|---|---|---|
| ||
<h3>@@ubuilder.pageNotFound@@</h3>
@@ubuilder.pageNotFound.message@@
<br><br>
@@ubuilder.pageNotFound.explanation@@
<p> </p>
<p> </p>
<p>
<a href="${home_page_link!}">@@ubuilder.pageNotFound.backToMain@@</a>
</p> |
/templates/userview/layout.ftl
| Code Block | ||
|---|---|---|
| ||
<!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 | ||
|---|---|---|
| ||
${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 | ||
|---|---|---|
| ||
<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 | ||
|---|---|---|
| ||
${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 | ||
|---|---|---|
| ||
${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
| 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> </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!} |
/templates/userview/contentContainer.ftl
/templates/userview/menus.ftl
/templates/userview/head.ftl
...
How to use and override V5 template
...