Opening a New Menu from a Menu Item
This walk-through will show you how to open a new, custom menu, by clicking on a menu item. The walk-through picks up after the initial walk-through Adding a New App Item.
The Basics
In order to open a new menu, the action for the desired menu item will need call the FIN Stack JavaScript function: ObtainMenu
The function signature is:
window.app.ObtainMenu(userName, targetRef, appId, menuSettings) |
userName - (str) This should be the current user logged in or can be null
targetRef - (str) This should be the id of desired site/floor/equip etc. Can also be passed as 'null'.
appId - (str) Usually the appId of the clicked menu item. Any menu-items in the new menu that have an appId that matches this will be highlighted. Setting this property to null will cause the main menu to be opened.
menuSettings (dict) - The properties defined inside this dictionary will be applied to all menu items that in the new menu without the ignoreSettings tag.
At the very minimum the menuSettings must have the property funcCall or filterFor. Both properties cannot be present at the same time.
funcCall - (str) Will define what function to call to create the new menu. Used to create more customizable/in-depth menus.
filterFor - (str) Will define what filter to use to gather records for the new menu. Used to create quick menus that will use all properties provided in menuSettings.
Creating the Home Menu
First, similar to steps Adding a New App Item, create a new function or use the one from the last walk-through.
Since we want it to open another menu, it will have to be modified a little.
The action needs to be changed to use the ObtainMenu function, but a settings dictionary for the next menu will have to be added as well.
Add the settings dictionary as shown in line 2. Modify the header key to be what you want the next menu to be called. Modify the funcCall key to be a string version of the function call to the next menu function in Axon (using {{targetRef}} causes the id of the current navigation target to be passed into the function as a parameter).
Change the action key in the list of dicts to look like line 17. The last parameter is the menuSettings parameter from the top. The toAxonCode function is used to escape the settings dictionary so that it can be resolved correctly in the string.
() => do
settings: {
header: "Second Menu",
funcCall: "nextMenuItem({{targetRef}})"
}
[
{
displayName: "My Menu Item",
appId: "myMenu",
icon: "icon-trophy",
iconType: "class",
level: 0,
order: 5,
action: "window.app.ObtainMenu(null, 'null', 'myMenu2'," + settings.toAxonCode +")",
keepOpen: true
}
].toGrid
end |
Now the menu is set up to open another menu.
Creating a Simple Menu
Next, similarly to Adding a New App Item, create a new function and name it nextMenuItem. This time, however, do not add the "finStackMobileMenu" tag onto the function.
Add this simple code as the function:
(target: null) => do
[
{
displayName: "This is a test",
appId: "myMenu2",
action: "finstack.eval('finFormAlertOk(\"Test\", \"Hello World! :D\")')",
icon: "icon-plus",
iconType: "class",
keepOpen:true,
ui: "html",
minUiTarget: "phone",
order: 0
},
{
displayName: "@"+target,
appId: "myMenu2",
action: "finstack.eval('finFormAlertOk(\"ID\", \"This is the target id: @\"+"+target+")')",
icon: "icon-folder-open",
iconType: "class",
keepOpen:true,
ui: "html",
minUiTarget: "phone",
order: 1
}
].toGrid
end |
It contains 2 dictionaries, one for each button to click. There is also one Back button, this will take you back to the main menu.
The first one will open a form saying "Hello World! " by calling the javascript action finstack.eval
The second one demonstrates passing in variables into the actions by opening a form that says "This is the target id: " followed by the id of whatever is selected in the navigation pane.
It should look like this in the right side mini app:
