Widgets

Contents

Widgets are applications that expand functionality of Content Studio.

They can be found inside the Context Panel which can be assessed via the burger icon in the top right corner of Content Browse or Content Editor pages:

widgets panel button

The list of widgets can be accessed from the dropdown: the top 5 widgets are built-in, they are followed by custom widgets (if any are installed). On top of the dropdown is the text field enabling filtering the list by keywords.

widgets search

Built-in widgets

Details

The Details widget shows various properties of the selected content item. It was designed to provide all the basic information about the content and contains the following sections:

  • Content: The top section shows icon of the content with display name and full path;

  • Status: This section shows current content status, like New, Published etc.;

  • User access: This section lists all the permissions set for the selected content. Clicking on the Edit Permissions link will open the permissions dialog for updating content permissions;

  • Properties: This section shows useful metadata (application type, create/modified date etc.);

  • Page template: This section shows a page template used by this content (if set);

  • Attachments: This section shows links to binary attachments which can be downloaded with a single-click. An example of such a content can be seen below.

widgets details

Version History

A new version of content will be created each time you make changes to the content. Version History widget lists all versions of the content and allows comparing the versions and reverting content to a specific version. In addition to versions, the widget also shows publish and unpublish actions. Current content status is displayed in the Widget header.

To revert to the specific version, click on the version box to expand details, and then click the Revert button. Note that current version cannot be reverted and is therefore not expandable, as well as Publish/Unpublish actions.

Version history

By clicking the Version history icon you can compare the version with the current (or any other) version in the Compare versions modal dialog.

Version Comparison has been introduced in Content Studio 3.0.0 and requires XP 7.3.0 or higher.

Two dropdowns on top of the dialog contain the full list of versions: the left one (Older) is the one being compared, and the right one (Newer) is the one being compared against. By default the version you clicked will be selected in the left dropdown and current/active version will be selected in the right dropdown, but you can change the selection to compare any versions you like, as long as the "left" version is older than the "right" one.

By default, the dialog shows only differences between the selected versions, but you can see the entire content JSON by checking off Show entire content checkbox.

Version compare dialog
Both dropdowns have aliases on top of the list which you can use to compare a version with previous, next, published and current version without having to browse through the list.
Version aliases

The "kebab" menu icon on the right of each dropdown has just one option - "Revert" - to revert to this version.

Dependencies

Every content can have inbound and outbound dependencies, and this widget shows them. Simply put, the inbound dependency is something that uses the content, and the outbound dependency is something used by the content. For example, if there is a Shortcut, and it has a link to the Superhero site, the Shortcut is the inbound dependency for the site, and at the same time the Superhero is the outbound dependency for the Shortcut.

The inbound dependencies are listed above the content, and the outbound dependencies are listed below.

If there are no dependencies of a specific type, the widget will show No incoming dependencies.

If there are some dependencies, the button showing the total number of dependencies will be shown. The icon of the content type and a number of the dependencies of each content type will be shown below or above the button.

widgets dependencies

Clicking on the button will open a new browser tab showing the list of the content item’s dependencies, either inbound or outbound. If you click on the dependencies icon, then the same tab will open, but only the dependencies of the selected type will be shown in the list.

widgets dependencies filter

Emulator

This widget allows you to quickly preview the content on a number of different screen resolutions (desktop, mobile phone, tablet etc.)

The emulator widget won’t be available in the content wizard, if the content is not renderable, like a folder or a site without a template/controller.

Clicking on the emulation option will resize the preview. To reset the emulation, click on the Fill Size option.

widgets emulator

Components

The Components widget is only available inside a renderable content with Page Editor enabled.

The components widget manipulates the page content and contains two tabs.

Insert tab

Insert tab allows to drag and drop components onto the page. There are five types of components in total:

  • Layout. Enables adding a layout (container of other components) from one of the supported applications;

  • Part. Enables adding a part from one of the supported applications;

  • Text. Enables adding a text section and embedding images using Rich Text Editor which provides ample opportunities for editing, such as creating links, embedding images, videos and macros, applying WYSIWYG formatting etc;

  • Fragment. Enables adding one of reusable fragments to the page.

widgets components insert

Components tab

This tab enables configuration of the component selected on the page. The tab caption will change to reflect the type of the currently selected component. If nothing is selected, the tab caption will be Page.

For the Page, it is possible to select different controller or template or save the current controller as a template.

widgets components page

The Part component tab, for example, will allow you to replace the currently selected part or configure it (like selecting the Posts folder in the example below)

widgets components part

Custom widgets

Enonic XP allows you to easily build your own widgets and expand functionality of Content Studio. You can also install widgets from the Enonic Market.

Implementation of admin widgets is described here.

There are two interfaces currently supported by Content Studio: contentstudio.contextpanel and contentstudio.menuitem.

Context panel widgets

Widgets with interface contentstudio.contextpanel will be added to the widget dropdown inside the Context Panel and shown inside the panel when selected. Content Studio will send current branch, repository and id of selected content to this widget via query parameters of the GET request.

Sample XML for a widget with contentstudio.contextpanel interface:
<widget>
  <display-name>My widget</display-name>
  <description>This widget is for the Context Panel</description>
  <interfaces>
    <interface>contentstudio.contextpanel</interface>
  </interfaces>
  <allow>
    <principal>role:system.admin</principal>
    <principal>role:myapp.myrole</principal>
  </allow>
</widget>
widgets context panel

Top menu widgets

CS: 4.1.0 CS 4.1.0

Widgets with interface contentstudio.menuitem will expand the left-hand side menu of Content Studio. They are so-called "fullscreen widgets" which will take up the entire screen between the Content Studio header and the left-side menu. Widget icon will be automatically injected inside the sidebar menu when you deploy an application containing your widget.

Sample XML for a widget with contentstudio.menuitem interface:
<widget>
  <display-name>My widget</display-name>
  <description>This widget is for the Content Studio menu</description>
  <interfaces>
    <interface>contentstudio.menuitem</interface>
  </interfaces>
  <config>
    <property name="context" value="project"/>
  </config>
</widget>
widgets menu item
By specifying optional config as shown in the example above, you let Content Studio know that your widget is project-dependent and requires project selector in the header.

Contents