Wizard’s Toolkit Documentation

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.

Search results