How to enable content tags for a content app - 5 UI

Deprecated

This content tagging been deprecated since Magnolia 6.0. It is part of the Magnolia 5 UI framework.

For the updated implementation, see How to enable content tags for a content app in Magnolia 6 UI instead.

This page explains how to enable content tagging in a content app so that authors can add tags to content items.

Genre tags

The dx-core-demo-webapp contains an example of how to use the Content Tags module. In this page, we show how the Tours app has been modified to enable tagging for tours, and we also provide general instructions and code samples showing how to enable tagging in other apps (Contacts app example).

Make sure your bundle contains the Content tags modules (magnolia-content-tags-core and magnolia-content-tags-ui).

You can enable content tags in a new content app or in one that already exists. In the examples below, we modify existing apps using decoration. We assume that you are familiar with Magnolia content apps and Definition decoration.

Enabling tagging in content apps

Update the configuration of your content app subapps to enable content tagging.

You may also register the workspace in the configuration of the content-tags module to ensure that dependencies are managed across workspaces when you delete data.

Browser subapp

You must update your Browser subapp descriptor to be able to:

  • Add tags to existing content items.

  • Display applied tags.

  • Search content items by tag in the search view.

Author catalog app

To do so:

  1. Set the property subAppClass to info.magnolia.contenttags.shortcut.TagShortcutAwareBrowserSubApp.

  2. Add the action info.magnolia.contenttags.dialog.OpenTagDialogActionDefinition and make it available for the content items for which you want to enable tags.
    If you give the action the name addTags, the system automatically provides a translation for the default language (English). If you are using a different name or if you want to change the default translation (Add tags), provide an i18n key.

  3. Make sure the views of the Workbench have columns to display the tags: on the view search set the property implementationClass to info.magnolia.contenttags.app.contenttool.search.TagSearchPresenter.

When decorating your content app later, make sure you select the proper node type in the decoration of the browser subapp. (See lines 12-13 in both examples below concerning the browser subapp.)

And make sure you to use the proper node names in the action bar sections. (See lines 17-20 in both examples below concerning the browser subapp.)

Detail subapp

You must update your Detail subapp descriptor so that authors can then add tags while creating or editing a content item.

Detail subapp

To do so:

  1. Add a field of type info.magnolia.contenttags.form.field.TagFieldDefinition

  2. Add an action with the action class info.magnolia.contenttags.form.action.SaveDialogWithTagsActionDefinition

When decorating your content app later, make sure you check the path of nodes from the name of the editor (line 1) to the fields (line 5) in the decoration of the detail subapp. In particular, names for tabs within a form very often vary among different apps.

Configure content dependency in the content-tags configuration

This step is optional but recommended; it ensures JCR data sanity and improves user experience.

Add a configuration node for the workspace - the workspace used by the content app for the content items to which you add tags. This ensures, thas when you delete a tag from the Tags app, the system checks for occurrences of these tags on registered workspaces, it shows notifications about these occurrences and, if you agree, it removes references of the tags on content items in registered workspaces.

Delete item confirmation

To enable this, add a node to /modules/content-tags-core/config/taggableWorkspaces:

Content tags module

Property Description

taggableWorkspaces

required

The root node for content dependencies registration.

<name>

required

An arbitrary name to register one taggable workspace.

appMapping

required

Use the pattern apps:<appname>:<detail-subapp-name>

workspace

required

The name of the workspace of the content app.

Examples

In both examples, we use decoration to adapt the subapps.

Definition decoration is a mechanism that allows you to change the properties and subdefinitions of an existing definition item.

Decoration is used to modify the existing tours app. The decoration is applied by the module magnolia-travel-demo-content-tags (see the Tours app example). As an additional example, we have decorated the contacts app (see the Contacts app example).

In addition to decorating the apps, we also adapt the content-tags configuration to ensure that dependencies are managed across workspaces when you delete data.

Tours app

The tours app is defined in the submodule magnolia-travel-tours of the demo-projects module. The demo-projects module is bundled with various preconfigured Magnolia webapps and bundles.

The demo-projects module for DX Core webapp comes with the submodule magnolia-travel-demo-content-tags. This submodule decorates the Tours app.

Registering the tours workspace in content-tags configuration

Registering the tours workspace in content-tags configuration

Contacts app

In this example, we enable tagging in the Contacts app. This example does not rely on the demo modules. Compare this example with the Tours app decoration example above – note that the decoration for the Contacts app is very similar.

Decoration of the browser subapp

/using-content-tags/decorations/contacts/apps/contacts.subApps.browser.yaml

Decoration of the detail subapp

/using-content-tags/decorations/contacts/apps/contacts.subApps.detail.yaml

Registering the contacts workspace in content-tags configuration

Registering the contacts workspace in content-tags configuration

You can clone the Contacts app decoration from our bitbucket.

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules