Posted by & filed under Communication.

This blog post is a follow-up to: “Let’s talk about Labels” posted on January 27, 2016. In that post we discussed the topic of creating a user generated label, for a managed resource. In this post we’ll discuss how to apply a new or existing label.

Creating a label recap, a label is:

  • A “Key:Value” pair (KVP.)
  • Created in the UI using a pair of text input fields.
  • Added to a stored list of labels, once created.
  • Used to support rich search and filter options.

Selecting a label to apply

The same form inputs used to create a new label are used to select an existing label. Existing labels are presented within a drop-down list. Type-ahead functionality shows the list of existing values. A label may be created and applied as a single action, or as discrete actions.

Labels-apply

1. The user can filter a list of existing labels, using type-ahead, to make a label selection.

Application use cases might warrant creating and applying a label as a single action. In this case, the user could select a preexisting label or enter a new one in the input field.

Selecting an object

To apply a label users must associate a label with an object (such as a resource or an alert.) To do this, they need to first select an object, objects, or an object set, by:

  • A. Selecting objects from a list of objects, in a content view.
  • B. Isolating an object, or object set, through navigation, filtering, or searching.

A. Selecting an object, then applying the label.

Objects selected from a content view (Table, List, or Card view) list, generally use buttons or kabob drop down menus to initiate an action. After the user makes the selection a Modal dialog is presented which allows the user to apply a pre-existing label, or create and apply a new one. The action is named “Apply” if the action is to apply an existing or new label. For additional terminology recommendations, see: https://www.patternfly.org/styles/terminology-and-wording/#action-labels

Examples

Table

The label actions may be included in a table, similar to any other viable action. For general information about tables, see: https://www.patternfly.org/patterns/table-view/table-example3

1.  Offer the label action either through a button, or an action within the kabob drop menu , when checkboxes are presented in the table. Otherwise use the row action button or kabob.

List

Labels actions may be presented as a list view action. For general information about lists see: https://www.patternfly.org/patterns/list-view/

list-view-example2

(1) Use the data toolbar actions button or kabob drop menu, when checkboxes are presented.

list-view-example3

(1) If no checkbox selection is offered,  use the row action button or kabob.

Card

Design in progress, see: http://pf-blog-patternfly.b9ad.pro-us-east-1.openshiftapps.com/actions-on-a-card/

Labels actions may be offered in a card view using similar affordances as those used in List and Table.

Copy-of-Card-View

(1) Use the data toolbar actions button or kabob drop menu, when checkboxes are offered.
(2) If no checkbox selection is offered,  use the inline action buttons or kabob provided on the card.

Submitting the Apply action

From a Table, List or Card view, when the user selects the label action a modal dialog will be presented. The dialog includes the label selection input fields. Selected labels are applied when saved.

  • A modal dialog is spawned from the corresponding action button, or menu, selections.
  • Input fields allow users to select Label values to enter or select KVP’s.
  • Labels that already exist will be filtered by the characters that the user enters in the input box.
  • If the application allows, the user may also enter new label values where none exist.
  • For details about form input behavior, see: “Let’s talk about Labels”

ModalWindow1

For general information about the PatternFly modal, see:https://www.patternfly.org/widgets/#modal

B. Navigating to an object, then applying a label.

To apply a label, rather than explicitly selecting an object it is also possible to isolate a particular object or object set. When a user navigates or filters to an object they have implicitly selected that object.  Actions applied from these detailed views will be applied to that particular object or object set.

Inline form fields

Label fields may be presented as inline form elements, within a larger form. Inline form fields could also be used for editable content views, such as a Details screen.

Examples:
In a form that uses page-level, form submit buttons.

inline-pageLevel

In screens where dynamic, inline actions are used. For example, a editable Details screen where you might want to offer some inline form elements.

inline-dynamo

Inline action-link

An inline “action-link” can be used for “ad-hoc” label creation. It consists of an icon and linked text. When the user clicks on the action-link a pop-over menu will be presented. To learn more about pop-overs, see: https://www.patternfly.org/widgets/#popover

  • Use when other object-selection options (tables, lists, etc.) are not suitable.
  • Use in areas where screen space is constrained.

Example

Inline action link, presented in a Dashboard Card. Clicking the link launches a pop-over dialog with form inputs.

pop-overex
Dashboard Card – https://www.patternfly.org/dashboard-card-base/

The Applied Label

Once a label has been applied it should be represented in the UI in the same screen context, so the user has confirmation that the action was taken. Depending on the context it could be presented as a list of applied labels, or as an iconic shortcut representation. Present applied labels as a list when horizontal screen space supports it.

Listed Examples

If space is constrained use an expand collapse panel to hide/show up to three rows of labels. Provide a text link to engage the expand/collapse action. If possible, specify the number of remaining labels that are hidden from view.

If there’s more than three rows of labels, use a jump link to move the user to the bottom of the screen where the full list of labels can be presented. Presenting the full list at the bottom of the screen allows screen content to be prominent.

* Note: Visual design pending.

Screen Shot 2016-02-29 at 11.00.03 AM

Iconic Shortcut Example

  • When space is extremely constrained, an icon may be used to indicate that labels have been applied.
  • List the applied labels, vertically, in a pop-over.

Labels-popover

Open Issues

  • Using the Label form fields: Could the user skip the key field and use only the value to identify an existing label?
  • The card view design is not available yet, this post includes an example of a pending design.

Leave a Reply

(will not be published)