This walk through will show you to add your own custom menu items to menu located on the right side.

Setting up a Function

To add a new menu item to the main menu, first navigate to the "Funcs" app.

...

Click on the "+" button located in the bottom left corner. 

...

Name your function and click "Ok".

...

Select the new function from the list of functions on the left hand side, if it is not already selected, and click on the gear button located at the bottom of the list of funcs to edit it.

...

In the pop window, click on the "+" button under the “Markers” section to add a new marker tag.

...

Type in "finStackMobileMenu" and click the "Add" button. This is how the menu on the right side will know to include this function.

...

Finally, click on the "Apply" button to save these changes. 

Creating the Menu Item

Inside the function that was just created, you will want to return a list of dictionaries. Each dictionary will become a menu item. For this example we will create a single, simple menu item that will open a simple form and our list will look like this:

[
  {
    displayName: "My Menu Item", 
    appId: "myMenu", 
    icon: "icon-trophy", 
    iconType: "class", 
    level: 0, 
    ui: "mobile",
    order: 5, 
    action: "finstack.eval('finFormAlertOk(\"My Menu Item\", \"This is called from my brand new menu item!\")')", 
    keepOpen: true
  }
]

First, every menu item must have "displayName" and "appId" string properties. All other properties are optional:

• displayName - (str) This is the text that will appear in the menu item.

• appId - (str) This is mainly used when traversing menus and highlighting purposes.

• icon: (str) This will be the icon that appears to the left of the displayName. A full icon list can be found by going to your_host:your_port/pod/finStackMobileExt/icons.html. (For example:localhost:8080/pod/finStackMobileExt/icons.html)

• iconType: (str) This is used to determine the type of icon. When using icons from the provided list, it will always be "class".

• level: (integer) This determines the level of indentation of the icon and displayName for a tree-like effect. Defaults to 0 if not present.

• order: (integer) This determines the order in which the menu-items will appear. Items are sorted by this property first and then alphabetically by the displayName. Defaults to 99 if not present.

• action: (str) This is used to define what javascript action will happen when the menu items are clicked. In this case it will open a form using finstack.eval.

• keepOpen: (bool) This will keep the right-side menu open after a user has clicked on this menu-item. Defaults to false if not present.

A full list of menu item properties and more detailed explanations can be found here: Menu Properties

The function should look like this in the end:

Complete sampleMenuItem function

() => do
  [
    {
      displayName: "My Menu Item", 
      appId: "myMenu", 
      icon: "icon-trophy", 
      iconType: "class", 
      level: 0, 
      ui: "mobile",
      order: 5, 
      action: "finstack.eval('finFormAlertOk(\"My Menu Item\", \"This is called from my brand new menu item!\")')", 
      keepOpen: true
    }
  ]
end

The menu item should now appear in the main menu after refreshing browser:

...