Json in sharepoint column help

Question

I am not a developer and need some help please. I currently have 2 columns in SharePoint that display buttons based on conditions. Both sets of JSON work just fine.

Basically I want to have only 1 column and based on some condition, apply the correct JSON to it. I think ideally I am after and if,then,else of the merged JSON's.

So, if condition is true use JSON 1, if not use JSON 2.

Can this be done? Here are my 2 JSON codes:

JSON 1:

{
  "elmType": "button",
  "txtContent": "Request this Software",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"08768563-511b-4f29-afd9-88d3e72a26d6\", \"headerText\":\"Confirm you want to request this software and that you have budget holder approval already\",\"runFlowButtonText\":\"Click Here To Confirm Request\"}"
  },
  "style": {
    "background-color": "blue",
    "color": "white",
    "visibility": "=if(([$VisibleButton] == true) && ([$Status] != 'Rejected') ,'visible','hidden')"
  }
}

JSON 2:

{
  "elmType": "a",
  "attributes": {
    "href": "@currentField",
    "target": "_blank"
  },
  "children": [
    {
      "elmType": "button",
      "txtContent": "Request this Software",
      "style": {
        "background-color": "purple",
        "color": "white",
        "visibility": "=if(([$VisibleButton] == false) && ([$Status] != 'Rejected') ,'visible','hidden')"
      }
    }
  ]
}

Ganesh Sanap - MVP · Accepted Answer · 2020-03-24 13:08:05Z

You can add both the JSON elements as children of single div element and then handle their visibility based on the conditions you can want to apply

Try using something like below:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "button",
            "txtContent": "Request this Software",
            "customRowAction": {
                "action": "executeFlow",
                "actionParams": "{\"id\": \"08768563-511b-4f29-afd9-88d3e72a26d6\", \"headerText\":\"Confirm you want to request this software and that you have budget holder approval already\",\"runFlowButtonText\":\"Click Here To Confirm Request\"}"
            },
            "style": {
                "background-color": "blue",
                "color": "white",
                "visibility": "=if(([$VisibleButton] == true) && ([$Status] != 'Rejected') ,'visible','hidden')"
            }
        },
        {
            "elmType": "a",
            "attributes": {
                "href": "@currentField",
                "target": "_blank"
            },
            "children": [
                {
                    "elmType": "button",
                    "txtContent": "Request this Software",
                    "style": {
                        "background-color": "purple",
                        "color": "white",
                        "visibility": "=if(([$VisibleButton] == false) && ([$Status] != 'Rejected') ,'visible','hidden')"
                    }
                }
            ]
        }
    ]
}

Amazing. Works brilliantly with one exception. The column is now effecrtively double width, allowing space for one button or the other. Is there a way they can occupy the same screen space so the column in 1 button wide? — taylope1
– taylope1, Commented Mar 25, 2020 at 8:32
instead of using visibility style property use display property. check this for more clarification and differences. — Ganesh Sanap - MVP
– Ganesh Sanap - MVP, Commented Mar 25, 2020 at 12:43

Stack Exchange Network

Json in sharepoint column help

1 Answer 1

Your Answer

Linked

Hot Network Questions

Json in sharepoint column help

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions