Documentation > Best Practices and Examples > Version 3 Guide

Version 3 Guide

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 Volte 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.

Overview


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

As always, the bulk of the CMS/DXM system is in the back end code, and none of that is changing.  This is an update to the user interface, and will work alongside the “Classic” CMS UI and Volte.  For the most part, you will be able to go back and forth between these three interfaces. When enabled, users will be able to smoothly switch between the different versions of the Crownpeak CMS Platform. Switching between versions is as easy as changing the last characters in your URL: 

  • V3 Version: https://cms.crownpeak.net/[Instance Name]/V3
  • Volte Version: https://cms.crownpeak.net/[Instance Name]/UI
  • Classic Version: https://cms.crownpeak.net/[Instance Name]/

Author First


The User Interface (UI) presentation layer of CMS Platform is a large and sophisticated application.  There are hundreds of features to support.  CrownPeak has divided these features into six parts to allow a timely release.  We will have two phases each of the Author, Administrator, and Developer oriented features.  Our goal at the end is a full flagship replacement of the user interface to the point that no one even wants to use the prior two interfaces. Obviously, there is some overlap between roles, so we are interested in feedback on prioritizing the next set of features.  We have a rough timeline on the next releases, and will accelerate that with the addition of new staff.

Desktop First, but Touch Ready


The CMS UI is a complex application with many screens and display modes.  Accordingly, we are developing for desktop and notebook type systems first.  We are testing on tablet devices, though, and will keep an eye to smartphone use in the future. With the new UI, we updated the features and have added these new capabilities to the system:


Multiple Documents Open at the Same Time

V3 allows you to open several documents and switch between them by clicking on their titles in the middle pane.  The information panels will automatically update with contextual information for the selected document.

Panels

V3 has taken the concept of the Volte right hand property accordion to the next level.  In V3, you can choose which panels you want to see, and control where they will appear.  Each information panel can be placed on the right or left side of the screen.  They can also be displayed full height or half height, and stacked up with tabs to switch between them.  Simply drag the panels towards the center of the screen to change their location - you will see a 2x2 target to drop them.  The View menu lets you add or remove panels, and we have some standard setups to make switching modes easy.  In the future, we will allow you to save and load custom panel configurations.

New Editing Mode: Drag and Drop

One very nice feature is a new edit mode: Drag and Drop.  This will allow you to drag Components like text fields, images, and spacers right on to the page in a preview like mode.  One way to think about it is as a replacement for WYSIWYG fields, where editing will be much easier since it will be visual.  The form and inline (ICE) modes will also still be available.  We are working to make the components compatible with the Component Library template development system, and CrownPeak will provide some components to make custom pages easier to develop. Some of the components will be compound - multiple fields so you can quickly build pages from beautiful blocks of content. CrownPeak will develop separate documentation on how to implement and use the new Drag and Drop mode and fields, and we can assist you in setting that up.

Updates to Existing Features


WYSIWYG: TinyMCE For Now

Since the new V3 UI will be based on browser technologies, we will not be supporting Ephox EditLive! In V3.  Java applet support is being phased out industry wide, and running them causes a lot of overhead in browser configuration issues.  In Phase 1, we will be using TinyMCE as we do with Volte.  This version is in the browser and does does not have table issues. New to TinyMCE: 

  • Import from Office (Word)
  • Image & Media Editor
  • As-You-Type Spell Checking & Thesaurus
  • XHTML & XML Compliance
  • Hyperlink Checking
  • Updated Support for Tables

Going forward, we may add more WYSIWYG editors.  Ephox has a JavaScript based one, called Textbox.io, and they also bought TinyMCE in 2015.  CKEditor is also a popular JavaScript based editor.  We welcome feedback on features you like, and editors you have experience with!

New Menu Shortcut Keys

V3 will support most of the keyboard menu shortcuts that we created in Volte.  Since Volte was running in Out of Browser mode, we were able to use shortcuts that made sense in their own ecosystem.  With V3, we are back in the browser, and many of the shortcuts have meanings to common browsers. We are changing the shortcuts to help ensure we do not conflict with browser shortcuts. You can use all of the browser features alongside V3.  In short, for the most part, we will use the Alt key instead of the Ctrl key for most shortcuts.  Here is a mapping of the Volte and V3 shortcuts for reference:

