The Edit Console (Flex UI)

Manage your page content using this part of the UBCMS.

Flex UI is available to all UBCMS users now. Learn more.

The first time you open a page for editing, a popup slideshow provides a tour of key features. You can skip this then view it later--click Help in Page Information ('equalizer' button).

Overview

This is where authors edit each page on their site.

There are several activity areas in this console with icons/links or dropdowns.

Dropdowns are generally unlabeled, so we have provided our own names in quotes in the documentation. Other tools have unlabeled icons, but those generally have a text label that is revealed on hover.

The page can be modified by adding Components and Assets from the Side Panel, uploading/embedding content into the page, or adjusting what is currently shown in the drag & drop interface. Components are modified by selecting them then using the subsequently displayed tool bar. Some text components also support an 'in place editor'.

NB. The 'Use Classic Authoring Experience' setting in the Sites Console's User Preferences defines in which version pages will load. When selected, pages will always load in the Classic version. When deselected, pages will load in the new Flex UI version.

screenshot of the Edit Console identifying the various activity zones described in this documentation.

Screenshot of the Edit Console identifying the various activity zones described in this documentation.

Activity Areas

Other Topics

Training

Last reviewed: June 10, 2021

General Functionality

In Flex UI, right-clicking and double-clicking have no special function. Instead, select an item then look for additional options to appear.

There are also many keyboard shortcuts which are usually indicated as tips beside the tools listed in the Command Menu and other toolbars.

The 'Use Classic Authoring Experience' setting in the Sites Console's User Preferences defines in which version pages will load. When selected, pages will always load in the Classic version. When deselected, pages will load in the new Flex UI version.

1. Toggle Side Panel

Toggle Side Panel icon.

Toggle Side Panel icon

Located in the top left of the window.

Tthis tool reveals the Side Panel to the left of the main content area and includes the Assets browser, Components browser, and Content Tree.

> The Side Panel and its elements are discussed in more detail below.

2. Page Information ('equalizer')

'equalizer' icon.

'equalizer' icon

Located in the top left of the window.

The Page Information tool (equalizer icon) located in the top left of the window opens a menu that provides Timeline details about the last edit and publication, as well as options including:

3. Emulator (mobile device simulator)

Located in the top left of the window.

screen shot of the emulator tool button.

emulator button

This Flex UI tool allows authors to preview and make necessary layout adjustments to a variety of different screen sizes, from common mobile devices to tablets to standard desktop monitors.

Click then choose from the provided devices (e.g. iPhone 8 Plus) to view your page in that screen size. You can also edit the page in this view to see the impact.

4. Edit (mode) dropdown

Edit Tool icon.

Edit Tool icon

Located in the top right of the window.

Located at the top right of the window, the Edit tool opens a dropdown allowing youi to choose the page mode. An adjacent Preview tool provides quick access to Preview mode which is needed to follow links or open/close collapsible containers.

  • Edit - the mode to use when editing the page content.
  • Design - allows you to enable/disable components for use on a page and to configure the design of the component (if the page is based on a static template ).
  • Timewarp - allows you to view a page's state at a particular point in time drawing on available saved versions.

5. Preview mode

Preview mode icon.

Preview mode icon

Located in the top right of the window.

Located at the top right of the window, the Preview tool switches the page to Preview mode which is used to view the page as it will be shown on the published environment or to navigate the site in Author using page links or navigation, including the helpful 'Go to source' links to Shared Content references. You cannot follow links or in-site navigation while in regular Edit Mode.

'Go to source' links

While in Preview Mode, if you hover over any embedded shared content sections, a helper link will appear that will allow you to navigate to the associated shared content page.

6. Annotation tool

Annotations icon.

Annotations icon

Located in the top right of the window.

Click to open the Annotation editor, revealing any existing annotations. The icon will display "+" if there are no annotations, or the actual number of annotations currently on the page.

The editor reveals a special view of the page with each Annotation displayed in place.

  • Click the "+" in the upper left of the page to add a new annotation.
  • Click any of the annotation bubbles to edit its text or color, or to draw additional details (e.g. to circle part of the page or draw an arrow to a particular spot).
