Page tree
Skip to end of metadata
Go to start of metadata

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

The magnolia-enterprise-pro-demo-webapp and the magnolia-enterprise-pro-demo-bundle for Magnolia 5.6+ contain 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 concerned 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.

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

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. Thi ensures, tha 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.

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

Node nameValue

 modules


 content-tags


 config


 taggableWorkspaces

com.example.templates.CustomTemplateDefinition

 <just-a-name>


 appMapping

app:tours:detail

 workspace

tours

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.

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 available since Magnolia 5.4 and is bundled with various preconfigured Magnolia webapps and bundles.

Since Magnolia 5.6, the demo-projects module for Enterprise Pro webapps comes with the submodule  magnolia-travel-demo-content-tags . This submodule decorates the Tours app.

Decoration of the browser subapp

/travel-demo-content-tags/decorations/tours/apps/tours.subApps.browser.yaml
subAppClass: info.magnolia.contenttags.shortcut.TagShortcutAwareBrowserSubApp

actions:
  addTags:
    class: info.magnolia.contenttags.dialog.OpenTagDialogActionDefinition
    icon: icon-tag
    availability:
      multiple: true
      rules:
        - name: IsNotDeletedRule
          implementationClass: info.magnolia.ui.framework.availability.IsNotDeletedRule
      nodeTypes:
        tour: mgnl:content

actionbar:
  sections:
    item:
      groups:
        editActions:
          items:
            - name: addTags

workbench:
  contentViews:
    list:
      columns:
        - name: tags
          class: info.magnolia.contenttags.column.TagsColumnDefinition
          propertyName: mgnl:tags
          width: 160
    tree:
      columns:
        - name: tags
          class: info.magnolia.contenttags.column.TagsColumnDefinition
          propertyName: mgnl:tags
          width: 160
    search:
      columns:
        - name: tags
          class: info.magnolia.contenttags.column.TagsColumnDefinition
          propertyName: mgnl:tags
          width: 160

      implementationClass: info.magnolia.contenttags.app.contenttool.search.TagSearchPresenter

Decoration of the detail subapp

/travel-demo-content-tags/decorations/tours/apps/tours.subApps.detail.yaml
editor:
  form:
    tabs:
      tour:
        fields:
          - name: mgnl:tags
            class: info.magnolia.contenttags.form.field.TagFieldDefinition
            i18n: true

actions:
  commit:
    class: info.magnolia.contenttags.form.action.SaveDialogWithTagsActionDefinition

Registering the tours workspace in content-tags configuration

Node nameValue

 taggableWorkspaces

com.example.templates.CustomTemplateDefinition

 tours


 appMapping

app:tours:detail

 workspace

tours

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
subAppClass: info.magnolia.contenttags.shortcut.TagShortcutAwareBrowserSubApp

actions:
  addTags:
    class: info.magnolia.contenttags.dialog.OpenTagDialogActionDefinition
    icon: icon-tag
    availability:
      multiple: true
      rules:
        - name: IsNotDeletedRule
          implementationClass: info.magnolia.ui.framework.availability.IsNotDeletedRule
      nodeTypes:
        tour: mgnl:contact

actionbar:
  sections:
    contact:
      groups:
        editActions:
          items:
            - name: addTags

workbench:
  contentViews:
    list:
      columns:
        - name: tags
          class: info.magnolia.contenttags.column.TagsColumnDefinition
          propertyName: mgnl:tags
          width: 160
    tree:
      columns:
        - name: tags
          class: info.magnolia.contenttags.column.TagsColumnDefinition
          propertyName: mgnl:tags
          width: 160
    search:
      columns:
        - name: tags
          class: info.magnolia.contenttags.column.TagsColumnDefinition
          propertyName: mgnl:tags
          width: 160

      implementationClass: info.magnolia.contenttags.app.contenttool.search.TagSearchPresenter

Decoration of the detail subapp

/using-content-tags/decorations/contacts/apps/contacts.subApps.detail.yaml
editor:
  form:
    tabs:
      personal:
        fields:
          - name: mgnl:tags
            class: info.magnolia.contenttags.form.field.TagFieldDefinition
            i18n: true

actions:
  commit:
    class: info.magnolia.contenttags.form.action.SaveDialogWithTagsActionDefinition

Registering the contacts workspace in content-tags configuration

Node nameValue

 taggableWorkspaces

com.example.templates.CustomTemplateDefinition

 tours


 contacts


 appMapping

app:contacts:detail

 workspace

contacts

You can clone the Contacts app decoration from our bitbucket.