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')"
      }
    }
  ]
}
Was it helpful?

Solution

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')"
                    }
                }
            ]
        }
    ]
}
Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top