Conditional JSON formatting of button in SharePoint List

[Peter_K]

Hi everybody

I am looking for a solution for a formatting problem in one of my sharepoint columns. 

In one column I have a button which triggers a flow. 

I am aiming for a visability of the button in correlation of two other columns. I have allready achieved to make the button visible if the approval status is pending and hide it if the approval status is approved or rejected. 

However I want the visibility to be dependend on another column (choice field) as well. In this column my users can choose document types (offer, report, ...)

My goal is to only make this button visible for special document types and an approval status=pending. 

Currently I am using this formatting in JSON:

{

  "elmType": "button",

  "txtContent": "Version freigeben",

  "customRowAction": {

    "action": "executeFlow",

    "actionParams": "{\"id\": \"#\"}"

  },

  "style": {

    "border": "none",

    "background-color": "blue",

    "color": "#ffffff",

    "cursor": "pointer",

    "visibility": {

      "operator": "?",

      "operands": [

        {

          "operator": "==",

          "operands": [

            "[$_ModerationStatus]",

            "Pending"

          ]

        },

        "visible",

        "hidden"

      ]

    }

  }

}

My goal is to ad another condition to the visibility, unfortunatley I don't know how this is done. 

Thanks in advance

Peter

[#2 · Accepted solution]

@Peter_K 

{
"elmType": "button",
"txtContent": "Get Approved",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\":\"86dfdf10-8d99-4914-8e98-fe4b21ed7e34\"}"
},
"style": {
"background-color": "purple",
"color": "white",
"visibility": "=if(([$ModerationStatus] == 'Pending') && ([$DocumentType] == 'Offer'),'visible','hidden')"
}

}

check this sample .. I got rid of the Operator and used a simple if statement.  only change to visibility property.

