Comment on page

Updating the Accordion Menu

Updating the card window that displays the accordion menu of Trayse Inventory.
The main menu for Trayse Inventory is a card window that displays the menu options in a list. The menu button is on the top left of every layout.
Menu button on the Item layout.
The menu list is a card window. Like all card windows in Trayse Inventory, a user can click the escape key to close the window. Clicking the Menu icon will also close the window.
Menu card window
To change the menu (add, edit, or delete), open the developer layout and the user interface layout:
  1. 1.
  2. 2.
The Menu developer table
The Menu user interface table.
Trayse Inventory uses custom menus. You may need to choose the Standard Menu in order to access menu layouts.
In this example, we'll add a menu item. We'll add an Assembly Task to the menu item.
This process is focused on the menu. It is presumed that the table and relationship graph are already updated with an Assembly Task entity.

Field Definitions

  1. 1.
    labelName = the text that will appear on the vertical menu.
  2. 2.
    level = indicates if this menu is immediately visible (level 1) or is a submenu and requires a click of an existing menu (level 2).
  3. 3.
    sortOrder = determines the order of the menu items as they appear in the card window.
  4. 4.
    type = the general type of this menu item. This is currently not in use but may be helpful if users want a simplified menu with progressive disclosure (i.e. show them what they need, when they need it).
  5. 5.
    sortOrderList = a summary field that lists the sort order field. This is used in the script "accordion - toggle menu" to determine the action upon a user click.
Script modification is not required to for this example. However, if you need to access the navigation scripts, they are in the script folder "Navigation" and start with "accordion".

Adding Menu Record

Add a new record to the MENU_d table. In our example, we'll add "Assembly Tasks." Presumably, the Assembly Task table is rarely updated so we'll put this in the Admin section. It will require a click of on the Admin menu item to reveal it. That means it is a level 2 menu item.
Sort the table by the sortOrder field to see how the data will be sorted on the card window (Sort Ascending).
The newly created Assembly Tasks is at the top of the menu when sorted because it doesn't have a sortOrder yet.
To put the Assembly Tasks down with the Admin section, give it a sortOrder value. In this example, the sortOrder value of 99.7 would put it at the bottom of the list. But let's presume we want it to display after Locations. To do that, we need to give it a value of 99.4. In order to "push" the existing records below it, we need to update the sortOrder for Unit of Measure (from 99.4 to 99.5) Unit of Measure Conversion (from 99.5 to 99.6) and Integrations (from 99.6 to 99.7).
Updated MENU_d table with the Assembly Tasks in the sorted list (4th from the bottom).

Updating the User Interface

Open the Menu layout and view it in layout mode.
  1. 1.
    Expand the layout to a more comfortable width for visibility.
  2. 2.
    Expand the button bar to see the text.
  3. 3.
    Hide all objects except b_LevelTwo Admin (not required, but helpful).
  4. 4.
    Insert a new button into the button bar at the place where the menu item should exist.
  5. 5.
    Add an icon.
  6. 6.
    Add text value to the button by using this simple calculation: MENU::labelName
The width of the layout is narrow (280 pts.) and can be hard to see. Trayse Inventory ships with a rectangle object on the layout that is also 280 pts. It helps when creating new menu records as the process usually involves expanding the button bar. This rectangle object can help quickly resize the button bar and the layout parts to the correct width.
There are several button bars on this layout. In this example, we are adding a button to the Level Two Admin button bar. In #3 above, you want to hide everything you are NOT working on.
The user interface for the menu layout is very narrow at 280 pts. Expand for ease of visibility.
The Level Two Admin button bar. It can be hard to see, so we'll expand it.
Note the width of the button bar. In this case, it is 262 pts. and positioned at 0 pts. to the left. Expand the bar for visibility.
The expanded Level Two Admin button bar.
Add a new button to the bar, making 7 total. Position that new button in the 4th position.
A new button added to the button bar.
The button name will be a calculation based on the table. To achieve that, enter MENU::labelName in the button bar set-up modal window. Assign an icon and set the button action to be the same as the other buttons.
The newly created button
It can be helpful to give the newly created button object a name.
Naming the newly created button object in the button bar.
Resize the button and, if necessary, the layout width (we didn't change it in this example, so it's not required).
Test, test test!
I Forgot to set the hide feature!
The new button is added but the display isn't correct. I forgot to set the hide feature.
Give the button object a Hide criteria. The pattern is the same as all the other buttons: MENU::labelName <> "[whatever this button label name is]". For this example, the hide criteria is MENU::labelName <> "Assembly Tasks".
Giving the new button a hide criteria.
The newly created button in the expanded menu.