Custom tile view with conditional formula

%3CLINGO-SUB%20id%3D%22lingo-sub-969886%22%20slang%3D%22en-US%22%3ECustom%20tile%20view%20with%20conditional%20formula%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-969886%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20working%20on%20developing%20a%20tile%20view%20for%20a%20listing%20of%20courses%20but%20getting%20stuck%20with%20some%20of%20the%20json%20formatting.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20a%20column%20%5B%24CompletedBy%5D%20that%20lists%20all%20users%20that%20have%20completed%20a%20course.%20What%20I%20would%20like%20to%20do%20is%20have%20the%20tiles%20be%20red%20if%20the%20current%20signed%20in%20user%20has%20not%20completed%20the%20course%20(i.e.%20name%20is%20not%20inside%20the%20column%20CompletedBy)%20and%20the%20tiles%20be%20green%20if%20the%20current%20signed%20in%20user%20has%20completed%20the%20course%20(i.e%20their%20name%20is%20inside%20the%20column%20CompletedBy).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20assistance%20would%20be%20greatly%20appreciated%2C%20below%20is%20what%20I%20have%20so%20far.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%7B%0A%20%20%22schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%3C%2FA%3E%22%2C%0A%20%20%22tileProps%22%3A%20%7B%0A%20%20%20%20%22height%22%3A%20%22250%22%2C%0A%20%20%20%20%22width%22%3A%20%22350%22%2C%0A%20%20%20%20%22hideSelection%22%3A%20false%2C%0A%20%20%20%20%22formatter%22%3A%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%22align-items%22%3A%20%22stretch%22%2C%0A%20%20%20%20%20%20%20%20%22margin-bottom%22%3A%20%2216px%22%2C%0A%20%20%20%20%20%20%20%20%22min-width%22%3A%20%22150px%22%2C%0A%20%20%20%20%20%20%20%20%22flex-grow%22%3A%20%221%22%2C%0A%20%20%20%20%20%20%20%20%22justify-content%22%3A%20%22space-around%22%2C%0A%20%20%20%20%20%20%20%20%22padding%22%3A%20%225px%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%2295%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22height%22%3A%20%2292%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23ffc83d%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22box-shadow%22%3A%20%220px%201.6px%203.6px%200%20%2300000024%2C%200px%200.3px%200.9px%200%20%2300000024%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22overflow%22%3A%20%22hidden%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22border-radius%22%3A%20%222px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22padding-left%22%3A%20%2216px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22padding-top%22%3A%20%2216px%22%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-bgColor-neutralLighterAlt%22%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text-align%22%3A%20%22left%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23ffc83d%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22font-size%22%3A%20%2218px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22font-weight%22%3A%20%22600%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22margin-bottom%22%3A%20%225px%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%5B%24Title%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23ffc83d%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22font-size%22%3A%20%2212px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22line-height%22%3A%20%221.8%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22sp-row-listPadding%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%5B%24Module%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23ffc83d%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22font-size%22%3A%20%2212px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22line-height%22%3A%20%221.8%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22sp-row-listPadding%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%5B%24Department%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22button%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22customRowAction%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22action%22%3A%20%22defaultClick%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22Take%20the%20Quiz%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22sp-row-button%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%3F%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%3D%3D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40me%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22none%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-969886%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Occasional Visitor

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"
                      ]
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
0 Replies