Issue with Template Integration

[Silambarasan Akash]

I hope this message finds you well. I am writing to seek urgent assistance regarding an issue I am experiencing with a purchased template and its integration into my source code.

Firstly, I would like to express my appreciation for the high-quality templates offered by PrimeFaces. I recently purchased one of your templates, specifically Verona Primefaces, with the intention of integrating it into my project. However, I have encountered a problem with the menu functionality.

Upon integrating the template with my source code, I noticed that the menu is not functioning as expected. Despite following the provided documentation and carefully reviewing the code, I have been unable to identify the root cause of this issue. I have made sure that all necessary dependencies and resources are properly linked, but the menu remains unresponsive.

To provide further context, I am using the following environment and versions:

- Development Framework: Spring Boot Framework,Gradle
- Server: Apache Tomcat
- PrimeFaces Version: 11.0.0

In an attempt to resolve this problem, I have already tried the following steps:

1. Verified that all required CSS and JavaScript files are correctly included in my project.
2. Ensured that the menu-related components are properly configured according to the provided documentation.
3. Checked for any JavaScript errors in the browser console, but none were found.

Despite my efforts, the issue persists. This problem is impeding the progress of my project, and I kindly request your immediate assistance in resolving it.

To assist you in investigating the issue, Additionally, I can provide any further information or resources you may require.

I would greatly appreciate any guidance, suggestions, or steps I can take to rectify this problem. Your prompt attention to this matter would be highly valuable, as it directly impacts my project's timeline.

Thank you for your understanding and cooperation. I look forward to your swift response.

[olgubasak]

Hi,
Thank you very much for your message, I would be glad to assist you. Firstly, could you try updating your Primefaces and template versions and try again? Let's solve your problem by proceeding step by step. If you encounter a problem again after the update, please do not hesitate to write back.

Best Regards,

[Silambarasan Akash]

Hello,

Thank you for your prompt response and suggestion. I appreciate your willingness to assist me. I have already performed the recommended update of both the PrimeFaces library and the Verona template to their latest versions. However, I regret to inform you that the issue still persists, and the menu functionality is not working as expected.

To provide you with further details, here are the steps I have taken:

1. Updated the PrimeFaces library: I checked for the latest version available and updated the PrimeFaces library in my project accordingly.

2. Updated the Verona template: I followed the instructions provided by PrimeFaces to update the template files in my project, ensuring that I replaced the existing template files with the updated ones.

3. Cleared browser cache: I cleared the cache of my browser to ensure that the latest CSS and JavaScript files were being used.

Despite these efforts, the menu remains unresponsive. I have thoroughly reviewed my configuration files, checked for any conflicts or errors, and tested in different browsers, but the issue persists across all scenarios.

Considering the urgency of my project, I kindly request your further guidance and assistance in resolving this matter. Any additional suggestions or steps that I can take to troubleshoot and rectify the menu functionality issue would be greatly appreciated.

Thank you once again for your support.

Best Regards,

[olgubasak]

Hi again,

Can you please write the code snippet that you received an error for into the file I provided below and send it back? By trying your code, I can assist you more easily.

https://github.com/primefaces/primefaces-test

Best Regards,

[Silambarasan Akash]

Hello,

This is my Menu.xhtml file.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pv="http://primefaces.org/verona">

<div class="layout-menu-wrapper">
<div class="layout-menu-container">
<h:form id="menuform">
<pv:menu widgetVar="VeronaMenuWidget">
<p:menuitem id="om_dashboard" value="Dashboard"
icon="pi pi-fw pi-home" outcome="/dashboard" />
<p:submenu id="om_components" label="UI Kit"
icon="pi pi-fw pi-star" badge="7" badgeStyleClass="amber-badge">
<p:menuitem id="om_formlayout" value="Form Layout"
icon="pi pi-fw pi-id-card" />
<p:menuitem id="om_input" value="Input"
icon="pi pi-fw pi-check-square" />

