Documentation > Best Practices and Examples > Version 3 Guide

Help Topics

Crownpeak is excited to launch the first phase of its new user interface, V3. This new User Interface (UI) marks a return to browser based technologies, and an alternative to the Silverlight used in the Vote UI. We are using all of the latest frameworks like HTML5, Angular and Bootstrap and have made some updates to the way the system works to help make managing your content easier than before.

Menus & Navigation


Links: Start Here | Help Topics | Feature List | Videos | Frequently Asked Questions (FAQ)

The Crownpeak V3 user interface has a traditional File / Edit / View menu structure. The File Menu contains all of the actions to create, open, and save your selected content within the CMS platform. The Edit Menu contains a long list of CMS actions including: Cut, Copy, Paste, Copy Path, Delete, Rename, Branch, Hide, Flag, and Unlock. The View Menu contains the actions to Preview, switch to Form View and Code View editing modes. This menu also contains the predefined Workspaces, the list of panels that can be enabled and docked in one of four locations in the application. Below is a complete list of actions and a description of their functions. 

Intro to Menus Intro to Notifications
 

Notifications


The Quickview Notifications menu has been moved from the bottom right corner in Volte to the top right corner in this version. This location is a more traditional location compared to other products and it is ideal for using V3 on a tablet or other mobile devices. The notification menu presents you with the most recent messages. The notifications have been broken up to display general notifications, task notifications and system health notifications. Click the view more link to see the notifications for your current session.

Publishing Monitor


The Quickview Publishing Monitor menu has been moved from the bottom right corner in Volte to the top right corner in this version. This location is a more traditional location compared to other products and it is ideal for using V3 on a tablet or other mobile devices. The publishing monitor notifications have been broken up to display My Publishing notifications, Other User notifications and System Publishing notifications. Click the view more link to see the notifications for your current session.

Panels & Workspaces


Panels are dockable palettes that allow you to create the workspace that fits your needs. Preconfigured panels and 3rd party panels are accessible inside of the View menu dropdown. Panels are able to be dragged and dropped anywhere (top left, top right, bottom left, bottom right) in the interface to fit your task oriented needs. Use the View->Arrange Workspace menu to select preconfigured interface layouts focused on personas such as Authors, Editors, Developers and more.

Intro to Panels Intro to Workspaces
 

Editing Modes


This version of the CMS UI user interface supports two classic editing modes (and one more soon - drag and drop). You can switch between Preview and either Inline editing or Form View editing modes. The inline editing mode allows you to click on and edit the context within Text BoxWysiwyg, and Image controls. The Form View editing mode allows you to create and modify content and meta data with fielded input controls including: Text BoxWysiwygImage, Check Boxes, Radio Buttons, List Panels and more ...

File View Panel


The File View panel is the primary navigation method with this version of the CMS UI. The File View is presented as a modified tree control with a number extra features:

  • Click on the folder arrow to see a list of the assets in the directory
  • Double Click to drill down to the next level of the tree structure
  • A drop down breadcrumb method to quickly move back up the tree structure
  • A root icon (Globe) to click back to the top of the tree structure
  • An expand option ">>" at the top of the panel that takes over all of the space in the application presenting several properties of each asset
  • Pagination to improve the performance concerns associated with a scrolling interface 

Search


A quick search control is available at the top of the File View panel. You can enter search criteria in the text box and press, Enter. The search tool will scan the content in the [Asset ID], [Asset Label], and [Asset Template Name] fields.

  • The search results are presented in the FileView panel, temporarily replacing the tree control. 
  • Move your mouse over each asset in the list to see the path in a rollover window
  • Click the "x" icon at the end of the text box to cancel the search. 
  • Use the File View expand option ">>" at the top of the panel to see the path for all of the results in the list. 
  • Use the right click menu to take action on the selected asset such as Preview, Edit, and more ...
  • Advanced Tip:
    • Add quotation marks ("Search Phrase") to a query to switch from a wildcard [*] search to an exact match search. 
    • Enter id:[Asset Id] to search only on the asset ID field
    • Enter label:[Asset Name] to search on the asset Label field
    • Enter template:[Asset Template Name] to search on the asset's corresponding Template Name
    • Examples: 
      • Find all assets that use a template named "Content Page": template:"Content Page"
      • Find the asset with a label of "Homepage" that uses a template file called "Content Page": label:Homepage template:"Content Page"
      • Find all assets containing the string 'sometext' in their content fields that also have a label of "Homepage" and use a template name "Content Page" : sometext label:Homepage template:"Content Page"
      • Note – Double quotes are not required if the query value is a single word: template:Homepage

Images


The Digital Asset Management (DAM) panel presents all of the images in the currently selecteed directory and all of the corresponding subdirectories in the your instance. Click on an image in the list to see more details. You can also drag an image onto the current asset in the Inline and Form View editing mode. This is an excellent alternative to the image selector window available in these editing modes. There are also a set of controls at the top of the panel including:

  • A quick search control that will scan the content in the [Asset ID], [Asset Label], and [Asset Template Name] fields
  • A View selector that allows you to present the image list in a Grid, List, or Full size
  • A Sort selector that allows you to present the image list in order of (A-Z), (Z-A), or (Last Modified)

Workflows & Publishing


The CMS Platform is a publishing CMS enforced by a set of stages in a Workflow. 

  • Assets in the CMS are assigned a Workflow by the CMS Administrator 
  • A set of stages are defined in the Workflow (For Example: Draft, Stage, Live, Retired)
  • CMS Publishing packages are assigned to stages in the workflow and mapped to directory locations on the hosting server by Crownpeak 
    • Stage ==> /Stage/
    • Live ==> /Live/
  • Assets typically start in a non-publishing stage such as Draft
  • The Workflow menu is located in the top menu (Under Edit), right click menu, and editing action bar (on the right side)
  • Use the Workflow menus to move the asset through the stages (Stage, Live, Retired)
  • Moving the asset through the workflow will trigger the publishing process which renders the asset, transfers the files (including corresponding dependencies)

Template File Editor (a.k.a. CodeMirror) Commands


 The following are the Template file editor commands available in V3:

Function PC Command Mac Command
Word Right Alt + Right Alt + Right
Word Left Alt + Left Alt + Left
Top of Page Ctrl + Up Cmd + Up
Bottom of Page Ctrl + Down Cmd + Down
Front of Line Ctrl + Left Cmd + Left
End of Line Ctrl + Right Cmd + Right
Select All Ctrl + A Cmd + A
Auto Complete Ctrl + Space Cmd + Space
Delete Line Ctrl + D Cmd + D
Undo Ctrl + Z Cmd + Z
Redo Ctrl + Y Cmd + Y
Find Ctrl + F Cmd + F
Find Next Ctrl + G Cmd + G
Find Prev Shift + Ctrl + G  Shift + Cmd + G
Replace Ctrl + R Cmd + R
Replace All Shift + Ctrl + R Shift + Cmd + T

Connect with CrownPeak