Modify menu and topbar with p:commandLink

Post Reply
tkernstock
Posts: 58
Joined: 29 Jun 2010, 14:39
Location: Vienna, Austria

31 Jul 2020, 00:54

Hi,

I would like to have some functions triggerd with the items in Menu and topbar. For example here:

Code: Select all

                  <a class="layout-profile-button" href="#">
                        <span class="profile-image-icons">
                            <p:graphicImage name="images/menu/avatar.png" library="pandora-layout" />
                            <span class="icons">
                                <i class="fa fa-fw fa-comment"><span></span></i>
                                <i class="fa fa-fw fa-bell-o"></i>
                                <i class="fa fa-fw fa-sign-out"></i>
                            </span>
                        </span>
                        <span class="profile-info-button">
                            <span class="layout-profile-userinfo">
                                <span class="layout-profile-name">Amelia Cabal</span>
                                <span class="layout-profile-role">Normal Employee</span>
                            </span>
                            <i class="layout-profile-icon fa fa-angle-down"></i>
                        </span>
                    </a>
                    <ul class="layout-profile-menu">
                        <li class="info">
                            <div class="profile-info">
                                <div class="layout-profile-userinfo">
                                    <span class="layout-profile-name">Amelia Cabal</span>
                                    <span class="layout-profile-role">Normal Employee</span>
                                </div>
                                <div class="icons">
                                    <i class="fa fa-fw fa-comment"></i>
                                    <i class="fa fa-fw fa-bell-o"></i>
                                    <i class="fa fa-fw fa-sign-out"></i>
                                </div>
                            </div>
                        </li>
                        .......
1) There is no way I can see how the dropdown works when I click on the Username because it not a JSF widget but some JavaScript code that is not mentioned in any documentation and triggered when I click on the line.
2) Let's assume I would like to really logout instead of just havin a nice icon and I change the code to something like that:

Code: Select all

<span class="icons">
                <i class="fa fa-fw fa-comment"><span></span></i>
                <i class="fa fa-fw fa-bell-o"></i>
                <p:commandLink action="somebean.logout()" ajax="false" ><i class="fa fa-fw fa-sign-out" /></p:commandLink>
</span>
a) the Layout gets destroyed so that the logout button is displayed in the same line like the user name and
b) the dropdown script for the user menu doesn't work anymore

Same goes for the topbar:
If I use any of the menu items for a p:commandLink which should be in a h:form (or if I just put the whole topbar in a form) everything breaks. This is between nothig gets displayed, if I put a form around everything, to an item that is not displayed anymore if I use it as commandLink with a form.

How can use Pandora to work with JSF widgets and not only JavaScript and <a href=".... ?

best
Thomas
Using: Eclipse 2020-06, Java 8, Primefaces 8, Omnifaces 3.6.1, Payara Server 5.201, Deltaspike 1.8.2

aragorn
Posts: 4075
Joined: 29 Jun 2013, 12:38

02 Aug 2020, 13:54

Interesting! I couldn't replicate these issues. When I change <a> tag with p:commandLink, everything works as expected (topbar menu, profile menu is opening) Could you please try them with our sample project? Also, could you please attach your changes and screenshots to replicate these issues?

Thanks a lot!
Best Regards,

Post Reply

Return to “Pandora - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest