Forum Discussion

EDMM941320's avatar
EDMM941320
Copper Contributor
Oct 31, 2019

Custom tile view with conditional formula

Hello,

 

I am working on developing a tile view for a listing of courses but getting stuck with some of the json formatting.

 

I have a column [$CompletedBy] that lists all users that have completed a course. What I would like to do is have the tiles be red if the current signed in user has not completed the course (i.e. name is not inside the column CompletedBy) and the tiles be green if the current signed in user has completed the course (i.e their name is inside the column CompletedBy).

 

Any assistance would be greatly appreciated, below is what I have so far.

 

{
  "schema": "<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>",
  "tileProps": {
    "height": "250",
    "width": "350",
    "hideSelection": false,
    "formatter": {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "stretch",
        "margin-bottom": "16px",
        "min-width": "150px",
        "flex-grow": "1",
        "justify-content": "space-around",
        "padding": "5px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "95%",
            "height": "92%",
            "color": "#ffc83d",
            "box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
            "overflow": "hidden",
            "border-radius": "2px",
            "padding-left": "16px",
            "padding-top": "16px"
          },
          "attributes": {
            "class": "ms-bgColor-neutralLighterAlt"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "text-align": "left"
              },
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "color": "#ffc83d",
                    "font-size": "18px",
                    "font-weight": "600",
                    "margin-bottom": "5px"
                  },
                  "txtContent": "[$Title]"
                },
                {
                  "elmType": "div",
                  "style": {
                    "color": "#ffc83d",
                    "font-size": "12px",
                    "line-height": "1.8"
                  },
                  "attributes": {
                    "class": "sp-row-listPadding"
                  },
                  "txtContent": "[$Module]"
                },
                {
                  "elmType": "div",
                  "style": {
                    "color": "#ffc83d",
                    "font-size": "12px",
                    "line-height": "1.8"
                  },
                  "attributes": {
                    "class": "sp-row-listPadding"
                  },
                  "txtContent": "[$Department]"
                },
                {
                  "elmType": "button",
                  "customRowAction": {
                    "action": "defaultClick"
                  },
                  "txtContent": "Take the Quiz",
                  "attributes": {
                    "class": "sp-row-button"
                  },
                  "style": {
                    "display": {
                      "operator": "?",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "@me",
                            ""
                          ]
                        },
                        "",
                        "none"
                      ]
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
No RepliesBe the first to reply