1

I currently have the JSON formatting applied to a column:

{
  "$schema": "developer.microsoft.com/json-schemas/sp/…",
  "elmType": "div",
  "txtContent": "=if([$Review_x0020_Status] == '', '', '•')",
  "style": {
    "color": "=if([$Review_x0020_Status] == 'Not Due', 'green', if([$Review_x0020_Status] == 'OverDue', 'red', if([$Review_x0020_Status] == 'Approaching','yellow','white')))",
    "font-size": "2.5em"
  }
}

I want to add a component to align the text in the column to the vertical middle of the cell, something like:

  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "display": "table-cell",
    "text-align": "center",
    "vertical-align": "middle"

Can anyone help me to combine these two elements ?

1

Modify the JSON formatting as below.

{ 
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div", 
    "txtContent": "=if([$Review_x0020_Status] == '', @currentField, '• '+@currentField)", 
    "style": { 
        "color": "=if([$Review_x0020_Status] == 'Not Due', 'green', if([$Review_x0020_Status] == 'OverDue', 'red', if([$Review_x0020_Status] == 'Approaching','yellow','white')))",
        "font-size": "2.5em",
        "display": "table-cell",
        "text-align": "center",
        "vertical-align": "middle"
    } 
}

enter image description here

|improve this answer|||||
0

Considering @currentField in your second JSON is the value of Review Status as you need.

Try using below JSON Code:

If you want colored Text:

{ 
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div", 
    "style": {
        "text-align": "center",
        "vertical-align": "middle",
        "color": "=if([$Review_x0020_Status] == 'Not Due', 'green', if([$Review_x0020_Status] == 'OverDue', 'red', if([$Review_x0020_Status] == 'Approaching','yellow','white')))"
    },
    "children": [
    {
        "elmType": "span",
        "txtContent": "=if([$Review_x0020_Status] == '', '', '• '",
        "style": {
            "font-size": "2.5em"
        }
    },
    {
        "elmType": "span",
        "txtContent": "=if([$Review_x0020_Status] == '', '', [$Review_x0020_Status]"
    }]
}

If you want default color of list to Text:

{ 
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div", 
    "style": {
        "text-align": "center",
        "vertical-align": "middle"
    },
    "children": [
    {
        "elmType": "span",
        "txtContent": "=if([$Review_x0020_Status] == '', '', '• '",
        "style": {
            "color": "=if([$Review_x0020_Status] == 'Not Due', 'green', if([$Review_x0020_Status] == 'OverDue', 'red', if([$Review_x0020_Status] == 'Approaching','yellow','white')))",
            "font-size": "2.5em"
        }
    },
    {
        "elmType": "span",
        "style": {
            "color": "#666666"
        },
        "txtContent": "=if([$Review_x0020_Status] == '', '', [$Review_x0020_Status]"
    }]
}
|improve this answer|||||
  • Hi, any update on this? Is it working for you? If Yes, please accept this as an answer so that this question will not be shown in Unanswered questions, – Ganesh Sanap Sep 5 '19 at 9:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.