Edit Mode: GUI and Tools overview

November 11, 2022

1 Introduction

Jahia Digital Experience Manager is a platform for managing a variety of digital initiatives in a productive and secure fashion. Initiatives such as building websites, mobile sites, intranets and portals, all of which can interact with visitors in order to deliver the best user experience possible.

This document presents the Edit Mode interface, which is the most advanced editing mode available in Digital Experience Manager. It explains the global organization of this Mode and the usage / function of all menus and major tools. Explanations remains simple and factual, so this guide can help users to get familiar rapidly with of the tools they will use.

Some GUI or tools rapidly described in this document are covered in depth in other User Guides.

2 Overview of the Edit Mode

The Edit Mode is organized in three main parts

  1. The Top Toolbar: it allows to navigate in the Digital Experience Manager application, and to launch actions that have a global impact on the site or page you’re editing.
  2. The Selector, on the left: it allows to select items to display them in the Edit Frame or to drop them in the Edit Frame in order to build the page.
  3. The Edit Frame, on the right: this is where the page you are editing appears. Each element composing the page reacts to the mouse (mouse over, simple click, double-click, right-click). You could compare the Edit Frame to an electronic pasteboard.

3 The Top Toolbar

3.1 Mode menu

This menu allows switching from one Mode to another. The items listed depend on the user rights.

The access to the Live and Preview modes can be done in the same page (then the page in live or preview replaces completely the Edit Mode) or in a new window.

3.2 View menu

This menu gives access to advanced tools

  • Advanced preview (preview the site for a selected user type or a given date)
  • Compare side-by-side the currently published version and the staging version
  • Compare 2 versions already published
  • View a published version at a specific date and time
  • Show permissions status on each item of the page currently displayed in the Edit-Frame (if a content-item has a specific access right setting an icon will overlay it)
  • Show visibility status on each item of the page currently displayed in the Edit-Frame (if a content-item has specific conditions to be displayed in live an icon overlay it)

3.3 Publication menu

This menu allows to launch publication actions for

  • The complete site
  • The current page (with or without its child pages)
  • The content-object precisely selected in the Edit Frame

Also

  • Unpublish the selected item in the Edit-Frame (or the page currently displayed if no item is selected)

Finally

  • Display overlays on items in the Edit-Frame depending on their publication status (never published, published, modified since latest publication)
  • Open the Publication Manager, a tool to select manually multiple items and launch a publication process

3.4 Workflow menu

This menu allows to

  • Start different workflows (it depends on what Workflow Processes are deployed on yoru platform)
  • Execute tasks at particular steps of an ongoing workflow in which the user is involved

3.5 Pending tasks indicator

This indicator is greyed-out when no task is waiting for the user; It is colored with a numeric indicator when tasks are waiting for a positive action of the user.

3.6 Managers menu

This menu gives access (depending on the user rights) to specialized tools called Managers. Each manager is built to work on a particular sub-set of content types (pages, files, tags…) for the whole site and allows an improved productivity for some operations. Note that most actions that can be done in managers can also be done in the selector, but the manager, being bigger offer more comfort to editors when dealing with large amount of data.

3.7 Cache menu

This menu gives the possibility to manually flush caches in Live Mode.

  • For the selected object in the Edit-Frame (or the page currently displayed if no item is selected)
  • For the full site (this may have a deep impact on performances)
  • For the whole platform (this may have a very deep impact on performances)

3.8 Trash button

This button gives access to the list of content items “marked for deletion” meaning that their deletion has been required by an author but is not definitively done.

3.9 Background jobs indicator / button

This indicator, greyed-out when no background job is running, displays a colored animated circle when a process is being executed by the platform, whoever triggered that process (a user action or something done by the system)

3.10 Clipboard button

This button is greyed-out when the clipboard is empty and colored when content has been copy or cut and then placed in the clipboard. When the clipboard is empty, you can click on the icon to see what content is stored in the clipboard, in case you forgot. Note that the clipboard can handle only one item (whatever its size) at a time.

3.11 User menu

This menu gives access to the User dashboard and to the logout function.

4 The Selector

The selector uses the left part of the browser window, it allows to

  • Select and switch the web project to work-on
  • Browse the repository for various content types
    • Pages
    • Components
    • Files / Images
    • Content items
  • - Select items to
    • Display them
    • Edit them
    • Insert them in pages
  • Users with special permissions can also access to the site settings