[#3]

@Maruthi Gadde 

Thank you, that is exactly what I was looking for. 

Only one more thing: can i put multiple values in my if condition?

I want the button to be visible if: 

ModerationStatus = pending

Documenttyp = Offer OR Schedule OR List...

[#4]

@Peter_K  

@Maruthi Gadde 

I have exactly that question. My problem is that my organization is multilingual. 

I display the button only when _ModerationStatus is draft and I have a flow that takes care of the rest. 

But the text content of _ModerationStatus is language specific. So for swedes, the draft status is called "Utkast". I also have other languages to check for. 

I have been experimenting with that line above:

"visibility": "=if(([$_ModerationStatus] == 'Draft')'visible','hidden')"

But I cannot grasp how to make more values match for it to be visible. The obvious solution is that if the value was numeric, it would be language independent.. 

[#5]

@Peter K @Maruthi Gadde

I found the solution here https://sharepoint.stackexchange.com/questions/260974/column-formatting-and-or-conditions 

So my line is this:

"visibility": "=if([$_ModerationStatus] == 'Utkast','visible',if([$_ModerationStatus] == 'Draft','visible','hidden')" 

This seems to do the trick. 

The basic syntax for if is this: (taken straight from Stack Exchange)

if(Condition, ResultIfTrue,ResultIfFalse)

//OR (like you have it)
if(
    condition1,
    resultIfTrue,
    if(
        condition2,
        result-If-c1-False-And-C2-True
        result-If-c1-False-And-C2-false
    )
)

//So, here's the AND:
if(
    condition1,
    if(
        condition2,
        result-If-c1-true-And-C2-True
        result-If-c1-true-And-C2-false
    ),
    result-if-c1-false

So big thanks to @Maruthi Gadde for giving me a BIG piece of the puzzle and to Stevish over at Stack Exchange for providing me with the last and final piece.  

[#6]

Hi @MatsWarnolf 

not sure if I understood your solution... or at least with me it doesn't work:

I want to show the Flow button only if the STATUS column is NOT OK and if the ELLEGIBLE FOR APPROVAL column is Yes.

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

"elmType": "button",

"txtContent": "Get approval",

"customRowAction": {

"action": "executeFlow",

"actionParams": "{\"id\": \"99934f4d-182a-4aad-8b78-08a6b3c9727e\"}"

},

"style": {

"background-color": "green",

"color": "white",

"visibility": "if([$Status]=='NOT OK','visible',if([$Elegibleforapproval]=='Yes','visible','hidden'))"

}

}

Can you help sort it out what am I doing wrong?? Thanks!

[#7]

@evaristo1904 The way you've got the visibility line at the moment the if statement is saying if the status column is equal to Yes then visible, but if the Status column is not equal to Yes then if the EligibleforApproval column is equal to Yes then visible, otherwise hidden.  That's not correct and not what you're trying to achieve.

You need to be using && for the and as follows:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Get approval",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"d0a539c4-cb12-4873-a2d7-7150882e4235\"}"
  },
  "style": {
    "background-color": "#f14717",
    "color": "#ffffff",
    "outline": "transparent",
    "border-width": "1px",
    "border-style": "solid",
    "border-color": "transparent",
    "cursor": "pointer",
    "font-size": "12px",
    "visibility": "=if(([$Status] == 'Not OK') && ([$EligibleforApproval] == 'Yes'),'visible','hidden')"
  }
}

As you can see it's a much more simple syntax and is easier to get right. So the result below only shows the button where the Status = Not Ok and EligibleforApproval =Yes

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
If I've answered your question or solved your problem, please mark this question as answered. This helps others who have the same question find a solution quickly via the forum search. If you liked my response, please consider giving it a thumbs up. Thanks.

[#8]

@RobElliott 

much simpler indeed. It works great! :)

Thanks a lot!

[#9]

Hi,
I'm trying something similar, but can't get it to work.
I want the button to show if the value of column ShareBim360 = Yes.

In my case it's just ignoring and showing on every row.....
Any ideas?

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"txtContent": "Share to Bim360",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"bce75e04-998b-4600-b829-7370d6a2ee15\"}"
},
"style": {
"background-color": "#468259",
"color": "white",
"visibility": "=if(([$ShareBim360] == 'Yes'),'hidden','visible')"
}
}

[#10]

@rolanddaane your if statement on the visibility line is the wrong way round, it should be:

"visibility": "=if(([$ShareBim360] == 'Yes'),'visible', 'hidden')"

Rob
Los Gallardos
Intranet, SharePoint, Website and Power Platform Manager (and classic 1967 Morris Traveller driver)

[#11]

Hi mate, thanks!

I took an example of yours, and I really like the buttons!
If I use the below the buttons shoe on no line, even if the value of ShareBim360 contains Yes

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"txtContent": "Share to Bim360",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"bce75e04-998b-4600-b829-7370d6a2ee15\",\"headerText\":\"All Things REI\",\"runFlowButtonText\":\"Publish Now\"}"
},
"style": {
"background-color": "#008082",
"color": "white",
"border-radius": "0 15px",
"visibility": "=if(([$ShareBim360] == 'Yes'),'visible', 'hidden')"
}
}

[#12]

BTW, On the column Filename I have something similat, and that does work:
the filename is not allowed to have 2 minus signs (eg --)
The filename that's generated based on metadata from user is formatted like BC1234-BAM-XX-YY-ZZ-A-001.docx and all the elements must be present before someone can trigger the approval flow.

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"color": "=if(indexOf(@currentField, '--' )<1, 'Green', if(indexOf(@currentField, '--' )>0, 'grey', 'black'))",
"font-size": "1.12em"
}
}

[#13]

I can't get this to work.

it looks like the if statement is ignored. If I change the order of visible and hidden the button either shows or is invisible regardless if ther is Yes in the evaluated column.

my 2 columns are simply 1 line of text. Is there maybe something I need to configure?

it's really a pitty because now the button shows on every row, even folders(where it shouldn't)