Serenity Theme without Sidebar - Profile Dropdown not initialized

Post Reply
Posts: 2
Joined: 26 Sep 2018, 13:05

12 Feb 2020, 14:23

Hi *,

for some pages of our application we try to use the serenity-theme without the sidebar. Therefor I changes the sidebar.xhtml to this

Code: Select all


    <f:event type="preRenderView" listener="#{....}"/>

    <!-- TODO Primefaces Serenity Theme richtig verdraten -->
    <div class="layout-sidebar #{....'}">

        <!-- LOGO: VERTICAL MENU -->
        <div class="sidebar-logo">
            <h:link outcome="/index">
                <h:graphicImage name="images/logo.svg" height="24" width="24" style="opacity: 0"/>
                <span class="app-name" style="margin-left: -28px">#{msgs['']}</span>
            <a href="#" class="sidebar-anchor" title="Toggle Menu"></a>

        <ui:insert name="sidebar" />

    <ui:insert name="sidebar-footer" />

    <h:outputScript library="scripts" name="sidebarTools.js"/>
Every page that whats to use the sidebar can no just do this

Code: Select all

<ui:define name="sidebar">
       my little sidebar ...
But when the sidebar does not include the following

Code: Select all

<pm:menu id="xxx" model="#{...}" binding="#{...}" />
the javascript in layout.js of the theme is not initialized and then I cant use the dropdown on the profile button, the event is not bound to this.
See the image:

Posts: 4121
Joined: 29 Jun 2013, 12:38

28 Feb 2020, 12:05


Yes, layout.js file is loaded by the menu component on our Premium Template. For your issue;
- Please add a script tag to template.xhtml to load layout.js
- Please use;

Code: Select all

var Serenity = {
    init: function() {
        this.wrapper = $(document.body).children('.layout-wrapper');
   // all codes

$(function() {

Code: Select all

PrimeFaces.widget.Serenity = PrimeFaces.widget.BaseWidget.extend({    
   // all codes
Best Regards,

Post Reply

Return to “Serenity - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests