{"id":23948,"date":"2024-02-15T14:53:34","date_gmt":"2024-02-15T22:53:34","guid":{"rendered":"https:\/\/docs.extraview.com\/v25\/book\/menubar-layouts-drop-down-menus-1\/"},"modified":"2025-02-12T17:48:32","modified_gmt":"2025-02-13T01:48:32","slug":"menubar-layouts-drop-down-menus-1","status":"publish","type":"page","link":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/","title":{"rendered":"Menubar Layouts & Drop-Down Menus"},"content":{"rendered":"

Menubar layouts achieve two purposes.\u00a0 First, they provide the action buttons on the menubar of\u00a0add<\/em> and\u00a0edit<\/em> screens.\u00a0 Secondly they allow the creation of a drop-down menu stored within a single cell within an\u00a0add<\/em>\u00a0or\u00a0edit<\/em>\u00a0screen.\u00a0 Each installation has a default menubar layout for the\u00a0add<\/em> layout – the\u00a0MENUBAR_LAYOUT_ADD layout, and for the\u00a0edit<\/em> layout – the\u00a0MENUBAR_LAYOUT_EDIT layout.\u00a0 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.\u00a0 You create your own layout for drop-down menus by creating a layout type and then embedding this in the add<\/em> or edit <\/em>layouts.<\/p>\n

\"\"<\/p>\n

The above image shows the inbuilt layout for the standard interface.\u00a0 If you move into a workspace, this menubar is rendered like this:<\/p>\n

\"\"<\/p>\n

The menubar buttons are placed on a layout, in exactly the same manner as for all other layouts.\u00a0 For the above menubar, the layout looks like the following image.\u00a0 Note that menubar layouts are automatically placed at the top of the\u00a0add<\/em> and\u00a0edit<\/em> screens and do not need to be embedded within the\u00a0\u00a0add<\/em>\u00a0and\u00a0edit<\/em> layouts:<\/p>\n

\"\"<\/p>\n

Like all other layouts, button fields may be rearranged, deleted and added to the menubar layouts.\u00a0 Layout cell attributes may also be applied to the buttons.\u00a0 The inbuilt buttons available, and defined in the data dictionary are:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Field Name<\/strong><\/td>\nTitle<\/strong><\/td>\nPermission Key<\/strong><\/td>\nPurpose<\/strong><\/td>\n<\/tr>\n
MENUBAR_ITEM_CLONE<\/td>\nClone<\/td>\nPR_RESOLUTION.CLONE<\/td>\nCopy all the fields in this item to a new item<\/td>\n<\/tr>\n
MENUBAR_ITEM_CLOSE<\/td>\nClose<\/td>\n<\/td>\nExit and discard any changes made<\/td>\n<\/tr>\n
MENUBAR_ITEM_DELETE<\/td>\nDelete<\/td>\nPR_RESOLUTION.
\nDELETE_BUTTON<\/td>\n		Permanently delete this item from the database<\/td>\n<\/tr>\n
MENUBAR_ITEM_EMAIL<\/td>\nEmail<\/td>\nPR_RESOLUTION.
\nEMAIL_BUTTON<\/td>\n		Create and send an email using the contents of this item<\/td>\n<\/tr>\n
MENUBAR_ITEM_HISTORY<\/td>\nHistory<\/td>\nPR_RESOLUTION.
\nHISTORY_BUTTON<\/td>\n		View the historic audit trail for this item<\/td>\n<\/tr>\n
MENUBAR_ITEM_INSERT_CONT<\/td>\nInsert & Continue<\/td>\nPR_ADD_PROBLEM.
\nSAVE_AND_CONT_BUTTON<\/td>\n		Add this item and continue editing<\/td>\n<\/tr>\n
MENUBAR_ITEM_PRINT<\/td>\nPrint<\/td>\n<\/td>\nPrint the current page<\/td>\n<\/tr>\n
MENUBAR_ITEM_SUBMIT<\/td>\nSubmit<\/td>\nMENU.ADD_PROBLEM<\/td>\nAdd to database<\/td>\n<\/tr>\n
MENUBAR_ITEM_UPDATE<\/td>\nUpdate<\/td>\nPR_RESOLUTION.
\nEDIT_BUTTON<\/td>\n		Update this item and exit from the screen<\/td>\n<\/tr>\n
MENUBAR_ITEM_UPDATE_CONT<\/td>\nUpdate & Continue<\/td>\nPR_RESOLUTION.
\nSAVE_AND_CONT_BUTTON<\/td>\n		Update this item and continue editing.\u00a0 Note that you can add an attribute of PAGE, AJAX or DEFAULT to this data dictionary entry to control page refreshes when this button is clicked<\/td>\n<\/tr>\n
MENUBAR_ITEM_UPDATE_NEXT<\/td>\nUpdate & Next<\/td>\nPR_RESOLUTION.
\nALLOW_EDIT_NEXT_PREVIOUS<\/td>\n		Update this item and open next one for editing<\/td>\n<\/tr>\n
MENUBAR_ITEM_UPDATE_PREV<\/td>\nUpdate & Prev<\/td>\nPR_RESOLUTION.
\nALLOW_EDIT_NEXT_PREVIOUS<\/td>\n		Update this item and open previous one for editing<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

Note that most of these buttons also have permission keys, allowing you to turn them on and off on any layout, on a role-based basis.<\/p>\n

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.\u00a0 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.\u00a0 These are created as fields within the\u00a0Buttons<\/strong> tab of the data dictionary, and are given a display type of\u00a0Menubar Item<\/strong>.<\/p>\n

\"\"<\/p>\n

To choose the icon to display with a menu button, click the\u00a0Browse the Icon Library<\/strong>\u00a0button, and select from the library of approximately 1,500 available icons.<\/p>\n

If you elect to display\u00a0Icon and Text<\/strong>, the original screen becomes this:<\/p>\n

\"\"<\/p>\n

Layout Cell Attributes<\/h3>\n

Many layout cell attributes may be applied to menubar buttons, to style and control their functionality.\u00a0 The most likely that you will use are:<\/p>\n\n\n\n\n\n\n\n\n\n
Attribute<\/strong><\/td>\nGlobal Use<\/strong><\/td>\nPurpose<\/strong><\/td>\n<\/tr>\n
ALT TITLE IF<\/td>\n<\/td>\nYou can use this attribute to alter the title on the button according to your workflow<\/td>\n<\/tr>\n
MENUBAR ITEM CLASS<\/td>\nY<\/td>\nThis attribute allows you to define your own CSS class to style the button.\u00a0 This is most useful if you want to style many buttons the same, and to define the style once.\u00a0 The CSS class name you use may be defined within the user_stylesheet.css file<\/td>\n<\/tr>\n
STYLE<\/td>\nY<\/td>\nThis allows you to define the styling for the button.\u00a0 Note that the styling allows access to a comprehensive set of different color options for the buttons, such as foreground and background colors, border and icon colors as well as defining the color of the text when the user hovers over the button.\u00a0 See this page<\/a> for more information<\/td>\n<\/tr>\n
STYLE IF<\/td>\n<\/td>\nThis attribute allows you to alter the styling of the button according to your workflow<\/td>\n<\/tr>\n
VISIBLE IF<\/td>\n<\/td>\nThis attribute allows\u00a0you to alter the visibility of the button according to your workflow<\/td>\n<\/tr>\n
WS IMAGE<\/td>\n<\/td>\nThis attribute allows you to define a workspace image for the button<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Menubar Buttons within Add <\/em>& Edit <\/em>Screens<\/h3>\n

There is no requirement to place a menubar button on the menubar.\u00a0 You can place any of the buttons at any location within\u00a0Add<\/em> and\u00a0Edit<\/em> layouts.\u00a0 However, the buttons should then be removed from the menubar, to avoid the duplication of a menu function.<\/p>\n

Menubar Buttons on Related Issue Display Pre-Headers<\/h3>\n

Menubar buttons can be placed on the pre-headers of Related Issue Displays.<\/p>\n

Creating Drop-Down Menus<\/h3>\n

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.\u00a0\u00a0<\/strong>The CSS will vary for other themes.\u00a0 It is suggested that the administrator be familiar with CSS or that they reach out to the ExtraView Customer Support team for assistance.<\/p>\n

Drop-down menus appear as a single button on the screen.\u00a0 The buttons within the drop-down menu can be any of the buttons defined with the\u00a0Menubar Item<\/strong> display type.\u00a0 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:<\/p>\n

The principles of creating a drop-down menu are to first create a layout, using the administration utility Create and Maintain Layout Types<\/strong>.\u00a0 The layout type that you use to create drop-down menus is named\u00a0Layout Buttons.<\/strong>\u00a0 This layout is embedded within an\u00a0add<\/em> or\u00a0edit<\/em> layout, or an embedded layout within either of these.\u00a0 In the normal manner, you place the menu item fields within the embedded layout you created with the layout type of\u00a0Layout Buttons<\/strong>.\u00a0 This layout used in the following example is:<\/p>\n

\"\"<\/p>\n

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

\"\"<\/p>\n

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

\"\"<\/p>\n

Note the use of the CSS !important <\/span><\/strong>attribute to override the built-in color and background color.<\/p>\n

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. \u00a0 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.\u00a0 The CSS class you are modifying \/ overriding is named menuButton and the corresponding menuButton:hover entry.\u00a0 For example, for each menu item, add a class of MyMenuButtons.\u00a0 Within the user_stylesheet file enter this CSS:<\/p>\n

.MyMenuButtons {<\/code><\/div>\n
\u00a0 color: #79a2c4 !important;<\/code><\/div>\n
\u00a0 background-color: #fff !important;<\/code><\/div>\n
\u00a0 width: 125px;<\/code><\/div>\n
\u00a0 text-align: left;<\/code><\/div>\n
}<\/code><\/div>\n
.MyMenuButtons:hover {<\/code><\/div>\n
\u00a0 text-decoration: underline;<\/code><\/div>\n
\u00a0 color: #cc0000 !important;<\/code><\/div>\n
\u00a0 box-shadow: none !important;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
When you add a MENU_ITEM_CLASS with a value of MyMenuButtons to each of the button fields, this renders a menu like the following, with the text turning a red color when the user mouses over the entry.<\/div>\n
<\/div>\n
\"\"<\/div>\n

Creating Your Own Menubar Buttons<\/h3>\n

As stated above, you use the\u00a0Buttons<\/strong> tab within the data dictionary to create your own menubar buttons.\u00a0 They are given a fixed name, a title and then the display type of\u00a0Menubar Item<\/strong>.\u00a0 If you would like an icon to accompany the display of the button, click the\u00a0Browse the Icon Library<\/strong> button to select from the library of about 1,500 icon images.\u00a0 As described below, you may want to create a different icon for workspaces.<\/p>\n

\"\"<\/p>\n

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.\u00a0 The actions you define leads to additional prompts to gather the information needed to complete the action when the button is clicked.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Action<\/strong><\/td>\nPurpose<\/b><\/td>\n<\/tr>\n
Open URL<\/td>\nThis action requires the entry of a URL plus any parameters required to complete the action.\u00a0 The URL will target a new browser tab for its output<\/td>\n<\/tr>\n
Run Report<\/td>\nYou can select the report to run from any shared report previously saved.\u00a0 You can select the output type and the page size for browser output.\u00a0 Again, the action will target a new browser tab<\/td>\n<\/tr>\n
Custom Action<\/td>\nCustom actions allow you to execute or to call a JavaScript function.\u00a0 This allows for any further processing to take place, either within the JavaScript or by calling the server with the\u00a0\u00a0userSubmitChangeAjax<\/code> function.\u00a0 Any inbuilt JavaScript function may be called.\u00a0 In addition, there are a number of special support JavaScript methods that are useful.\u00a0 See here<\/a> for details.<\/td>\n<\/tr>\n
ExtraView Clone<\/td>\nThe ExtraView Clone function is emulated with this action<\/td>\n<\/tr>\n
ExtraView Close<\/td>\nThe ExtraView Close function is emulated with this action<\/td>\n<\/tr>\n
ExtraView Delete<\/td>\nThe ExtraView Delete function is emulated with this action<\/td>\n<\/tr>\n
ExtraView Email<\/td>\nThe ExtraView ad-hoc Email function is emulated with this action<\/td>\n<\/tr>\n
ExtraView History<\/td>\nThe ExtraView History function is emulated with this action<\/td>\n<\/tr>\n
ExtraView Insert & Continue<\/td>\nThe ExtraView Insert & Continue function is emulated with this action<\/td>\n<\/tr>\n
ExtraView Print Page<\/td>\nThe ExtraView Print function is emulated with this action<\/td>\n<\/tr>\n
ExtraView Refresh<\/td>\nThe ExtraView Refresh Button is emulated with this action<\/td>\n<\/tr>\n
ExtraView Related Issue Display<\/td>\nThis action is configured differently than other actions in that a button is created that is placed on each row within a Related Issue Display, as opposed to placing buttons on the header of the Related Issue Display.\u00a0 Buttons created with this action call a JavaScript function that can refer to the specific row (issue) within the Related Issue Display and link this row to and action within the parent issue.Example 1 – Displaying the Results of a Search within an\u00a0Add<\/em> or\u00a0Edit<\/em>\u00a0Screen<\/strong><\/span>
\nWe might want the end user to have a button on each row that displays the results of a search within an\u00a0add<\/em> or\u00a0edit<\/em> screen.\u00a0 When the button on a result row is clicked, the issue on that row is automatically linked to the parent record.\u00a0 This can be a more intuitive interface than defining a single button on the header of the Related Issue Display and having the user check all issues to be linked before clicking another button on the header to relate all the selected issues.\u00a0 This is accomplished by defining a menubar button with a custom action of:window.doRGSubmit('$$LAYOUT_ID$$', 'LINK_FIELD_NAME', '$$ID$$');<\/code><\/p>\n
    \n
  • The call to window.doRGSubmit<\/code> uses ExtraView’s inbuild function that relates child issues to the current parent issue<\/li>\n
  • $$LAYOUT_ID$$<\/code>\u00a0is a replacement variable which is replaced at runtime with the name of the layout on which the button resides<\/li>\n
  • LINK_FIELD_NAME<\/code> is the RID LINK FIELD NAME that connects the parent to the child issue<\/li>\n
  • $$ID$$<\/code>\u00a0is a replacement variable which is replaced at runtime with the ID of the issue on the row of the Related Issue Display that is clicked.<\/li>\n<\/ul>\n

    Example 2 – Execute an Action to Update an Issue on the Current Row of the RID<\/span><\/strong><\/p>\n

    Another example is to place a button on the Related Issue Display which executes an action to update the issue on the row of the Related Issue Display.\u00a0 For example, you might want an action button that, when pressed, alters the STATUS<\/strong> of the issue to Closed<\/strong><\/em>.\u00a0 Let’s say the menubar button is named MENU_UPDATE_STATUS<\/code>.\u00a0 It will have an Action Type<\/strong> of ExtraView\u00a0Related Issue Display<\/strong> and a Custom Action<\/strong> of:<\/p>\n

    window.doGridEditRIDRefresh('$$LAYOUT_ID$$');<\/code><\/p>\n

    The button field is placed on the Related Issue Display layout.\u00a0 The pressing of this button on the row of the RID causes a business rule to trigger, thereby updating the issue.\u00a0 When the user clicks the button, the action replaces $$LAYOUT_ID$$<\/code>\u00a0with the name of the current layout, and the business rule picks up the change.\u00a0 Your business rule might be:<\/p>\n

    <== preupdate ==>
    \nif (PROJECT = 'Actions' && MENU_UPDATE_STATUS.{changed} {
    \nSTATUS 'Closed';
    \n}<\/code><\/p>\n

    Given this update is on a single row of the Related Issue Display, you might want to communicate this action to the parent record via a subsequent rule:<\/p>\n

    <== postupdate ==>
    \n## use the childActions link to let the parent
    \n##\u00a0know that at least one child exists
    \nif (PROJECT='Actions' && (childActions<\/code>).ID.{is not null}) {
    \n{UPDATE: childActions CHILDREN_EXIST <\/code>= 'YES'}
    \n}
    \n# Define the link for child actions to the parent issue
    \n<== link childActions <\/code>==> RG(RG_NAME = RELATED_RESULTS, RG_TYPE = PARENTS)<\/code><\/p>\n

    Example 3 – Copying Selected Attachments to Selected Child Issues<\/span><\/strong><\/p>\n

    This example shows how a button placed on the pre-header of a Related Issue Display can copy selected attachments from the current parent issue to child issues which are selected on each row of the Related Issue Display.<\/p>\n

    A Data Dictionary entry\u00a0created as a User Defined Field<\/strong> with a display type of Text Field.\u00a0 Let’s say this is named\u00a0CURRENT_RID_ID<\/code>.\u00a0 This field is placed on the main\u00a0edit<\/em>\u00a0screen layout and may be hidden.<\/p>\n

    Now, create a menubar button within the\u00a0Labels \/ Buttons\u00a0<\/strong>section of the\u00a0Data Dictionary.\u00a0 For our example this is named COPY_ATTACHMENTS<\/code>.\u00a0 This field will have an\u00a0Action Type<\/strong>\u00a0of\u00a0ExtraView\u00a0Related Issue Display<\/strong>\u00a0and a\u00a0Custom Action<\/strong>\u00a0of:<\/p>\n

    window.doRGSubmit('$$LAYOUT_ID$$', 'CURRENT_RID_ID', '$$ID$$);<\/code><\/p>\n

    This button field is placed on the Related Issue Display layout. To trigger the copying of selected attachments on the parent issue, when the button on the Related Issue Display is clicked, create a business rule similar to the following:<\/p>\n

    <== onchange ==><\/span>
    \n## use a link named\u00a0<\/span>parentToChldAttachment to
    \n## copy selected attachments to a child issue<\/span>
    \nif (PROJECT=’Actions’ && (CURRENT_RID_ID.{changed}<\/span>) {<\/span>
    \n\u00a0 {UPDATE:\u00a0<\/span>parentToChldAttachment
    \n<\/code>SHORT_DESCR\u00a0<\/code>= ‘Attachments were copied from a parent issue’;
    \nATTACHMENT.{selected};
    \n}<\/span>
    \n}<\/span>
    \n# Define the link that copies attachments to a child issue<\/span>
    \n<== link\u00a0<\/span>parentToChldAttachment\u00a0<\/span>==> ID = CURRENT_RID_ID<\/span><\/td>\n<\/tr>\n

ExtraView Submit<\/td>\nThe ExtraView Submit function is emulated with this action<\/td>\n<\/tr>\n
ExtraView Update & Prev<\/td>\nThe ExtraView Update & Prev function is emulated with this action<\/td>\n<\/tr>\n
ExtraView Update<\/td>\nThe ExtraView Update function is emulated with this action<\/td>\n<\/tr>\n
ExtraView Update & Continue<\/td>\nThe ExtraView Update & Continue function is emulated with this action<\/td>\n<\/tr>\n
ExtraView Update & Next<\/td>\nThe ExtraView Update & Next function is emulated with this action<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Menu Buttons and Business Rules<\/h3>\n

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.\u00a0 As an example, you may want to set the value of several fields when the user clicks a button they have defined.\u00a0 This is easily achieved as follows:<\/p>\n

    \n
  • Create the button in the data dictionary, or from within a layout in the Design Center.\u00a0 For this example, the button is named MY_BUTTON.\u00a0 You do not need to select an Action Type<\/strong><\/li>\n
  • Add the field to a layout<\/li>\n
  • Create a Business Rule within the Area where the layout resides.\u00a0 This will look like:<== onchange ==>
    \nif (MY_BUTTON.{changed}) {
    \nPRODUCT_NAME = 'Tracker';
    \nMODULE = 'API';
    \n}<\/code><\/li>\n
  • \n
    When the user clicks the button, the two fields will have their values set to those in the rule.<\/div>\n<\/li>\n<\/ul>\n
    Another use case might be that when a user clicks the\u00a0Update<\/strong> button on the menubar, that they want to execute some additional validation before the issue is updated:<\/div>\n
      \n
    • Create the button in the data dictionary.\u00a0 For this example, the button is named MY_BUTTON.\u00a0 You do not need to select an\u00a0Action Type<\/strong><\/li>\n
    • Add the field to a layout<\/li>\n
    • Create a Business Rule within the Area where the layout resides.\u00a0 This will look like:\n
      <== preupdate ==><\/code><\/div>\n
      if (MENUBAR_ITEM_UPDATE.{changed} and PRODUCT_NAME != 'Tracker') {<\/code><\/div>\n
      \u00a0 {STOP: Ouch! You have selected the wrong product}<\/code><\/div>\n
      }<\/code><\/div>\n<\/li>\n
    • \n
      If the product name is not\u00a0Tracker<\/strong>\u00a0when the user updates the issue, they will see the error message and the update is cancelled.<\/div>\n<\/li>\n<\/ul>\n
      Business Rules on button fields only work within onchange <\/code>and preupdate <\/code>directives.<\/div>\n

      Menu Buttons that Run Reports<\/h3>\n

      Menu buttons that use Run Report<\/strong> as an Action Type have some special properties.\u00a0 First and foremost, you can use a filter with * Ask at Runtime *<\/strong> to pass into the report filters from field values on the current add<\/em> \/ edit<\/em> screen.\u00a0 For example, if you set a filter of PRIORITY = * Ask at Runtime *<\/strong> within the report then, when the value of the PRIORITY <\/strong>field on the current screen is P 3<\/strong> and the user clicks the button, the report to be run will use the value of P 3<\/strong>.\u00a0 At the same time, the properties of the button can be used to set the output type of the report.\u00a0 Note that not all output types are valid for all report types.<\/p>\n

      Menu Buttons with Custom Actions<\/h3>\n

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

        \n
      • JavaScript can be contained within the data dictionary by entering the code into the\u00a0Custom Action<\/strong> field after selecting the Action Type of\u00a0Custom Action<\/strong>.\u00a0 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');<\/code><\/li>\n
      • To execute a custom JavaScript function within the UserJavaScript.js file, you might enter something like this:javascript:MyFunction(MyParameters)<\/code><\/li>\n<\/ul>\n

        Workspace Considerations<\/h3>\n

        The inbuilt workspace already utilizes icons (without text).\u00a0 These icons are defined in the data dictionary edit screen for each button, at the Workspace Image entry on the screen.\u00a0 A path pointing to $$ICON_PATH$$ allows ExtraView to select the appropriate built-in icons from the appropriate user interface theme.\u00a0\u00a0Icons are not provided for new menubar buttons that you create, but these are easily created.\u00a0 The specifications for large workspace icons is that they should be 23 pixels wide and 20 pixels high.\u00a0 For small workspace icons they should be 18 pixels by 16 pixels.\u00a0 They should have a transparent background and have 2 pixel rounded border with a color of #666666.\u00a0 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.\u00a0 The location of your icons should be outside the ExtraView installation, but accessible to the application.\u00a0 You may enter the path to the image in the field\u00a0Workspace Image<\/strong>.\u00a0 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

        Menubar layouts achieve two purposes.\u00a0 First, they provide the action buttons on the menubar of\u00a0add and\u00a0edit screens.\u00a0 Secondly they allow the creation of a drop-down menu stored within a single cell within an\u00a0add\u00a0or\u00a0edit\u00a0screen.\u00a0 Each installation has a default menubar layout for the\u00a0add layout – the\u00a0MENUBAR_LAYOUT_ADD layout, and for the\u00a0edit layout – the\u00a0MENUBAR_LAYOUT_EDIT layout.\u00a0 In the…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":23935,"menu_order":13,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-23948","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\nMenubar Layouts & Drop-Down Menus - Product Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Menubar Layouts & Drop-Down Menus - Product Documentation\" \/>\n<meta property=\"og:description\" content=\"Menubar layouts achieve two purposes.\u00a0 First, they provide the action buttons on the menubar of\u00a0add and\u00a0edit screens.\u00a0 Secondly they allow the creation of a drop-down menu stored within a single cell within an\u00a0add\u00a0or\u00a0edit\u00a0screen.\u00a0 Each installation has a default menubar layout for the\u00a0add layout – the\u00a0MENUBAR_LAYOUT_ADD layout, and for the\u00a0edit layout – the\u00a0MENUBAR_LAYOUT_EDIT layout.\u00a0 In the...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Product Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-13T01:48:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/\",\"url\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/\",\"name\":\"Menubar Layouts & Drop-Down Menus - Product Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\"},\"datePublished\":\"2024-02-15T22:53:34+00:00\",\"dateModified\":\"2025-02-13T01:48:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ExtraView 25\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Administration Guide\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Site Configuration Menu\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Design Center\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"Menubar Layouts & Drop-Down Menus\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"name\":\"ExtraView Product Documentation\",\"description\":\"ExtraView Documentation\",\"publisher\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\",\"name\":\"ExtraView Corporation\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"contentUrl\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"width\":512,\"height\":512,\"caption\":\"ExtraView Corporation\"},\"image\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Menubar Layouts & Drop-Down Menus - Product Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/","og_locale":"en_US","og_type":"article","og_title":"Menubar Layouts & Drop-Down Menus - Product Documentation","og_description":"Menubar layouts achieve two purposes.\u00a0 First, they provide the action buttons on the menubar of\u00a0add and\u00a0edit screens.\u00a0 Secondly they allow the creation of a drop-down menu stored within a single cell within an\u00a0add\u00a0or\u00a0edit\u00a0screen.\u00a0 Each installation has a default menubar layout for the\u00a0add layout – the\u00a0MENUBAR_LAYOUT_ADD layout, and for the\u00a0edit layout – the\u00a0MENUBAR_LAYOUT_EDIT layout.\u00a0 In the...","og_url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/","og_site_name":"Product Documentation","article_modified_time":"2025-02-13T01:48:32+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/","url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/","name":"Menubar Layouts & Drop-Down Menus - Product Documentation","isPartOf":{"@id":"https:\/\/docs.extraview.com\/v25\/#website"},"datePublished":"2024-02-15T22:53:34+00:00","dateModified":"2025-02-13T01:48:32+00:00","breadcrumb":{"@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/menubar-layouts-drop-down-menus-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":2,"name":"ExtraView 25","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":3,"name":"Administration Guide","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/"},{"@type":"ListItem","position":4,"name":"Site Configuration Menu","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/"},{"@type":"ListItem","position":5,"name":"Design Center","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/"},{"@type":"ListItem","position":6,"name":"Menubar Layouts & Drop-Down Menus"}]},{"@type":"WebSite","@id":"https:\/\/docs.extraview.com\/v25\/#website","url":"https:\/\/docs.extraview.com\/v25\/","name":"ExtraView Product Documentation","description":"ExtraView Documentation","publisher":{"@id":"https:\/\/docs.extraview.com\/v25\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/docs.extraview.com\/v25\/#organization","name":"ExtraView Corporation","url":"https:\/\/docs.extraview.com\/v25\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/","url":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","contentUrl":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","width":512,"height":512,"caption":"ExtraView Corporation"},"image":{"@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"carl.koppel","author_link":"https:\/\/docs.extraview.com\/v25\/author\/carl-koppel\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/comments?post=23948"}],"version-history":[{"count":0,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23948\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23935"}],"wp:attachment":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/media?parent=23948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}