Module Menu
Menus in UNA can have very different representation, it can be regular site menus, action buttons, popups with some choice, it can be with icons or not, be vertical or horizontal. There are more than 10 different menu layouts available by default.
To create new menu we need to create new menu set first, then add menu items to it, then create new menu with just created menu set. Menu set is just a list of items, nothing else, while full menu is a combination of menu set (menu items), design, visibility settings and some other parameters.
We will add action like menu to the single page in our Test module.
Go to:
Studio > Navigation > Select Sets in the left vertical menu > click 'Add New Set' Button
Enter the following values in the popup:
Module: Test - our module name
Set: vnd_test_actions - internal menu set name
Title: _vnd_test_menu_set_actions - menu set title to show in Studio (translated as 'Test Actions')
Deletable: no
Then click "0 items" link for just added menu set. There are menu items for our set there, since we have just added new set, there is no any item, so let's add some. Click "Add New Item" button and enter the following in the popup:
Module: Test - our module name (should be set automatically)
Set: vnd_test_actions - menu set the item belongs to (should be set automatically)
Name: test-help - menu item name, menu item is selected automatically if page URI is the same as menu item name
System Title: _vnd_test_menu_sys_item_help - menu title to show in Studio (translated as 'Help')
Title: _vnd_test_menu_item_help - menu title to show for user (translated as 'Help')
Link: javascript:void(0); - 'href' of the link
OnClick: alert('This is very easy module, no help is needed!') - 'onlick' of the link
Target: [leave empty] - 'target' of the link
Icon: [leave empty] - menu item icon, font icon name should be specified there, different menu layouts may display icons or not
Submenu Object: [leave empty] - submenu name, menus support unlimited hierarchy
Copyable: yes - make item copyable to other menus
Then add one more menu item with link to your site and name it Support, for example.
After both (or more) items are added it should look like this:
Now we can create menu with this set of items. Go to:
Studio > Developer > Select menu builder in the left vertical menu > Menus > click 'Add New Menu' Button
Enter the following values:
Name: vnd_test_actions - internal menu name
Module: Test - our module name
Title: _vnd_test_menu_actions - menu title to show in Studio (translated as 'Test Actions')
Set: _vnd_test_menu_set_actions or Test Actions - if you reloaded language file already
Style: Horizontal Buttons - menu representation, some particular menu designs may only properly work in special places only
Deletable: no
Class Name: [leave empty] - class name for custom menu behaviour
Class File: [leave empty] - class file with path for above class
Just after adding menu - activate it in the grid.
Almost everything is done, only some last steps are needed.
Export menu to enable.sql and disable.sql files by clicking 'Export' button for the new menu in the grid and copy&paste SQL instructions from the popup.
However one more additional manual SQL query may be required to insert into install/sql/disable.sql file because menu items can be copied to other menu sets:
DELETE FROM `sys_menu_sets` WHERE `module` = 'vnd_test';Reload newly added language strings:
Studio > Developer > Polyglot > click 'Restore' button for 'Test' module
Add menu block to the single page (which was added before) in our Test module: Studio > Developer > Page Builder > Test > select 'Test' page > click 'Add Blocks' > Skeletons > Select 'Menu' block and click 'Add to Page' > click on just added menu block and change the following values in the form:
Title: _vnd_test_page_block_menu - translated as 'Test Menu'
Layout: Content only
Menu: Test Actions
Deletable: no
Also it's better to move menu box to the top of the page.
Since we added new block to the page, we need to re-export page into enable.sql and disable.sql files and replace old export code with new one to make menu block here by default after module install.
The final result should look like this:
