I have a question about SAMPLE Timeline in Board View

[AdaEddev]

Thank you for asking a question! Use the sections below to submit a question ONLY if it's related to samples in this repo. If you have an issue or question about list formatting or its documentation, please submit it at https://aka.ms/spdev-issues

• Questions that do not follow the below template will automatically be closed
• All questions are welcome - let us know what's on your mind!
• This repo is maintained by volunteers (not Microsoft). Please be courteous and patient. 🙂
• Include sufficient details and context.
• If you have multiple questions please submit them separately so we can track resolution.
• Screenshots are always helpful (just paste any images right here in the question)

DELETE EVERYTHING ABOVE AFTER READING - THANKS!

Sample (which sample are you talking about)

Timeline in Board View

Question (the more details, the better)

Hello how can I hide/delete the Unassigned items (0) column? and any ideas on how to select colour for the circles instead of using the theme? THank you

[tecchan1107]

Hi @AdaEddev .

Hello how can I hide/delete the Unassigned items (0) column?

Unfortunately, I don't think it is possible to hide/delete unassigned items😢 If you would like to request it, please send feedback or vote for it on the Microsoft Feedback Portal. There was a similar request. https://feedbackportal.microsoft.com/feedback/idea/4df4d1cb-001c-ee11-a81c-000d3a7a48db

and any ideas on how to select colour for the circles instead of using the theme?

The circle is colored using the class ms-bgColor-themePrimary. By changing this part, the color can be changed.

If you want to color-code the Month column (the internal name of the column is Month) according to its value, change it as follows

"attributes": {
          "class": "=if([$Month]=='January','ms-bgColor-orange',if([$Month]=='February','ms-bgColor-purpleLight','ms-bgColor-themePrimary'))"
        }

Please refer to SharePoint Online CSS Classes for the classes to be set.

[tecchan1107]

If you want to change it by HTML color code or color name instead of class, change the following place (line 53) in the following code.

"background-color": "=if([$Month]=='January','orange',if([$Month]=='February','#8a2be2','#87cefa'))"

Sample Code (Click to open/close)

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/board-formatting.schema.json", "hideSelection": true, "formatter": { "elmType": "div", "style": { "display": "flex", "justify-content": "center", "align-items": "flex-start", "width": "100%" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "border-left": "10px solid", "padding-left": "18px", "margin-top": "1px", "width": "85%", "position": "relative" }, "children": [ { "elmType": "div", "txtContent": "[$Title]", "inlineEditField": "[$Title]", "style": { "font-weight": "bold", "font-size": "20px" } }, { "elmType": "div", "txtContent": "[$Description]", "inlineEditField": "[$Description]", "style": { "padding-top": "10px", "padding-bottom": "10px" } } ] }, { "elmType": "div", "style": { "width": "30px", "height": "30px", "border-radius": "50%", "position": "absolute", "left": "-1%", "background-color": "=if([$Month]=='January','orange',if([$Month]=='February','#8a2be2','#87cefa'))" } } ] } } ```

[AdaEddev]

Thank you soooo much! You are great!