Product Documentation

Menubar layouts achieve two purposes.  First, they provide the action buttons on the menubar of add and edit screens.  Secondly they allow the creation of a drop-down menu stored within a single cell within an add or edit screen.  Each installation has a default menubar layout for the add layout - the MENUBAR_LAYOUT_ADD layout, and for the edit layout - the MENUBAR_LAYOUT_EDIT layout.  In the normal way, you can either inherit these layouts for different Business Areas and Projects, or you can create these layouts within any Business Area or Project.  You create your own layout for drop-down menus by creating a layout type and then embedding this in the add or edit layouts.

The above image shows the inbuilt layout for the standard interface.  If you move into a workspace, this menubar is rendered like this:

The menubar buttons are placed on a layout, in exactly the same manner as for all other layouts.  For the above menubar, the layout looks like the following image.  Note that menubar layouts are automatically placed at the top of the add and edit screens and do not need to be embedded within the  add and edit layouts:

Like all other layouts, button fields may be rearranged, deleted and added to the menubar layouts.  Layout cell attributes may also be applied to the buttons.  The inbuilt buttons available, and defined in the data dictionary are:

Each menubar button created may have an optional icon that is displayed within the button.  These are selected within the data dictionary edit screen for the button.  You may elect to display the text only, the text plus icon or the icon only.

You may not alter the purpose and action of any of the inbuilt buttons, although you can apply any of the available layout cell attributes.  However, you may create additional buttons within the data dictionary and place these on their menubar layouts and apply any one of a large number of actions.  These are created as fields within the Buttons tab of the data dictionary, and are given a display type of Menubar Item.  

To choose the icon to display with a menu button, click the Browse the Icon Library button, and select from the library of approximately 1,500 available icons.

If you elect to display Icon and Text, the original screen becomes this:

Layout Cell Attributes

Many layout cell attributes may be applied to menubar buttons, to style and control their functionality.  The most likely that you will use are:

Menubar Buttons within Add & Edit Screens

There is no requirement to place a menubar button on the menubar.  You can place any of the buttons at any location within Add and Edit layouts.  However, the buttons should then be removed from the menubar, to avoid the duplication of a menu function.

Creating Drop-Down Menus

The examples in this section all use CSS styles applied on top of the Light grey color navigation bar with blue tones and icons user interface theme.  The CSS will vary for other themes.  It is suggested that the administrator be familiar with CSS or that they reach out to the ExtraView Customer Support team for assistance. 

Drop-down menus appear as a single button on the screen.  The buttons within the drop-down menu can be any of the buttons defined with the Menubar Item display type.  A drop-down menu appears like this, once the button is clicked, and the user can select any of the items in the menu with a single click:

The principles of creating a drop-down menu are to first create a layout, using the administration utility Create and Maintain Layout Types.  The layout type that you use to create drop-down menus is named Layout Buttons.  This layout is embedded within an add or edit layout, or an embedded layout within either of these.  In the normal manner, you place the menu item fields within the embedded layout you created with the layout type of Layout Buttons.  This layout used in the following example is:

This layout creates the following drop-down menu.  At this point the rendered layout adopts the same style as buttons on the menubar.  This style varies according to the user interface theme, but may look like this:

After applying a layout element attribute of STYLE with a value of color:#79a2c4 !important; background-color: #fff !important; width:125px; text-align:left to each button, the drop-down menu may look like this:

Note the use of the CSS !important attribute to override the built-in color and background color. 

Given that you have a number of buttons to style identically, and that you may want to go further with mouse hover effects, it can be useful to create a CSS class and enter this into the user_stylesheet file as an alternative to using the STYLE layout cell attribute.   To see the underlying CSS that you want to modify / override, look in the stylesheets folder of your installation and then within the folder that corresponds to your existing theme.  The CSS class you are modifying / overriding is named menuButton and the corresponding menuButton:hover entry.  For example, for each menu item, add a class of MyMenuButtons.  Within the user_stylesheet file enter this CSS:

Creating Your Own Menubar Buttons

As stated above, you use the Buttons tab within the data dictionary to create your own menubar buttons.  They are given a fixed name, a title and then the display type of Menubar Item.  If you would like an icon to accompany the display of the button, click the Browse the Icon Library button to select from the library of about 1,500 icon images.  As described below, you may want to create a different icon for workspaces.

The action for any menubar icon that you create allows you to invoke any of the standard built-in button functions, or to define your own action.  The actions you define leads to additional prompts to gather the information needed to complete the action when the button is clicked.

Menu Buttons and Business Rules

The most common purpose in defining your own menu button is to be able to execute some Business Rules when the user clicks the button.  As an example, you may want to set the value of several fields when the user clicks a button they have defined.  This is easily achieved as follows:

• Create the button in the data dictionary, or from within a layout in the Design Center.  For this example, the button is named MY_BUTTON.  You do not need to select an Action Type
• Add the field to a layout
• Create a Business Rule within the Area where the layout resides.  This will look like:

  <== onchange ==>
if (MY_BUTTON.{changed}) {
  PRODUCT_NAME = 'Tracker';
  MODULE = 'API';
}

• When the user clicks the button, the two fields will have their values set to those in the rule.

• Create the button in the data dictionary.  For this example, the button is named MY_BUTTON.  You do not need to select an Action Type
• Add the field to a layout
• Create a Business Rule within the Area where the layout resides.  This will look like:
  <== preupdate ==>
  if (MENUBAR_ITEM_UPDATE.{changed} and PRODUCT_NAME != 'Tracker') {
    {STOP: Ouch! You have selected the wrong product}
  }
• If the product name is not Tracker when the user updates the issue, they will see the error message and the update is cancelled.

Menu Buttons with Custom Actions

Custom actions are used to trigger code.  This can be custom code in Java or JavaScript.  The entry is always to a JavaScript function and this JavaScript function may execute an Ajax call to the server.  

• JavaScript can be contained within the data dictionary by entering the code into the Custom Action field after selecting the Action Type of Custom Action.  For example, to simply set an alert when the button is clicked, you might enter something like this:

  javascript:alert('You clicked the custom button');
   

• To execute a custom JavaScript function within the UserJavaScript.js file, you might enter something like this:

  javascript:MyFunction(MyParameters)

Workspace Considerations

The inbuilt workspace already utilizes icons (without text).  These icons are defined in the data dictionary edit screen for each button, at the Workspace Image entry on the screen.  A path pointing to $$ICON_PATH$$ allows ExtraView to select the appropriate built-in icons from the appropriate user interface theme.  Icons are not provided for new menubar buttons that you create, but these are easily created.  The specifications for large workspace icons is that they should be 23 pixels wide and 20 pixels high.  For small workspace icons they should be 18 pixels by 16 pixels.  They should have a transparent background and have 2 pixel rounded border with a color of #666666.  As a shortcut, you can select one of the icons provided in the base theme you are using, edit this and then save it to a location.  The location of your icons should be outside the ExtraView installation, but accessible to the application.  You may enter the path to the image in the field Workspace Image.  Of course, you can also point to an existing image within the base installation with your own menubar button that you can create if you do not want to create an image of your own.