Forum Discussion

Dread73's avatar
Dread73
Brass Contributor
Jul 11, 2024

JSON Formatting Text to a Choice Pill

Hi Guys,

I have a very simple thing I just can't work out how to do. I have a column called Warranty Expiration with a date. I have a Status field with very simple JSON formatting:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "style": {
        "color": "=if([$WarrantyExpiration] <= @now, 'red', if([$WarrantyExpiration] < @now + 2592000000, 'orange', 'green'))"
      },
      "txtContent": "=if([$WarrantyExpiration] <= @now, 'Expired', if([$WarrantyExpiration] < @now + 2592000000, 'Due Soon', 'Current'))"
    }
  ]
}

 and it's working fine ... I have green text 'Current' for anything longer than 30 days away, Orange for under 30 days, and Red for Expired.

 

Ideally what I'd like is instead of just coloured text, is to have some coloured choice like pills i.e. Green Pill with Current written in it, Orange Pill with Due Soon, and a Red Pill saying expired.

Sounds simple - but I have no idea. Any help is appreciated! 😉





SharePoint Online

2 Replies

  • Rob_Elliott's avatar
    Rob_Elliott
    Silver Contributor
    Jul 12, 2024

    Dread73 you can do it with the following JSON (my date column is called Arrival):

     

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=if(Number([$Arrival]) == 0, '', if([$Arrival] < @now, 'Expired', if([$Arrival] > @now && [$Arrival] < addDays(@now, 30), 'Due Soon', 'Current')))",
  "style": {
    "background-color": "=if(Number([$Arrival]) == 0, '', if([$Arrival] < @now, 'red', if([$Arrival] > @now && [$Arrival] < addDays(@now, 30), '#f0750f', 'teal')))",
    "color": "white",
    "box-sizing": "border-box",
    "padding": "4px 8px 5px 8px",
    "border-radius": "20px"
  }
}

     

     

     

    Rob
    Los Gallardos
    Microsoft Power Automate Community Super User.
    Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)

Resources