Serenity Theme without Sidebar - Profile Dropdown not initialized

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
sebastian.schamschat
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

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

    <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['application.name']}</span>
            </h:link>
            <a href="#" class="sidebar-anchor" title="Toggle Menu"></a>
        </div>

        <ui:insert name="sidebar" />
    </div>

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

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

Code: Select all

<ui:define name="sidebar">
       my little sidebar ...
</ui:define>
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: https://ibb.co/c1fv9Gv

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

28 Feb 2020, 12:05

Hi,

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() {
	Serenity.init();
});

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