UX Spec: Channel Properties
- Matt Birtch
- Abhijit Singh
Important Links
Overview
Channel properties allow for structured meta data to be added to channels that can optionally be shown as labels in the channel header. This unlocks use cases for data classification and channel organization using organizational conventions and color coding.
System admin setup
Similar to the Customer User Properties will be configured, admins can configure preset channel properties to be available for use throughout the system. This can be accessed from the System Console > System Properties page.
Empty state
Before any channel properties are added, an empty state displays stating ‘No properties added yet’.
Adding a property
When Add property is clicked, the property type is chosen first. For channel properties, we will limit the property type to Select and Multi-select for starters.
Once the type is selected the property table displays with a row added for the new property and the name field focused in the edit property popover. From here users can change the type or delete the property. This behaves the same as Boards properties.
Adding options for select and multi-select properties
Admins can add preset values for end users to select from when the property is in use in a channel.
Editing a select or multi-select option
By default, options use the standard 8% center channel color for the background and center channel color for the text label.
Users who have edit access for property options can click on an option chip to open the menu and select a preset color or custom color using a hex code.
Locking/unlocking a property
Channel properties can be locked to prevent editing by other lower-level users. This means that all values and details of the property cannot be edited,
When a property is locked, lower-level users cannot:
Rename the property
Reorder the property
Edit any property values
Delete any property values
Changed the property’s configuration settings
Showing/hiding a property
Admins can set the default visibility setting. Again, if the property is locked, its visibility cannot be overridden by lower-level users.
More actions
The ••• icon button reveals a menu with more available actions. For channel properties, this will include Required toggle, Show in Channel Header toggle, Allow new values toggle, Duplicate property, and Delete property.
Show in Channel Header toggle
When Show in Channel Header is enabled, the value selected for the property will show up in the channel header. Nothing will show in the channel header for this property if no value is selected.
The channel header value tag should show the property name in a tooltip while hovering on it in the header.
Default value for this will be disabled.
Allow new values toggle
When Allow new values is enabled, new values will allowed to be added for this property at lower levels.
Default value for this will be disabled.
Duplicating a property
When Duplicating a property is selected, a new property will be created with the same name, values, and configurations.
Deleting a property
When Delete property is selected, a confirmation modal displays. Users must confirm before the property is deleted.
Permissions
Under Manage Public channels and Manage Private channels, a new permission will be needed: Manage channel properties.
Team settings
In order to apply channel properties at scale, a new section called Properties in the Team settings modal will be available. In addition, system admins can apply this from the System console > Teams > Team detail view.
Options available in Team Settings might be different per user/role based on what is configured in the System Console permissions. Assuming a user is allowed to edit Channel Properties at the Team level, they will have the following options.
Adding a property
This will work exactly like it does in the System Console (documented above).
Adding options for select and multi-select properties
If Allow new values is enabled in the system console, users will be able to add values for this property at the team level.
Locking/unlocking a property
If a property is locked at the System Console level, users will not be able to edit it or unlock it at the team level. The lock icon will be shown in the disabled state for properties locked at the system console level.
If a property is unlocked at the System Console level, users will be able to edit the property and change its configuration. They will also be able to lock it at the team level, which will make it locked and non-editable at the channel configuration level.
Default state when creating a new property or duplicating a property at the team level will be unlocked.
Editing a select or multi-select option
Only allowed for properties unlocked at the System Console level.
Show in Channel Header toggle
Only configurable for properties unlocked at the System Console level.
Allow new values toggle
Only configurable for properties unlocked at the System Console level.
Duplicating a property
When Duplicating a property is selected, a new property will be created with the same name, values, and configurations.
Channel Settings
Properties can also be configured at the channel level if that has been allowed in the permission scheme.
NOTE: If this new Channel settings modal is not yet available when we begin work on channel properties, Ideally we would incorporate it as part of this initiative since the channel menu is already getting too long.
Options available in Channel Settings might be different per user/role based on what is configured in the System Console permissions. Assuming a user is allowed to edit Properties at the Channel level, they will have the following options.
Adding a property
This will work exactly like it does in the System Console and Team Settings. (documented above).
Adding options for select and multi-select properties
If Allow new values is enabled in the team settings, users will be able to add values for the property at the channel level.
Locking/unlocking a property
Properties cannot be locked/unlocked at the channel level. The locked/unlocked icon will always be shown in the disabled state at the channel level.
If a property is locked at the System Console or Team level, users will not be able to edit it or change its configuration..
If a property is unlocked at the Team level, users will be able to edit the property and change its configuration.
Properties created at the Channel level will not have a lock/unlock option.
Editing a select or multi-select option
Only allowed for properties unlocked at the System Console and Team level.
Show in Channel Header toggle
Only configurable for properties unlocked at the System Console and Team level.
Allow new values toggle
Only configurable for properties unlocked at the System Console and Team level.
Duplicating a property
When Duplicating a property is selected, a new property will be created with the same name, values, and configurations.
Displaying Channel Properties
Channel info RHS
Properties configured for a channel will always show in the Channel info RHS, right above where the Channel header is shown. As per the permission scheme, certain or all users may be able to edit property values directly from the RHS.
Channel header
Properties that have been set to Show in channel header will display in the channel header to the left of the channel header description. Only the property values will display. When hovering, the property name will also display.
A maximum of 3 properties can be shown in the header. Any properties that cannot be shown upfront in the header due to space constraints or if more than 3 properties are configured to be shown, they might be nested inside a single +X tag. Hovering on this tag should show all hidden properties and their configured properties.
Thread Sidebar header
Properties that have been set to Show in channel header will display also display in the Thread sidenar header, right next to the Channel name, to make sure users are aware of the properties for the channel that they are conversing in through the thread. If the thread sidebar width is less than 640px, the properties will be shown in a collapsed state that only shows their color. Hovering on the property will trigger a tooltip showing the actual property-value pairs.
Find channels modal
Mobile