Tags widget | MVC

You use the Tags widget to display tags on your page. You use tags filter content by clicking different tags from the list of tags displayed on the webpage.

For details about tags, see Use tags.

Configure the Tags widget

After you place the Tags widget on your page, open the widget designer by clicking the Edit button in the upper-right corner of the widget.

In the Tags dialogue, configure configure what tags are displayed and how:

• All tags
  All tags will be displayed in the list.

• Selected tags...
  A custom selection of tags is displayed. To select one or more tags you want to display, click the Select button.

• Only tags used by content type...
  A custom selection of tags is displayed. Only tags assigned to the selected content type items will be displayed in the list.

• Show item count
  The count of all items to which the tag is assigned is displayed.

• Show empty tags
  Tags that are not assigned to any item are displayed.

• Sort tags
  By default, tags are sorted by their title (A-Z). You can select a different sorting criterion:

  • By Title (A-Z)
  • By Title (Z-A)
  • As set manually
    This option is available only when you have selected specific tags using Selected tags… option. If you select As set manually, tags are displayed in the selected order.
  • As set in Advanced mode
    To sort the list of tags by property that is not defined in the sort dropdown menu, you must add a new sorting expression in the designer’s Advanced mode. For example, to sort tags using the Description property of tags, navigate to Advanced » Model and, for SortExpression, add Description ASC. As a result, in the sort dropdown menu, the As set in Advanced mode option is selected by default.

• Template
  Select the template you want to use to list tags on the webpage.

  • SimpleList
    The widget displays tags in a vertical list.
  • TagCloud
    The system tags in a horizontal list. The more items are tagged with a tag, the larger font the system uses to display this tag.
  • CloudList
    The system tags in a vertical list. The more items are tagged with a tag, the larger font the system uses to display this tag.

• CSS classes
  Expand More options section to specify CSS class names and apply additional CSS classes to the Tags widget.

Display custom classification

PREREQUISITES: You must create custom classifications first. For more information, see Create custom classifications.

To display a custom simple list classification, you can use the Tags widget. Complete the following:

1. Place the Tags widget on a page and click the Edit button in the upper-right corner of the widget.
2. Go to Advanced » Model.
3. In the TaxonomyId property field, set the ID of the classification you want to display.
4. In the TaxonomyProviderName property field, enter the provider name of the classification you want to display.
5. In the FieldName property field, enter the name of the content type field that contains the classification.
6. Click Save.

Advanced settings

In Advanced settings, you specify individual properties of the widget - the TemplateName. This property gets the template you chose in the Template dropdown menu.

Model settings

Model settings display all properties directly bound to the Tags widget model. Access these properties by clicking the Model button in Advanced settings and configure them:

• BaseUrl
  Gets the URL name of the page whose content you want to filter using tags.
  This page can be either the same page on which the Tags widget is placed, or it can also be another page. For example, you can display the tags on one page of your website, but if the user clicks a tag, the system opens another page and filters its content.

  NOTE: You must enter the URL name in the following format ~/. For example, if the title of the page is About us, the automatically generated URL name is about-us (in case you have not changed it). In BaseUrl input field you must enter ~/about-us.

• ContentId
  Use this property if you want to only show  tags that are assigned to a specific content item. To do this, specify the content item ID. For example, if you want to only show tags that are assigned to a news item News 1, specify its ID in the ContentId property. In the Only tags used by content type... option select News.

• ContentProviderName
  If you have more than one provider added to the selected content type, you can use a provider different than the default one. To do this, specify the name of this provider.

  NOTE: If you leave this property value empty, the default provider is used.

• ContentTypeName
  Gets the content type you chose in the Only tags used by content type... option:

  • Telerik.Sitefinity.News.Model.NewsItem
  • Telerik.Sitefinity.Blogs.Model.BlogPost
  • Telerik.Sitefinity.Libraries.Model.Image
  • Telerik.Sitefinity.Libraries.Model.Document
  • Telerik.Sitefinity.Libraries.Model.Video
  • Telerik.Sitefinity.Lists.Model.ListItem

• CssClass
  Gets and sets an additional CSS class.

• DynamicContentTypeName
  If you selected a dynamic content type in Only tags used by content type... option, the content type name will be populated in this property.

• FieldName
  Gets the name of the property that contains the taxonomy.

• SerializedSelectedTaxaIds
  In case tags are specifically selected, the IDs of the selected tags are serialized and populated in this property. For example: ["3f47d0b8-2d22-6e58-888c-ff0000bfc4e0"]

• ShowEmptyTaxa
  Gets whether to show tags that are not assigned to any item.

• ShowItemCount
  Gets whether to show the count of all items to which the tag is assigned.

• SortExpression
  Adds additional sorting expression for the tags. The default value is Title ASC.

• TaxaToDisplay
  Gets the value you selected in the Which tags to display? option:

  • All
    This is the default option.
  • Selected
  • UsedByContentType

• TaxonomyId
  Specifies the taxonomy ID which taxons will be displayed. By default, the selected taxonomy is Tags.

• TaxonomyProviderName
  If you have more than one provider added to the selected taxonomy, you can use a provider different than the default one. To do this, specify the name of this taxonomy provider.

  NOTE: If you leave this property value empty, the default provider is used.

• UrlKeyPrefix
  Gets or sets the URL key prefix, which is used when building and evaluating URLs together with the ContentView controls.

• UrlEvaluationMode
  Use this property to specify the URL evaluation mode filter - the URL segments or query string. The supported options are:

  • UrlPath 
    This is the default option. The URL has the following structure:
    http://[sitefinity]/page/-in-tags/tags/site1-tag1
  • QueryString 
    Generates the URL in the following format:
    http://[sitefinity]/page?taxonomy=tags&propertyName=tags&taxon=site1-tag1

• TaxaCountLimit
  Use this property to specify the maximum number of taxa to be displayed.