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.

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.

To change the menu (add, edit, or delete), open the developer layout and the user interface layout:

  1. MENU_d

  2. Menu

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. labelName = the text that will appear on the vertical menu.

  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. sortOrder = determines the order of the menu items as they appear in the card window.

  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. 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).

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).

Updating the User Interface

Open the Menu layout and view it in layout mode.

  1. Expand the layout to a more comfortable width for visibility.

  2. Expand the button bar to see the text.

  3. Hide all objects except b_LevelTwo Admin (not required, but helpful).

  4. Insert a new button into the button bar at the place where the menu item should exist.

  5. Add an icon.

  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.

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.

Add a new button to the bar, making 7 total. Position that new button in the 4th position.

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.

It can be helpful to give the newly created button object a name.

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!

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".

SUCCESS!

Last updated