Tagging Content in Agility

Agility makes it easy for you to tag content, and reference other content lists within your item(s).

This practice is extremely useful for tagging content, creating relationships between content items, or nesting lists within an item. The image above shows a sample blog post thats tagged with Sports and Lifestyle tags.

With the various Render UI options Agility provides, you can allows your editors to search and select one, or many item(s) to tag and link your content to.

In this example, we will show you how to use the Linked Content field to tag content, more specifically, we will show you how to tag Blog Post articles with Tags.

Setting up Tagging

  • Create your Content Models
  • Initialize list of Tags
  • Initialize a list of Blog Posts
  • Create a Blog Post
  • Tag your Blog Post

Creating your Content Models

First, we will create our Content Models for Blog Posts and Tags.

Tag Model

Create a Tag Model with a simple text field.

Once you've created your model, initialize a list of tags and create some content.

Blog Post Model

Next, you'll want to create a model for your Blog Posts. This model will contain the following fields:

  • Title - Text Field
  • Date - Date Field
  • Tags - Linked Content Field
  • Content - HTML Field

There are many ways to configure the Linked Content field type, and it is important to configure it in the way that works best for you.

Lets explore some of the Linked Content fields configuration options:

  • Link To: Select whether this will be linked to existing Content or if it should create new content which is unique and only accessible to this item.
  • Link Type: Select whether this will link to a whole list/item from Content or editors will select one or many items only from a list.
  • Render UI: Select how you want to render this linked content field for editors.
  • Content Selection: Force to a specific Content List or allow the user to select their own list.
  • Content Reference: Select the content you want to reference.
  • Show Embedded View of List: Renders a mini list-view of the linked content list, otherwise renders a link to the content list.

In this example, we went with the Search List Box UI. This will allow content editors to search for and select one or many items to link to or tag.

When you're done creating your Blog Post model, don't forget to initialize a new list of Blog Posts.

Create a Blog Post

Once your models are configured, you can proceed to create a new Blog Post to see the tagging functionality the Linked Content field provides.

You can see in the image above that when we start searching for a value; we are presented with possible results to select from our list.

When selected, you'll be able to see the tag(s) applied to your item. From there, you can open each tag to view or edit its content.

Sample API Response

Here's a sample of the API response with its tag(s):

{
  "contentID": 16,
  "properties": {
    "state": 1,
    "modified": "2022-07-08T14:18:06.507",
    "versionID": 31,
    "referenceName": "blogposts",
    "definitionName": "BlogPost",
    "itemOrder": 1
  },
  "fields": {
    "title": "My First Post",
    "date": "2022-07-08T00:00:00-04:00",
    "tags": [
      {
        "contentID": 11,
        "properties": {
          "state": 1,
          "modified": "2022-07-08T14:01:19.15",
          "versionID": 26,
          "referenceName": "tags",
          "definitionName": "Tags",
          "itemOrder": 2
        },
        "fields": {
          "title": "Sports"
        },
        "seo": null
      },
      {
        "contentID": 13,
        "properties": {
          "state": 1,
          "modified": "2022-07-08T14:01:28.367",
          "versionID": 28,
          "referenceName": "tags",
          "definitionName": "Tags",
          "itemOrder": 4
        },
        "fields": {
          "title": "Lifestyle"
        },
        "seo": null
      }
    ],
    "content": "<p>This is my first blog post!</p>",
    "tags_TextField": "Sports,Lifestyle",
    "tags_ValueField": "11,13"
  }
}

UI Options

Aside from the Search List Box UI we showed above, there are a few other Render UI Options available to choose from:

Checklist Box (Select Many)

Dropdown List (Select One)