The selector starts with a drop-down list allowing to switch between web-projects.

The icon

 allows to refresh the Selector. To avoid automatic refresh on the site tree each time a change happens on the site, which could be very unpleasant and cause slowdowns if many editors are working at the same time, the page tree is refreshed only when

  • a page is added in the tree
  • a workflow is started or move forward
  • a publication is finished
  • the language is changed

Otherwise, if a refresh is needed the icon turns red inviting the user to click on it when he fel the need to have and updated tree.

The

 icon allows to fold the Selector. This can be useful if the site design exceed the available size of the Edit Frame for instance. Once folded the Selector remains hidden until the user manually choose to re-open it.

The selector then displays several tabs. As usual in Digital Experience Manager those tabs are submitted to permissions and are extensible. This document explains all existing tabs on a default installation but, depending on your role(s) and the configuration of your platform it is possible that :

  • You cannot see all the tabs
  • You can see tabs that are not explained in this document

Let’s review the different tabs one by one.

4.1 Site tree

This tab displays the pages manually created by authors, as a hierarchy. Basically, it is your sitemap that will be reflected in your site navigation. Pages can be managed and reordered in this tab.

4.2 Components (create new content)

This tab gives access to the components (content types and features) available on your site to create compose your pages and create new content. Components can be drag and dropped in the Edit Frame to create a new content of the selected type.

Components are organized into logical groups. The different component groups can be opened or closed with the little arrows that precede their names, displaying elements that make them up, and that can be inserted into the pages.

Note that the groups can be modified by administrators, some can be removed, others added. Here, we use the default version installed with Digital Experience Manager


An input field above the component list can be used to quickly filter components as text is entered. When you know the name of the component you are looking for, it is faster to filter the list to make it appear, rather than browsing it by opening and closing component category nodes. The entry in the filter field does not need to be validated, as it operates in real time as text is entered.

4.3 Content (out-of-context)

Display editorial content items that are not directly stored inside pages (“in context”) but under one of the two following locations:

  1. Contents folder: a directory auto-created by Digital Experience Manager for each web site, just under the site root node.
  2. Personal folder: a directory located in the user profile (see the documentation about the dashboard)

4.4 Files (and images)

Display binary content items that are stored in:

  1. Files folder: a folder auto-created by Digital Experience Manager for each web site, just under the site root node.
  2. Personal folder: a folder located in the user profile (see the documentation about the dashboard)

By clicking a folder in the upper part of the window, all the file-type's (images, videos, documents) contained in the folder are displayed. If a folder contains nothing but sub-folders, the sub-folders will not be displayed in the lower window. Image files are shown as thumbnails with the name and dimensions in pixels. Other file types are shown with an icon representing their extension, filename and author name.

As soon as the files are displayed, you can select them and place them in the desired location on your page with a simple drag and drop operation.

4.5 Search

This tab handles full-text searches of any type of content, including all binaries you can browse with the File manager. Several options are available to simplify search and make it faster:

  • The standard operators AND, OR, NOT
  • Quotes to search for a specific phrase ( "content manager")
  • The wildcard character * is allowed (Flo* -> Florence, Flower, etc)

To speed up your searches, you can make them more specific and restrict them:

  • To part of the tree by specifying the departure point of the search (Page picker)
  • To a language by selecting from the available languages in a drop-down menu
  • To a specific editorial content type by selecting from the various types from a drop-down menu

You can also refine the search scope by choosing a date range (start date – end date) or a duration (in months). Those dates or duration will be compared to the chosen metadata: creation date, modification date or publication date.

Content items listed in the search results can be selected, and inserted into the current page with a simple drag and drop. The original content is neither moved, nor modified. This action simply creates a reference (an alias) to the content.

4.6 Categories (find by)

This tab is separated into two parts.

The upper part displays the categories tree (managed by administrators), and makes them available for selection. Clicking a category, displays in the lower section all content items on which this category is applied

Content items listed in the lower part can be selected, and inserted into the current page with a simple drag and drop. The original content is neither moved, nor modified. This action simply creates a reference (an alias) to the content.

4.7 Channels

This tab allows authors to select a channel.

The selected channel will impact the Edit Frame, reformatting the page to display it as if called in the selected device.

Note that it is not a simple static simulation; editors can continue to work on the content exactly as if no channel selection is applied.

The Channel selector allows to change the device orientation and provides detailed information about the selected device (width and height, flash support, resolution…)

4.8 Site Settings

This tab is visible only by users with special permissions to manage global site settings. The site administration topic is covered in a separate document and is not, in fact, really related to Edit Mode while accessible through the Edit mode for ergonomic reasons; If you have access to this tab, please read the Site Administration documentation available on our site http://www.jahia.com/documentation-and-downloads/editors-documentation

5 The Edit frame

The Edit Frame uses the main part of the browser window, it displays the page currently selected in the Selector.

The Edit Frame is topped

6 The Edit-Engine

The Edit-Engine is the name of the form-based UI the authors use to edit their content items and set their behavior like rights, taxonomy or SEO.

The Edit-Engine is nearly the same whatever the type of content authors are editing. Some small differences can occur in one tab or another to match specifics of a given content type but the structure of the interface and main features remains the same.

As a consequence, as soon as you’ll master the Edit-Engine and become familiar with it working with Digital Experience Manager becomes very easy.

The Edit-Engine appears when double-clicking on an item in the Edit Frame or when choosing “Edit” in the various contextual menus that can be called doing a right-click when an item is selected in the Edit Frame or in some tabs of the Selector.

It is composed of a first line that identifies the content object and its type, then the different tabs we will review one by one in this chapter.

If several languages are activated on the web site, a language switcher appears on the right side.

Below the tabs line appears the detail of the Edit-Engine itself.

6.1 Edit-Engine tabs review

6.1.1 Content

The Edit-Engine always opens on this tab. It allows to change the value of the different fields that compose the content item, you could say the “actual content” of the item.

Often, there will be no need to switch to a different tab.

Simply enter the desired values into the field at your disposal. Once the entry is made, you can confirm by clicking the "Save" button at the bottom of the engine, or continue your editing in one of the other tabs available.

NOTE: Unless you click on the “Save” button, changes are not taken into account by the system. You can switch from one tab to another without losing your changes, but if you close your browser, your session expires (usually after 30 mins of inactivity) or if you click "Cancel" no changes will be taken into account by Digital Experience Manager

6.1.2 Metadata and tags

Each content object has metadata used to describe the details contained within the content object. Metadata is also used to perform advanced searches, such as filtering. Most fields are captured automatically by Digital Experience Manager and are not manually editable, like creation date or the author name. Some additional fields, like keywords or description, can be manually updated.

Try to avoid bad HTML code when publishing online articles. Make sure you always clean your HTML code!

Since version 7.1 the tags have been moved to this panel (and the previously dedicated panel has been removed) as tags are clearly a type of metadata.

To add a tag on a content, just type the desired word(s) then click the add button. The tag name will appear instantly with a red cross to delete it if necessary.

You can add several tags at once, using commas as separators between each of them

A tag can contain one or several words

The tag field is enhanced with assisted typing, as soon as you start typing 2 letters in the tag field, Digital Experience Manager will suggest a list of existing tags starting with those letters

A new Site Administration panel has been created to allow site administrators and authors with proper rights to manage all the tags applied on the site, both by authors and by visitors (if your site uses folksonomy and public tagging features). Please refer to the Site Administrator Guide to have detailed information about this tags management panel and associated features.

6.1.3 Layout

The Layout tab lets you control the placement of content entered within the page. As explained in the first chapter, the content may have many different display formats (views) but also various options which allow authors to control the final visual presentation.

The options tab display may vary depending on the type of content that is being edited, but two main cases can be identified: the general case (by default it is applicable to all content types except lists) and lists. A dedicated document provides more details about the layout management.

6.1.4 SEO

This tab allows you to define additional URLs for content-item and even to choose the default URL to use when the content or page is called. This is an important SEO factor.

6.1.5 Categories

This tab displays the tree of available categories you can use to classify and enrich content with meaningful concepts. The categories are managed by administrators, authors can not create new categories here, but just use them.

6.1.6 Options:

The Options tab has some additional options usually added to meet the specific needs of your platform. As these are customizations, it is not possible here to detail the specific options available for your platform. If these options are available and useful to your editorial work, it is likely that specific explanations will be provided by the administrators of your platform.

6.1.7 Live Roles

This tab offers the possibility to set the rights of users and groups on the site content once published (once in the Live workspace).

6.1.8 Edit Roles

This tab displays the roles which have editing permissions. It works exactly the same as the Live Roles GUi but act on staging content. Most often the roles listed here will grant advanced permissions such as write, modify or delete content and/or access to specific tools or tabs.

Most editors won’t have access to this tab at all, and will be entitled to manage the Live Roles only.

6.1.9 Usages

This tab is purely informative and provides a detailed summary of where content is used. As the same content can be integrated into multiple pages within a site or several sites, this tab is useful for determining where all occurrences are located, allowing an editor to know how changing content on one page will impact multiple pages. The first column lists the URL of the page and a link to it, the second column shows where the object is stored on the root server.

6.1.10 History

This tab is usually reserved for managing editors, webmasters, and administrators. It provides a list of events that have occurred during the life cycle of the content.

6.1.11 Visibility

This tab gives the capacity to control different conditions to make the content visible or not once published. Those conditions does not conflict or by pass the permissions. A user or group with no read permission will never see the content or page, but a user or group with read permission will only see the content or page only if the specific condition(s) defined in this tab are successfully resolved. The primary usage if this tab is to control Time based publishing.

6.1.12 Workflow

This tab allows you to manage workflow relative to content and processes imposed by Digital Experience Manager to submit a request for publication. An Administrator can override this default setting so that a site-specific workflow can be implemented.

This tab is rarely available to individual content creators. Its use is typically restricted to advanced webmasters and reviewers whose mission is to manage the site or portions of the site, not just to manage content.

6.1.13 Channels

This tab allows you to control for which channels, set of devices or specific device the content item should appear or not.

6.2 Form Fields

Digital Experience Manager provides various user interfaces to manage different types of content.  Currently, Digital Experience Manager offers 7 types of fields; each field type can use different data entry options:

  • Simple text (called "Small Text" in the Jahia vocabulary): text with less than 255 characters
  • Rich Text (called "Big Text" in the Jahia vocabulary):  A field with unstructured text content and an unlimited number of characters (including HTML). This field can be edited by WYSIWYG HTML editors installed in Jahia to facilitate insertion of content (by default Jahia integrates a FCK text editor http://www.fckeditor.net/).
  • Integer Field: A whole number.
  • Float Field: Any number (fraction, decimal, etc.)
  • Boolean Field: True or False
  • Date field

Reference Field: This field type makes it possible to store a reference to an element present in the data repository. It is generally associated with an interface which allows target elements to be selected.

6.2.1 Simple text or “small text’

The field “small text” is the most widely used in Jahia and limited to 255 characters.
The following is a basic example (the title field)

Jahia supports Unicode characters enabling the use of special characters (Cyrillic, Greek, Japanese, Arabic, etc.).

Text fields also support HTML if necessary; however no text editor is provided for editing. As mentioned previously, the field "small text" can have several presentations including enabling the selection of values. For example, instead of allowing the author to manually insert a choice among limited options, a drop-down list may be proposed

6.2.2 Rich Text Field or "Big Text"

The "Big Text" field is similar to the "Small Text" field, except it does not have a character limit. This field is typically used to edit areas of unstructured content. Jahia comes with a default WYSIWYG HTML editor named CK Editor:

CK Editor allows editors to apply styles and layouts on texts, as when working with a standard text processor like MS Word.

Here users can also edit the HTML source of the content by clicking the Source button.

6.2.3 Long or Integer Field

Integer field allows you to insert a whole number.

6.2.4 Double or float field

Float field lets you insert any number with decimals.

6.2.5 Boolean Field

The Boolean field lets you select between two values : true or false.

6.2.6 Reference Field

The reference field allows you to create a link to an item stored on the server, in the data repository. Most of the time, it's a link to images, files, or pages, but it can also be another content item.

The field can be accessed by clicking on it, which opens a selection window that displays only applicable content types for selection. To remove (reset) the value of the field, click on the cross at the right-end of the field.

The File Picker, Image Picker and Content Picker are reference fields.

File picker displays all types of files

Image picker displays only images

The Content picker allows you to select any type of content, including web pages, files, images…

Jahia systematically manages internal links.  If a page is deleted, the link field will also disappear to avoid broken links. This check is not performed for external links (the “Link Checker” module in Jahia Administration tools can be used to validate external links).

6.2.7 Date field

The date field allows you to easily insert a date.

Click on the calendar icon to display a pop-up calendar to select the date in a more visual way.

Article composed with one of the best online HTML tools. Please purchase a htmlg membership to stop adding links to the edited documents.