1

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')"
      }
    }
  ]
}
New contributor
taylope1 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
0

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 Mar 25 at 8:32
  • instead of using visibility style property use display property. check this for more clarification and differences. – Ganesh Sanap Mar 25 at 12:43
  • Please Upvote(^) and accept as an Answer as it helped you. – Ganesh Sanap Mar 25 at 12:44

Your Answer

taylope1 is a new contributor. Be nice, and check out our Code of Conduct.

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.