0

I have a modern list with three columns WorkItemLink (which is a hyperlink), LinkType (which is a text telling if the work item is a bug, feature or something else) and TeamProject (which is the name of the team project) and I have been trying to figure out how json view formatting works for modern list. What I would like to do is to display some neat tiles dashboard that the user can click on to report work items or query work items for various teams.

I have found an example for tiles formatting that I have adapted, and the result is really big rectangular tiles in the List mode, which seems to be default. In the Tiles mode smaller tiles are shown, but I cannot seem to set this as default mode, so the end-user will always be presented to the ugliest version of the list. How can I avoid this?

Also, I would rather show the icons showing the link type first or above the work item link, since the text for the work item hyperlink will vary in length. Currently the icon is "jumping".

Now I am only showing one team project per view, to simplify things.

This is how it looks now, in list mode: In List mode

...and in Tiles mode: In Tiles mode

    {
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideColumnHeader": "true",
  "hideSelection": true,
  "tileProps": {
    "hideSelection": true,
    "width": "180",
    "height": "150",
    "formatter": {
      "elmType": "a",
      "attributes": {
        "href": "[$WorkItemLink]",
        "target": "=if([$NewTab] == true, '_blank', '')"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
          },
          "style": {
            "display": "flex",
            "flex-wrap": "wrap",
            "min-width": "180px",
            "min-height": "150px",
            "margin-right": "10px",
            "margin-top": "10px",
            "box-shadow": "2px 2px 4px darkgrey"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "text-align": "center",
                "margin": "auto"
              },
              "children": [
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "sp-row-title "
                  },
                  "txtContent": "[$WorkItemLink.desc]"
                },
                {
                  "elmType": "div",
                  "attributes": {
                    "iconName": "=if([$LinkType] == 'Requirement', 'OpenEnrollment', if([$LinkType] == 'Feature', 'FavoriteList', if([$LinkType] == 'Task', 'Assign', if([$LinkType] == 'Query', 'Questionnaire', if([$LinkType] == 'Bug', 'WorkItemBug', 'ErrorBadge'))))",
                    "class": "ms-fontSize-su"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "rowFormatter": {
    "elmType": "a",
    "attributes": {
      "href": "[$WorkItemLink]",
      "target": "=if([$NewTab] == true, '_blank', '')"
    },
    "style": {
      "width": "100%"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "width": "100%",
          "min-height": "150px",
          "margin-right": "10px",
          "margin-top": "10px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center",
              "margin": "auto"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-title "
                },
                "txtContent": "[$WorkItemLink.desc]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "=if([$LinkType] == 'Requirement', 'OpenEnrollment', if([$LinkType] == 'Feature', 'FavoriteList', if([$LinkType] == 'Task', 'Assign', if([$LinkType] == 'Query', 'Questionnaire', if([$LinkType] == 'Bug', 'WorkItemBug', 'ErrorBadge'))))",
                  "class": "ms-fontSize-su"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
0

As far as I know, the Tiles view cannot be set as default in SharePoint lists. This is a known issue and MS is probably not spending any time to solve it as there will be a new tool - called

1
  • Hmm, a cliff hanger... The tool will be called what?
    – Gunilla
    Aug 28 '20 at 5:27

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.