Description

Tagging (or ‘Labels’) allows a user to categorize content through keywords that they define, to a piece of information (such as a page, database record or a file).

Basic Flows

Tagging a singel item

Clicking the actions icon, then clicking the tag name will apply the tag and close the tags list.

Clicking on the tag text will assign tag and closed the popup.

Assigning one or more tags at once

Clicking the actions icon, then clicking the check boxes near tag name, clicking apply to execute selection and close list.

If the tags list is nested, checking that checkbox once, will select all the list tags, checking the checkbox once again will unselect all the list tags.

Types

Type	Usage	Image
categorize a piece of information	categorize, or organize items using keywords
field entry with multi select entitles	add multiple entitles to an entry filed such as ‘Attendees’	missing image

The system will come with a set of out of the box default tags (Top-down taxonomies), In addition you can enable users to create new tags (Bottom-up taxonomies).

Tag selector withoutTag selector without manage tags	Tag selector withTag selector with manage tags	Nested list

Usage & Behaviour

General guidelines

Tagging action

The tags selector appears within a-module list (missing from popup types)
Tags may be added to an entire page content or to a particular piece of information within a page such as tables records, list item and more.
Multiple or single tags can be used to categorize items.
Tags may be added to multiple items at once.

Tags elements presentation

Tags should be placed in close proximity to the content it is categorizing.
You may enable users to manage tags and create new tags (Bottom-up taxonomies) or not.
You may set the selector tags list as nested under ‘All’ item or leave it as a flat list.
Tags are shared within an organisation.
Tags should be used when
- You want to let the user categorised an item and make it easier to find it.
- The content on is possibly mapped into one or multiple categories.
- You want to let users organize their contributed data themselves.User conducts “item/s triage” to determine and mark: Relevancy, Grouping, Importance, Categorisation, Affiliation, Reporting.

Structure

The pattern is composed of:
- Add tags action
- Tags chips
- Tags selector
  - Search field
  - Nested / flat checkbox list
  - Actions
    - ‘Apply’ button
    - Manage tags (Optional)
    - Create new tag (Optional)

Placement and Positioning

Tags chips may be placed within detail panes, table cells and cards.
It’s recommended to spread out the tags chips as much as possible, in order to present out-front the different classifications.
In case the tags space is limited, several bags will be merged together:

Tags Placement	Image
Empty state
Tags are spread out tags
Last tags are merges
All tags are merges

Internal Logic

Assigned tags chips as well as selector checkbox list will be sorted alphabetic

States

Tags Chips

Tags selector

Default state
- ‘Apply’ button is disabused
- ‘Create New’ and manage tags are enabled
Upon one (or more) tag selection / deselection
- ‘Apply’ button will be enabled
- ‘Create New’ and manage tags are in disabused .

Search

Typing in the search field will activate a live search
By default the ‘Search’ field is in focus.

Interaction

Clicking (any) tag text or Add tags action button will open the tags selector dialog box
Hovering (any) tag chip changes the frame the frame to blue
- Hovering regular tag shows the remove icon ( X )
- Hovering regular tag text (left side) will change the text area background to dark gray.
- Hovering the remove icon (right side) will change icon ( X ) background to dark gray.
Clicking the remove icon ( X ) will remove the tag

Best practices

Wherever assigning tags is implemented it is vital to enable user also to filter by these tags.

It recommended to enable the ability to tag multiple items at once, on table and list pages where listed items are 'Taggable'

Filtering by tags

User will be able to filter by tags whenever tags are assigned to the page entities.

The filter panel (container) and filter chiclets follow the search panel cross system guilders.

The search panel tags list will be the same as the tags selector list structure( Flat/Nested)

Tags filter panel	Tags Filter chiclets

Tagging multiple items at once

On table and list pages, User will be able to ….

Managing tags (Optional capability)

Creating (defining) and managing bottom-up taxonomies tags, may be included or not in the tagging feature.
- Creating and managing bottom-up taxonomies tags may be an autorotation granted by rule.

Creating a new tag

By default the field is in focus, user will add his new tag and click ‘Create’.
The popup will close, add the new tag will already be assigned to entity.

Managing tags

Tags appear in a table, with Tag name, Indication of the tag is enabled or not, count of tagged items and actions.
User can Enable (enable to tag with) each tag (System and custom)