Decorator for Data Type Select

Functionality is available in BigPicture 8.0.21 and higher.

A new Data Type Select decorator - STYLED_TEXT - can recognize an HTML-based code and visualize it accordingly.
The user can now change the color of lozenges of selections to make information clear, similar to how Objectives can be color-coded on a Roadmap.

The available <span style=“…”>…</span> tags are:

['background']: /^(#([0-9a-f]\{3})\{1,2})|([a-z]+)$/i
['border']: /^[0-9]+[a-z]+ [a-z]+ (#([0-9a-f]\{3})\{1,2})|([a-z]+)$/i
['color']: /^(#([0-9a-f]\{3})\{1,2})|([a-z]+)$/i
['font-weight']: /^[a-z]+$/
['padding']: /^([0-9]+[a-z]+\s)*[0-9]+[a-z]+$/
['display']: /^[a-z\-]+$/
['text-align']: /^[a-z]+$/
['min-width']: /^[0-9]+[a-z]+$/
['-moz-border-radius']: /^[0-9]+[a-z]+$/
['-webkit-border-radius']: /^[0-9]+[a-z]+$/

Examples:

<span style="background: #ddfade; border: 2px solid #93c49f; color: black; font-weight: bold; padding: 4px 12px; -moz-border-radius:3px; -webkit-border-radius: 3px; display: inline-block; text-align:center; min-width:60px;">Green</span>

<span style="background: #ffd; border: 2px solid #f7df92; color: black; font-weight: bold; padding: 4px 12px; -moz-border-radius:3px; -webkit-border-radius: 3px; display: inline-block; text-align:center; min-width:60px;">Yellow</span>

<span style="background: #ffe7e7; border: 2px solid #df9898; color: black; font-weight: bold; padding: 4px 12px; -moz-border-radius:3px; -webkit-border-radius: 3px; display: inline-block; text-align:center; min-width:60px;">Red</span>

Using the Styled Text decorator:

Create a Custom Field of the 'Select list (single choice)' type
Add the HTML code as an option in your single select for the options to be displayed, then set the field in the scope to be "Styled text" as shown on the screenshot below:

For Text/Lozenge decorators, the field will display the code; once the Styled Text is selected, the field will display the chosen style.

Just as you would normally add options to your single select list, you can add different entries with the HTML code, making them display different colors.

Example of setup:

Thus, with three options (each containing a different HTML code), three different colors are displayed in BigPicture:

For safety reasons, the new decorator ignores the remaining part of the code.

BigPicture Suite

Support for Atlassian Server Products (and apps like BigPicture) has ended in February 2024.

Decorator for Data Type Select