Name

Volte Shortcut

V3 Shortcut

Notes 

Open File

Missing

Alt + O

Open (GoTo)

Copy

Ctrl + C

Alt + C

Copy

Cut

Ctrl + X

Alt + X

Cut

Copy Path

Ctrl + Shift + C

Alt + Shift + C

Copy Path

Clone

Ctrl + N

Alt + Shift + N

Clone

Paste

Ctrl + V

Alt + V

Paste

Delete

Delete

Delete

Delete

Rename

F2

F2

Rename

Branch

Ctrl + Shift + B

Alt + Shift + B

Branch

UnBranch

Ctrl + Shift + U

Alt + Shift + U

UnBranch

Flag

Ctrl + Shift + L

Alt + K

Flag

Hide

Ctrl + Shift + H

Alt + H

Hide

Save

Missing

Alt + S

Save

Close

Missing

Alt + W

Close

File View Panel

N/A

Alt + Shift + F

File View

Information Panel

N/A

Alt + Shift + I

Information

Thumbnail Panel

N/A

Alt + Shift + T

Thumbnail

Content Panel

N/A

Alt + Shift + E

Content Blocks

DAM Panel

N/A

Alt + Shift + D

DAM

WCO Panel

N/A

Alt + Shift + W

WCO

Report Panel

N/A

Alt + Shift + R

Report

GoTo

Ctrl + G

N/A

Go To

Quick Search

Ctrl + Shift + F

In File View

Search

New / File

Ctrl + I

Missing (Alt + I)

New File (Short Cut Missing in Top Menu) - Feature not Developed

New / Folder

Ctrl + D

Missing (Alt + D)

New Folder (Short Cut Missing in Top Menu) - Feature not Developed

New / Upload

Ctrl + U

Missing (Alt + U)

New Upload (Short Cut Missing in Top Menu) - Feature not Developed

Edit ICE

Ctrl + E

Missing

Edit in Ice Mode - Feature not Developed

Edit Template

Ctrl + T

N/A

Open Template Directory - Short Cut Not Longer Needed

Edit Workflow

Ctrl + W

N/A

Open Workflow - Short Cut No Longer Needed

Back

Backspace

N/A

Use the browser back button

Preview

Ctrl + P

Alt + P

Preview (Short Cut Missing in Top Menu)

Form View

Ctrl + F

Alt+ E

Edit Form (Short Cut Missing in Top Menu)

Code View

Missing

Missing (Alt + Shift + Q)

Open Asset's Ouput Template File (Short Cut Missing in Top Menu)

View Output

Ctrl + O

Missing (Alt + Shift + O)

Open Output View (Short Cut Missing in Top Menu)

Refresh

Ctrl + R

Alt + R

Refresh (Item Missing in Top Menu)

File View Filter

Ctrl + Shift + T

Missing (Alt + Shift + T)

Open Filter Dropdown - Feature not Developed

Select all Files

Ctrl + A

Missing (Alt + Shift + A)

Select all Assets - Feature not Developed

New Right Click Menus

The V3 Right Click Menus give you access to commonly used actions and is available in the File View panel.  One additional feature is that, like the Classic UI, you can use the Control key along with the right mouse click to access the browser menu if need be.  The browser right click menu will be available without change on all UI areas other than the File View Panel. The menu options are largely the same as Volte with the following exceptions:

Volte

V3

MWSnap 2016-05-27, 11_52_35.png

MWSnap 2016-05-27, 11_51_47.png

Models

The New menu is populated with folder/context specific items that are configured with Models.  Your instance should already be working this way.  There are a few generic New menu items like New File, New Folder, and New Upload.  These are generally used by template developers to bootstrap the Models.  For this reason, these menu items / features will be added in a later phase.  You can still use Volte or Classic to perform these operations.

Connect with CrownPeak