screenshot of an annotation on the page.

An annotation on the page. Click any of the colored, 3-character teasers to display its complete details.

7. Side Panel

Located along the left side of the window.

Toggle Side Panel icon.

Toggle Side Panel icon

The Side Panel appears to the left of the main page content when selected from the Toggle Side Panel tool. It provides access to Assets, Components and a Content Tree.

Assets Browser

screenshot of Assets Browser icon.

Assets Browser icon

  • Shows all content in the Assets section of the UBCMS (for all sites).
  • When the Assets Browser is open you can browse through all the assets available for your page. Infinite scrolling is used to expand the list when required.
  • To add an asset to your page, select and drag to the required location. 
  • From the top toolbar of the assets browser you can filter the assets by Name, Path, Category and Type. (See Best Practices for Filtering, below.)
  • Click the little pencil icon to the right of an asset to view or modify its properties in the Asset Editor.

Best Practices for Filtering

The file list is sorted chronologically, by modification date. The most recently modified (or newest additions) are at the top.

  • If you know the filename (complete or partial), try searching for that first.
  • If not, navigate to your source folder:
    1. Adjust asset type (default is images, documents includes PDFs). Changing this later will remove your Path!
    2. Enter the Path by clicking the magnifying glass icon to navigate to your source folder.
    3. Optionally, adjust Publish status (Published vs Unpublished).

Components Browser

screenshot of Components Browser icon.

Components Browser icon

  • Shows all components that are available for use on your current page.
  • These can be dragged to the appropriate location on your page, then edited to add your content.
  • Components are represented by name, group (in gray) and the icon or abbreviation (first two charaters of its name). 
  • You can filter the listed components by name or limit the display to a specific predefined group.

Content Tree

screenshot of Content Tree icon.

Content Tree icon

  • Gives a hierarchical overview of all of the components on the page so you can see at a glance how the page is composed.
  • Beside each component name will be additional descriptive text pulled from your page to help identify which element it is.
  • Clicking on the component will highlight the component in the page editor. 
  • If the component you select in the tree is editable, a wrench icon will appear to the right of the name. Clicking on this icon will directly start the edit dialog for the component.

8. Page Content (center well)

Located in the center of the window.

In the center of the window is an editable representation of the selected UBCMS page. Components can be dragged and dropped onto this area from the Side Panel and then further edited in place. Assets can be uploaded into these Components from the Side Panel.

Keyboard Shortcuts

These are Windows/Linux and MAC OS keyboard shortcuts for some commonly-used features, which are also frequently labeled on toolbars and menus (look for tool tips and hovers). For users who do not use keyboard shortcuts or have accessibility needs, some shortcuts can be disabled in My Preferences.

Shortcut Function Action

m

mode

Toggle between Edit and Preview modes.

p

properties

Open Properties dialog box.

c

components

Open/close Component Browser in Side Panel.

a

assets

Open/close Assets Browser in Side Panel.

t

tree

Open/close Content Tree in Side Panel.

/

annotations

Toggle Annotation mode on/off.  
(In Firefox, also opens QuickFind.)

+ (= key)

collapsible content

Expands/collapses selected container (select by click or hover).

Alt + (= key)
MAC: Opt +
collapsible content Expands all containers on page. If all are already expanded, collapses all containers.

Ctrl click
MAC: CMD click

select

Select multiple components, one by one.

Shift click

select

Select multiple components, from one to another.

Ctrl c
MAC: Cmd c

copy

Copy selected component(s).

Ctrl x
MAC: Cmd x

cut

Cut selected component(s).

Ctrl v
MAC: Cmd v

paste

Paste selected component(s).

Ctrl Backspace
MAC: Cmd Del

delete

Delete selected component(s)

Ctrl z
MAC: Cmd z

undo

Undo last change.

Ctrl y
MAC: Cmd y

redo

Redo last change.

Printable Version

Download or print these tipsheets of all keyboard shortcuts.

Add Special Characters into Text Components

Use these tricks to insert special characters like emojis, symbols and accents into components that use the Rich Text Editor.

Editing Page Contents

Watch a Training Video

Training opportunities are available

> Learn more about building UBCMS pages.

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)