3

I have a sharepoint list being used in a visual way with the "Gallery/Cards" view format:

different views

Let's say for example I have a field in an entry that doesn't need to have information and another field that does have information. The field that does not have information still shows up on the card view with a "-", like this:

cardview

What I wanted was for the whole information, including column name, not to appear in that specific card or any future card that has no information in a given cell. Here's a rough example of what I would like it to appear as:

ideal

Is this possible? I've tried manipulating the json so that I could create a condition in which all divs would appear on the cards only if the variable had any information on it, but I can't seem to get the syntax right.
Thank you in advance!

2 Answers 2

2

I faced the same issue, I solved it adding the css property display: none if the value is null, like this:

"elmType": "div",
"style": {
  "display": "=if([$Machine] == '', 'none', 'block')"
},
1

I think you can do that by updating the original JSON of the Gallery view.

In the original JSON, to show the value, "=if ([$Machine] == '', '-', [$Machine])" has been used, which now has been replaced with "=if ([$Machine] == '', '', [$Machine])".

Also, to show the column name, in the original JSON, "[!Machine.DisplayName]" been used. However, when I applied conditional (if) to display, it didn't work. So, had to hard-code the column display name with condition, that is, if column has a value then show the display name, otherwise not.

{
  "height": 165,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "=if ([$Title] == '', '', 'Title')"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if ([$Title] == '', '', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "=if ([$Name] == '', '', 'Name')"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Name]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Name] == '', '', [$Name])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "=if ([$Machine] == '', '', 'Machine')"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Machine]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Machine] == '', '', [$Machine])"
              }
            ]
          }
        ]
      }
    ]
  }
}

enter image description here

3
  • Wow that's exactly it, thank you so much. It did however raise another issue which is the divs won't collapse on their own, leaving a gap inbetween like in the third card. Do you think that's fixable? Thanks! Dec 21, 2020 at 9:06
  • I think that is doable. However, in that case, your card size might not remain the same anymore, so rows might not be aligned. I will try that and let you know later today Dec 21, 2020 at 13:21
  • Yes for the purpose of what I'm trying to achieve that wouldn't be a problem. Thank you. Dec 21, 2020 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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