Edit View Capabilities - Optimizely CMS 12

Exam Area: Area 1 – Product Knowledge (15%) Reference: https://docs.developers.optimizely.com/content-management-system/docs/edit-view

1. Edit View Overview

The Edit View is the primary interface for content editors. It is a single-page application (SPA) built on the Dojo JavaScript framework, accessible at /episerver/cms.

Edit View Layout:
┌─────────────────────────────────────────────────┐
│  Top Bar: Logo | View toggles | User menu        │
├──────────────┬──────────────────────────────────┤
│              │   Content Editing Area            │
│  Navigation  │   ┌──────────────────────────┐   │
│  Panel       │   │  On-page Edit / Preview  │   │
│  (Left)      │   │  or All Properties form  │   │
│              │   └──────────────────────────┘   │
│  Page Tree   ├──────────────────────────────────┤
│  Media       │   Status Bar / Breadcrumbs        │
│  Blocks      │                                   │
│  Gadgets     ├──────────────────────────────────┤
└──────────────┴──────────────────────────────────┘
│  Bottom: Language | Version | Publish toolbar    │
└─────────────────────────────────────────────────┘

2. Navigation Panel (Left Sidebar)

Tab	Purpose
Page Tree	Browse site structure; drag to move pages
Media Library	Browse/upload images, videos, files
Blocks Library	Browse/create shared blocks
Search	Search content across the site
Gadgets	Customisable widgets (tasks, recent changes, etc.)

3. View Modes (Top Bar Toggle)

Mode	Icon	Description
On-page Edit	✏️	Live preview + in-place editing overlays
All Properties	≡	Full property form (like a traditional CMS form)
Preview	👁	Read-only preview, no overlays

4. On-page Editing Panel

When in On-page Edit mode:

Editors hover over editable areas → a toolbar appears
Click to edit inline (text, images, blocks)
Changes are saved as draft automatically
ContentAreas support drag-and-drop of blocks

@* Enable on-page editing for a property *@
@Html.PropertyFor(m => m.CurrentPage.Heading)
@Html.PropertyFor(m => m.CurrentPage.MainContentArea)

5. All Properties Form

The All Properties view renders all [Display] properties in a form:

// Properties appear in the form, grouped by tab
[Display(
    Name        = "Page Heading",
    Description = "The H1 for this page",
    GroupName   = SystemTabNames.Content,
    Order       = 10)]
public virtual string Heading { get; set; }

[Display(GroupName = "SEO", Order = 100)]
public virtual string MetaTitle { get; set; }

[Display(GroupName = "SEO", Order = 110)]
public virtual string MetaDescription { get; set; }

Built-in tab names:

SystemTabNames.Content   // "Content" tab
SystemTabNames.Settings  // "Settings" tab
SystemTabNames.Shortcut  // "Shortcut" tab
SystemTabNames.Archives  // Not commonly used

6. Content Publishing Toolbar

Located at the bottom of the Edit View:

Action	Description
Save	Save as draft (not published)
Publish	Publish the content immediately
Schedule	Schedule publish at a future date/time
Set to Ready for Review	Triggers approval workflow
Reject	Reject in approval workflow
Undo	Undo unpublished changes

7. Version History

Every save creates a version. Access via the Version History panel:

Edit View → Top bar → (clock icon) Versions
  → Shows list of all versions
  → Click a version to compare
  → Restore a previous version
  → "Language versions" tab shows versions per language

// Programmatic access to versions
public class VersionService
{
    private readonly IContentVersionRepository _versionRepo;

    public VersionService(IContentVersionRepository versionRepo)
    {
        _versionRepo = versionRepo;
    }

    public IEnumerable<ContentVersion> GetVersions(ContentReference contentRef)
    {
        return _versionRepo.List(contentRef);
    }
}

8. Comments & Tasks

Editors can add comments to content and create tasks for other editors:

All Properties → Activity feed (bottom)
  → Add comment
  → @mention another editor
  → Create a task/reminder

9. Assets Pane (Right Side)

The Assets Pane appears when editing a content area:

Right panel shows when editing a ContentArea:
  → Media tab: images, videos, documents
  → Blocks tab: shared blocks
  → Drag item from pane into ContentArea

// ContentArea accepts dragged-in media/blocks
[AllowedTypes(typeof(SiteBlockData), typeof(ImageData))]
[Display(GroupName = SystemTabNames.Content, Order = 50)]
public virtual ContentArea MainContentArea { get; set; }

10. Gadgets

Gadgets are mini-applications displayed in the Gadgets panel (left sidebar):

Built-in gadgets:

Recently Changed
My Content
Tasks
Notifications
Shortcut Links

Custom gadget (developer):

[EPiServer.Shell.Web.ScriptModule(
    ModuleName = "/Modules/MyGadgets")]
// → Add a Dojo widget registered as an EPiServer gadget
// See: 04_Framework_Components/05_extending_cms_ui_gadgets.md

11. Language Switching

Bottom bar → Language selector
  → Switch between configured languages
  → Shows translation status (✅ / ⚠️ missing / 🔒 no access)
  → Language access rights control which languages editors can edit

12. Projects Integration

Top bar → Projects
  → Manage related content changes as a "project"
  → Publish all changes in a project together
  → Useful for coordinated campaign launches

Review Questions

What are the 3 view modes in Edit View? (On-page Edit, All Properties, Preview)
What must a property have for it to appear in the All Properties form? (A [Display] attribute)
What helper enables on-page editing for a property in a Razor view? (@Html.PropertyFor())
What is the difference between "Save" and "Publish"? (Save = draft; Publish = live to visitors)
What is the purpose of the Assets Pane? (Drag media/blocks into ContentAreas)
How does an editor access version history? (Via the clock/versions icon in the top bar)