Wizard’s Toolkit Data-Driven Menus
Drop menus can be managed using the Back Office. These are completely data-driven and work for drop-down menus plus
when the viewport is narrow it automatically changes to show as a hamburger-styled side-bar menu.
In the WTK Back Office you can create as many “Menu Sets” as you like.
Table of Contents
-
MaterializeCSS HTML Syntax
-
Hard-Coded in PHP
-
Menu Loaded After Login
-
Menu Based on User Login
-
JavaScript Functions
MaterializeCSS HTML Syntax
The HTML generated by WTK is built for MaterializeCSS menus. A single call to wtkMenu builds
the HTML for both MaterializeCSS
Dropdown Menus and
Mobile Collapsed menus.
The Menu Set can be hard-coded in PHP, based on a user’s login or based on their staff role.
Hard-Coded in PHP
If you want to have a menu shown without requiring logging in,
then pass into the wtkMenu() function the name of the menu set to display. For example:
<?php
// normal WTK php code...
wtkSearchReplace('<!-- @wtkMenu@ -->', wtkMenu('YourMenuSetName'));
wtkMergePage($pgHtm, $gloCoName, 'wtk/htm/spa.htm');
?>
This is assuming you are using the standard HTML template provided by Wizard’s Toolkit
which contains.
<div id="myNavbar" class="hide">
<!-- @wtkMenu@ -->
</div>
Full specifications on wtkMenu function at:
wtkMenu()
Menu Loaded after Login
If you want to have a menu loaded only after logging in (which is
more secure), then pass into the wtkLoginForm JavaScript function the name of the menu set
to load and display upon a successful login. For example:
<?php
// normal WTK php code...
wtkSearchReplace("wtkLoginForm('')", "wtkLoginForm('YourAdminMenu')");
wtkMergePage($pgHtm, $gloCoName, 'wtk/htm/spa.htm');
?>
Page-Driven Menus
In the Back Office under "Site Management" choose "Page List"
to add pages for your menu to access. You will see there are already several that are built-in
which come with the Wizard’s Toolkit.
Under "Site Management" you can then choose "Menu Sets".
From here you create new Menu Sets or edit the current Menu Set. Within each Menu Set
you define Menu Groups which are the titles of the Drop Lists. Within those you define
Menu Items which are the Pages in the "Page List".
Note that in the Menu Groups you can also set the "Group URL".
This is usually only done when you want the Menu Group to go directly to a page instead of having
a drop list of Menu Items. There are two special items you can put in here in addition to URLs.
If you put 'dashboard' then the WTK function will replace it with the JavaScript function to call the Dashboard.
If you put 'logout' then the WTK function will replace it with the JavaScript function to logout.
Menu Based on User Login
Sometimes you will want to show a different menu set depending
on a user’s Staff Role or their menu choice. This is easily possible also. In
the WTK Back Office you can assign Staff Role to each user. If you make a
“Menu Set” with a name that matches the Staff Role value, that will be used
if you pass to the wtkLoginForm function 'byRole'.
For each user you can also override what their Menu Set should be. If this value is set
it will be used instead of the 'Staff Role' menu set. For example:
<?php
// normal WTK php code...
wtkSearchReplace("wtkLoginForm('')", "wtkLoginForm('byRole')");
wtkMergePage($pgHtm, $gloCoName, 'wtk/htm/spa.htm');
?>
By passing 'byRole' when ajxLogin.php is called it will retrieve the Menu Set using
SQL like this:
SELECT COALESCE(`MenuSet`, `StaffRole`) AS `MenuSet`
FROM `wtkUsers`
WHERE `UID` = :UID
JavaScript Functions
ajaxFillDiv()
Call PHP page and use results to fill a div.
ajaxFillDiv(fncPage, fncParam, fncDiv)
This fills a <div> with results from PHP page.
Parameters
-
fncPage
: string
- Name of PHP page to direct to. The '.php' is appended.
-
fncParam
: string
- This will be passed as p parameter to called page.
-
fncDiv
: string
- This is the id of the <div> that you want to replace the HTML of.
Action
Uses AJAX to retrieve HTML returned by call to fncPage and displays it in
fncDiv div.
Example call which will update the data-driven menu:
ajaxFillDiv('menuRefresh','YourMenuSetName','myNavbar');
The 'menuRefresh' first parameter also forces JS
for MaterializeCSS dropdown and collapsible triggering.