Navigation

To edit the navigation open System Settings, head to App navigation, and then click the button which will open a config modal. After implementing your changes, click save and refresh the app.

Note: To edit the the JSON config the user must have Development Mode feature enabled.

properties

The app navigation is an array of modules, with each module containing the following properties…

name (string)

The name property sets the name of the module in the navigation bar. The property is translated and the translation key should be used.

index (number)

The dropdown menu of modules is sorted by their index.

color (string)

The following colors are available for you to choose from:

  • blue
  • indigo
  • purple
  • pink
  • red
  • orange
  • yellow
  • green
  • teal
  • cyan
  • gray

homepage (string)

When a module is selected, or the AGR logo is clicked, the user will be redirected to the homepage. The default homepage is the dashboard. However, since not all modules will have access to the dashboard and others might want a custom homepage this property gives you the freedom to select your own.

Sets the navigation bar of the module. The example below will result in the navigation bar shown here:

inst

{
    "navigation": [
        {
            "caption": "ITEMS",
            "path": "items",
            "feature": "items"
        },
        {
            "caption": "NAV_REPORTS",
            "path": "reports",
            "feature": "reports"
        },
        {
            "caption": "NAV_PLANS",
            "path": "workspaces/list/plans",
            "feature": "plans",
            "icon": "thumbs-up"
        },
        {
            "caption": "ORDERS",
            "path": "orders",
            "feature": "orders",
            "submenu": [
            {
                "caption": "NAV_REPORTS",
                "path": "reports",
                "feature": "reports"
            },
            {
                "divider": "true"
            },
            {
                "caption": "NAV_PLANS",
                "path": "workspaces/list/plans",
                "feature": "plans"
            }
            ]
        }
    ]
}
  • caption (string): The name of the feature, i.e. the translation key.
  • path (string): The path of the feature.
  • feature (string | string[]): The feature(s) required to access the feature.
  • divider (boolean): Turns the object into a dropdown divider.
  • icon (string): Name of a font-awesome icon, e.g. “thumbs-up”, without the fa- prefix. Adds an icon in front of the caption, but the caption is not required, i.e. you may use only an icon if you want to. Any icon from this list may be used: https://fontawesome.com/v4.7.0/cheatsheet/.
  • submenu (array): To turn a button in the navigation bar to a dropdown menu. The array holds the dropdown items.

full example (array)

The example below is an example from a bm initial load, to show the navigation with multiple modules. It does not include dropdowns or icons, so be sure to check those out in the navigation section above.

[
  {
    "name": "INVENTORY",
    "index": 0,
    "color": "blue",
    "homepage": "dashboard",
    "navigation": [
      {
        "caption": "ITEMS",
        "path": "items",
        "feature": "items"
      },
      {
        "caption": "NAV_REPORTS",
        "path": "reports",
        "feature": "reports"
      },
      {
        "caption": "NAV_PLANS",
        "path": "workspaces/list/plans",
        "feature": [
          "plans",
          "purchasePlans"
        ]
      },
      {
        "caption": "NAV_ORDERS",
        "path": "orders",
        "feature": "orders"
      },
      {
        "caption": "NAV_COUNTING",
        "path": "counting",
        "feature": "counting"
      }
    ]
  },
  {
    "name": "PLANNING",
    "index": 1,
    "color": "green",
    "navigation": [
      {
        "caption": "NAV_MERCHANDISE_FINANCIAL",
        "path": "workspaces/dm/dm",
        "feature": "dm"
      },
      {
        "caption": "NAV_LOCATION_FINANCIAL_PLANNING",
        "path": "workspaces/dm/dm",
        "feature": "dm"
      },
      {
        "caption": "NAV_LOCATION_CLUSTERING",
        "path": "workspaces/lm/lm",
        "feature": "lm"
      }
    ]
  },
  {
    "name": "ASSORTMENT",
    "index": 2,
    "color": "orange",
    "navigation": [
      {
        "caption": "NAV_RANGE_MANAGER",
        "path": "workspaces/rm/rm",
        "feature": "rm"
      },
      {
        "caption": "NAV_OPTION_MANAGER",
        "path": "workspaces/om/om",
        "feature": "om"
      },
      {
        "caption": "NAV_PURCHASE_PLANS",
        "path": "workspaces/ppm/ppm",
        "feature": "ppm"
      }
    ]
  }
]