1

I am creating a custom card display in gallery format. So - far - EVERYTHING is looking great. My data is grouped on client name. What I want to do is pull a URL from the list row that points to the client team assignment PDF.

Below is my code - with www.google.com as the URL currently used with my teamwork Fluent icon. What I'm trying to do here is put in the href a value from the list record column "TeamSheetURL". Before you say it... putting "[$TeamSheetURL]" does not work. And I can't find an example of being able to pull other row data into the header outside of what is being grouped on.

      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "style": {
                "padding": "5px 5px 5px 5px",
                "font-weight": "500",
                "font-size": "16px"
              },
              "txtContent": "@group.fieldData.displayValue"
            },
            {
              "elmType": "a",
              "attributes": {
                "href": "http://www.google.com",
                "target": "_blank"
              },
              "children": [
                {
                  "elmType": "span",
                  "attributes": {
                    "iconName": "teamwork"
                  }                  
                }
              ]
            }
          ]
Improve this question
1
  • What is the data type of TeamSheetURL column? Also, make sure you are using correct internal name of your column as JSON formatting expects internal names. Commented Aug 2, 2022 at 5:40

1 Answer 1

Reset to default
0

The solution was to use the groupProps:headerFormatter JSON definition. What I did learn from it was that in order to get multiple field values to display in the group header, you need to use a field that has the combination of values, delimited. The view should group on that field. Then you use some tricks to separate the values when displaying the header.

Here's what that section looks like:

"groupProps": {
"headerFormatter": {
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "flex-wrap": "wrap",
        "display": "flex",
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "border-radius": "6px",
        "align-items": "center",
        "white-space": "nowrap",
        "overflow": "hidden",
        "margin": "1px 4px 4px 1px"
      },
      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "style": {
                "padding": "5px 5px 5px 5px",
                "font-weight": "700",
                "font-size": "24px"
              },
              "txtContent": "=substring(@group.fieldData.displayValue, 0, indexOf(@group.fieldData.displayValue,'|'))"
            },
            {
              "elmType": "span",
              "style": {
                "padding-left": "5px",
                "display": "=if(substring(@group.fieldData.displayValue, indexOf(@group.fieldData.displayValue,'|')+1, indexOf(@group.fieldData.displayValue,'|')+2)=='|', 'none', 'inline')",
                "font-weight": "600",
                "font-size": "16px"
              },
              "txtContent": "='(IM Contact: ' + substring(@group.fieldData.displayValue, indexOf(@group.fieldData.displayValue,'|')+1, lastIndexOf(@group.fieldData.displayValue,'|')) + ')'"
            }
          ]
        }
      ]
    }
  ]
}

},

Improve this answer

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.