</p:submenu>
<p:submenu id="om_utils" label="Utilities"
icon="pi pi-fw pi-compass" badge="4" badgeStyleClass="green-badge">
<p:menuitem id="om_widgets" value="Widgets"
icon="pi pi-fw pi-star" />
<p:menuitem id="om_grid" value="Grid System"
icon="pi pi-fw pi-th-large" />
<p:menuitem id="om_spacing" value="Spacing"
icon="pi pi-fw pi-arrow-right" />
<p:menuitem id="om_typography" value="Typography"
icon="pi pi-fw pi-align-center" />
</p:submenu>
<p:submenu id="om_default" label="Pages"
icon="pi pi-fw pi-briefcase">
<p:menuitem id="om_crud" value="Crud" icon="pi pi-fw pi-pencil" />
<p:menuitem id="om_calendar" value="Calendar"
icon="pi pi-fw pi-calendar-plus" />
<p:menuitem id="om_chronoline" value="Chronoline"
icon="pi pi-fw pi-calendar" />
<p:menuitem id="om_landing" value="Landing"
icon="pi pi-fw pi-user-plus" />
<p:menuitem id="om_login" value="Login" icon="pi pi-fw pi-sign-in" />
<p:menuitem id="om_invoice" value="Invoice"
icon="pi pi-fw pi-dollar" />
<p:menuitem id="om_help" value="Help"
icon="pi pi-fw pi-question-circle" />
<p:menuitem id="om_error" value="Error"
icon="pi pi-fw pi-times-circle" />
<p:menuitem id="om_notfound" value="Not Found"
icon="pi pi-fw pi-exclamation-circle" />
<p:menuitem id="om_access" value="Access Denied"
icon="pi pi-fw pi-lock" />
<p:menuitem id="om_empty" value="Empty"
icon="pi pi-fw pi-circle-off" />
</p:submenu>

<p:submenu id="om_hierarchy" label="Hierarchy"
icon="pi pi-fw pi-align-left">
<p:submenu id="om_sm1" label="Submenu 1"
icon="pi pi-fw pi-align-left">
<p:submenu id="om_sm11" label="Submenu 1.1"
icon="pi pi-fw pi-align-left">
<p:menuitem id="om_lnk111" value="Link 1.1.1"
icon="pi pi-fw pi-align-left" url="#" />
<p:menuitem id="om_lnk112" value="Link 1.1.2"
icon="pi pi-fw pi-align-left" url="#" />
<p:menuitem id="om_lnk113" value="Link 1.1.3"
icon="pi pi-fw pi-align-left" url="#" />
</p:submenu>
<p:submenu id="om_sm12" label="Submenu 1.2"
icon="pi pi-fw pi-align-left">
<p:menuitem id="om_lnk121" value="Link 1.2.1"
icon="pi pi-fw pi-align-left" url="#" />
</p:submenu>
</p:submenu>
<p:submenu id="om_sm2" label="Submenu 2"
icon="pi pi-fw pi-align-left">
<p:submenu id="om_sm21" label="Submenu 2.1"
icon="pi pi-fw pi-align-left">
<p:menuitem id="om_lnk211" value="Link 2.1.1"
icon="pi pi-fw pi-align-left" url="#" />
<p:menuitem id="om_lnk212" value="Link 2.1.2"
icon="pi pi-fw pi-align-left" url="#" />
</p:submenu>
<p:submenu id="om_sm22" label="Submenu 2.2"
icon="pi pi-fw pi-align-left">
<p:menuitem id="om_lnk221" value="Link 2.2.1"
icon="pi pi-fw pi-align-left" url="#" />
</p:submenu>
</p:submenu>
</p:submenu>
<p:menuitem id="om_buy" value="Buy Now"
icon="pi pi-fw pi-shopping-cart"
url="https://www.primefaces.org/store" />
<p:menuitem id="om_doc" value="Documentation"
icon="pi pi-fw pi-info-circle" />
</pv:menu>
</h:form>
</div>
</div>

</ui:composition>

here is my template and top bar file.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pa="http://primefaces.org/verona">

