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')"
      }
    }
  ]
}

1 Answer 1

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')"
                    }
                }
            ]
        }
    ]
}
2
  • 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
    Commented Mar 25, 2020 at 8:32
  • instead of using visibility style property use display property. check this for more clarification and differences. Commented Mar 25, 2020 at 12:43

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.