Page Comparison

...

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.

...

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.

...

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.

1. The first one will open a form saying "Hello World! 

...

1. " by calling the javascript action finstack.eval

2. 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:Image Removed

...