<div class="topbar" style="height: 70px;">
<!-- style="height: 70px;" -->
<div class="topbar-main">
<div class="p-grid dashboard">
<div class="p-col-4">
<div class="p-grid dashboard">
<div class="p-col-4" style="background-color: white;">
<a href="#" id="menu-button"> <span class="pi pi-bars"></span>
</a>
<h:link>
<p:graphicImage name="images/SodexoLogoNew.png"
library="verona-layout" styleClass="logo" />
</h:link>
</div>
</div>
<div class="p-col-4"></div>
<div class="p-col-4"></div>
</div>

<div class="p-col-4"
style="font-size: 34px; text-shadow: 0px 3px 2px #fff; font-weight: bold; padding: 12px 150px;">EI - RMS</div>

<div class="p-col-4">
<a href="#" id="user-display"> <span class="username">#{loginBean.userInfoDTO.userName}</span>
<span class="userrole" onclick="PF('logout').show()"><i
class="pi pi-sign-out" style="color: white; padding: 11px 7px;">LOGOUT</i></span>
<p:graphicImage name="images/UserIcon.png" library="verona-layout"
onclick="PF('logout').show()" />
</a>
</div>
</div>
</div>


<ui:include src="./menu.xhtml" />
</div>
<p:dialog header="#{msg['confirm_logout']}" draggable="true"
closable="true" widgetVar="logout" showEffect="fade" hideEffect="fade"
closeOnEscape="true" resizable="false" position="center">
<div class="ui-g ui-fluid">
<p:panelGrid columns="2" layout="grid"
styleClass="ui-panelgrid-blank ui-fluid">
<p:commandButton ajax="false" icon="fa fa-fw fa-check"
class="btn float-right login_btn" title="#{msg['yes']}" value="Yes"
action="#{loginBean.logout}" oncomplete="PF('logout').hide()">
</p:commandButton>

<p:commandButton class="btn float-left login_btn" value="No"
title="#{msg['no']}" icon="fa fa-fw fa-times"
oncomplete="PF('logout').hide()" />
</p:panelGrid>
</div>
</p:dialog>
</ui:composition>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" lang="en">

<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<title><ui:insert name="title">LMS Watch</ui:insert></title>

<h:outputScript name="js/layout.js" library="verona-layout" />
<h:outputScript name="js/prism.js" library="verona-layout" />


<ui:insert name="head" />
</h:head>

<h:body styleClass="ui-input-filled">
<h:form id="form_Id1">
<div class="layout-wrapper layout-menu-horizontal">
<ui:include src="./topbar.xhtml" />

<div class="layout-main">
<div class="layout-content" style="background-color: white;">
<ui:insert name="content" />
</div>

<ui:include src="./footer.xhtml" />
</div>
</div>

<p:ajaxStatus
style="width:32px;height:32px;position:fixed;right:7px;bottom:7px">
<f:facet name="start">
<i class="pi pi-spin pi-spinner layout-ajax-loader-icon"
aria-hidden="true" />
</f:facet>

<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>

<h:outputStylesheet name="css/primeicons.css" library="verona-layout" />
<h:outputStylesheet name="css/primeflex.min.css"
library="verona-layout" />
<h:outputStylesheet name="css/demo.css" library="demo" />
<h:outputStylesheet name="css/layout-flow.css" library="verona-layout" />
</h:form>
<p:dialog header="Attention" closable="false" modal="true"
draggable="false" resizable="false" id="processId"
widgetVar="processVar">
<button class="" style="border-radius: none;">
<i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>
</button>
</p:dialog>

<p:dialog header="Attention!!!" closable="false" modal="true"
draggable="false" resizable="false" id="loadingId"
widgetVar="loadingVar">
Please wait for a while...
</p:dialog>
</h:body>
<SCRIPT type="text/javascript">

</SCRIPT>
</html>

[olgubasak]

Hi,

Thank you for sharing your code.
When I ran the code in my own environment, I didn't encounter any issues with menu.xhtml and template.xhtml. However, I would kindly request you to provide further details regarding the content of topbar.xhtml. I believe the problem might be originating from there. Also, I am using PrimeFaces version 12.0.0.

Best Regards,