CMS Lite User Interface Guidelines

CMS Lite Standards

The following applies to all the screens in the CMS Lite graphical user interface (GUI):

  • Use the arrows expand and collapse arrow used for  tree navigation to expand and collapse the Tree Navigation display
    • An arrow '>' will only be displayed next to nodes that have children
  • In the Content or Asset menu, click on the vertical grey bar dividing the two panes to collapse the Navigation Pane
  • Click on a Banner menu item to open in the same tab.  Right-click and select Open Link in New Tab
  • To select an item, click in the box selected checkbox next to the file name
  • Click on any Item Control Bar to expand or collapse a component
    Item Control Bar
    Expand and collapse components example
  • Click the delete delete icon icon on the Item Control Bar of a component item to remove it, for example, a Related Links box
  • Dynamic Pickers have been incorporated throughout the interface providing functionality to Search or Navigate to pages, assets, etc.  When using the Tree Navigation, the independent pickers (Page, Asset , Image or Folder) will remember the last location that you browsed during the current session.  Selecting the [Reset] button will clear the location history for the displayed picker.  This will reset all pickers of that type, for example, wherever the Page Picker is used.  It does not reset the history for the Asset, Image or Folder Pickers as each individual picker has its own [Reset] button.
      
    Search and Tree Navigation on the Page Picker
    • When more than 20 results are returned using the Search functionality, pagination will appear at the bottom of the picker.  Hover over any of the results to see the full breadcrumb location.  
      ‚ÄčDynamic Page Picker showing pagination 
  • Hold the left mouse button down to move accordion or grid panels
    Move icon found in accordion panels and grid layouts
  • Insert a paragraph block in an accordion or between grid layouts
    Insert paragraph line icon
  • Right-click on the Move icon Move icon and select Cut to remove a panel or grid layout
    Right-context menu for panels & grids
  • To reorder right-column box components, left-click on the Item Control Bar, hold the left mouse button then drag and drop the component to the new location
    reordering components in the right-column boxes using Item Control Bar
  • If edits are made to a node, but not saved, a CMS Lite dialogue box will be displayed if you move to another node in the Navigation Tree
    CMS Lite warning message when navigating away from a page with unsaved changes
  • If you click outside of CMS Lite dialogue box, the [Close] action invoked
  • If edits are made to a node, but not saved, a browser warning message will be displayed if you move to another menu item
    browser warning box when navigating away from a page with unsaved changes

Icons

key icon The key icon indicates that a file is locked by you.  Files remained locked until they are published to Production web server, or the [Unlock] action is invoked.

lock icon The file is locked by another user. Hover over the lock to display the IDIR account.  You can unlock another person's file, but it is recommended that you communicate with the person beforehand.   Files remained locked until they are submitted to the Production web server, or the [Unlock] action is invoked.

valid page icon Page/asset has been saved with no validation errors.  The page/asset can be published to the Production web server.

invalid page icon Page/asset has been saved but validation errors exist; therefore, it cannot be published to the Production web server.  An attempt to publish will result in a red failure message "Publish was unsuccessful. Validation errors were found in the selected page(s)." being displayed in the top-right corner of the pane.

folder icon Folder icons are used in the Assets and Tags panes.  Folders are used to contain additional items. 

published page icon  The most current version of the page (node) has been published to the Production web server.

modified page icon Page is modified, but not locked.  The Settings tab of the page will indicate who last modified the page and when.  Modifications have not been published to the Production web server.

locked page by  you icon Page is locked by you, but not modified.   The most current version of the page is in the Production web server.

locked and modified page by you icon Page is modified and locked by you.  Modifications have not been published to the Production web server.

locked page by another user icon Page is locked by another user, but not modified.  Hover over the icon to display the IDIR or view the Settings tab to see who has it locked.  The most current version of the page is on the Production web server.

locked and modified page by another user iconPage is modified and locked by another user.  Hover over the icon to display the IDIR or view the Settings tab to see who has it locked.  Modifications have not been published to the Production web server.

external link icon Indicates that the node is an external link.

 Required Fields

Required fields exist primarily in the Content tabs and must be completed prior to publishing a page.  Required fields are indicated with an asterisk (*).  If a required field has not been completed when the [Save] action button in invoked, a yellow message is will be displayed in the top-right corner of the pane "The page contains validation warnings and cannot be published until they are resolved".   A warning icon Warning Icon will be displayed in the tab(s) where missing field information exists, and the field(s) will be highlighted. 

validation warnings when a page is saved

The page may be viewed in the Quality Assurance (QA) web browser, but cannot be published to the Production web server until all required fields are completed. validation errors message when trying to publish a page If the Publish action is invoked, from the Content Pane or the Navigation Pane, a red message is will be displayed in the top-right corner of the pane "Publish was unsuccessful. Validation errors were found in the selected page(s)".