SOLVED

Conditional JSON formatting of button in SharePoint List

%3CLINGO-SUB%20id%3D%22lingo-sub-464400%22%20slang%3D%22de-DE%22%3EConditional%20JSON%20formatting%20of%20button%20in%20SharePoint%20List%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-464400%22%20slang%3D%22de-DE%22%3E%3CP%20class%3D%22%22%3EHi%20everybody%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20looking%20for%20a%20solution%20for%20a%20formatting%20problem%20in%20one%20of%20my%20sharepoint%20columns.%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20one%20column%20I%20have%20a%20button%20which%20triggers%20a%20flow.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20aiming%20for%20a%20visability%20of%20the%20button%20in%20correlation%20of%20two%20other%20columns.%20I%20have%20allready%20achieved%20to%20make%20the%20button%20visible%20if%20the%20approval%20status%20is%20pending%20and%20hide%20it%20if%20the%20approval%20status%20is%20approved%20or%20rejected.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHowever%20I%20want%20the%20visibility%20to%20be%20dependend%20on%20another%20column%20(choice%20field)%20as%20well.%20In%20this%20column%20my%20users%20can%20choose%20document%20types%20(offer%2C%20report%2C%20...)%3C%2FP%3E%3CP%3EMy%20goal%20is%20to%20only%20make%20this%20button%20visible%20for%20special%20document%20types%20and%20an%20approval%20status%20%3D%20pending.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20Currently%20am%20using%20this%20formatting%20in%20JSON%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3C%2FP%3E%3CP%3E%26nbsp%3B%20%22elmType%22%3A%20%22button%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%22txtContent%22%3A%20%22Release%20version%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%22customRowAction%22%3A%20%7B%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%22Action%22%3A%20%22executeFlow%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%22actionParams%22%3A%20%22%7B%5C%22%20id%20%5C%20%22%3A%20%5C%22%20%23%20%5C%20%22%7D%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%7D%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%20%22Style%22%3A%20%7B%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%22border%22%3A%20%22none%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%22Background-color%22%3A%20%22Blue%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%22Color%22%3A%20%22%23ffffff%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%22cursor%22%3A%20%22pointer%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%22visibility%22%3A%20%7B%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%22Operator%22%3A%20%22%3F%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%22Operands%22%3A%20%5B%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%7B%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%22Operator%22%3A%20%22%3D%20%3D%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%22Operands%22%3A%20%5B%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%22%5B%24%20_%20ModerationStatus%5D%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%22Pending%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%5D%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%7D%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%22visible%2C%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%22Hidden%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%5D%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%20%7D%3C%2FP%3E%3CP%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMy%20goal%20is%20to%20ad%20another%20condition%20to%20the%20visibility%2C%20unfortunatley%20I%20don't%20know%20how%20this%20is%20done.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20in%20advance%3C%2FP%3E%3CP%3EPeter%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-464400%22%20slang%3D%22de-DE%22%3E%3CLINGO-LABEL%3EDocument%20Library%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-469982%22%20slang%3D%22en-US%22%3ERe%3A%20Conditional%20JSON%20formatting%20of%20button%20in%20SharePoint%20List%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-469982%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F322445%22%20target%3D%22_blank%22%3E%40Peter_K%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22button%22%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22Get%20Approved%22%2C%3CBR%20%2F%3E%22customRowAction%22%3A%20%7B%3CBR%20%2F%3E%22action%22%3A%20%22executeFlow%22%2C%3CBR%20%2F%3E%22actionParams%22%3A%20%22%7B%5C%22id%5C%22%3A%5C%2286dfdf10-8d99-4914-8e98-fe4b21ed7e34%5C%22%7D%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22background-color%22%3A%20%22purple%22%2C%3CBR%20%2F%3E%22color%22%3A%20%22white%22%2C%3CBR%20%2F%3E%22visibility%22%3A%20%22%3Dif((%5B%24ModerationStatus%5D%20%3D%3D%20'Pending')%20%26amp%3B%26amp%3B%20(%5B%24DocumentType%5D%20%3D%3D%20'Offer')%2C'visible'%2C'hidden')%22%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Echeck%20this%20sample%20..%20I%20got%20rid%20of%20the%20Operator%20and%20used%20a%20simple%20if%20statement.%26nbsp%3B%20only%20change%20to%20visibility%20property.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-470194%22%20slang%3D%22de-DE%22%3ERe%3A%20Conditional%20JSON%20formatting%20of%20button%20in%20SharePoint%20List%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-470194%22%20slang%3D%22de-DE%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F184117%22%20target%3D%22_blank%22%3E%40Maruthi%20Gadde%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%2C%20that%20is%20exactly%20what%20I%20was%20looking%20for.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOnly%20one%20more%20thing%3A%20Can%20i%20put%20multiple%20values%20in%20my%20if%20condition%3F%3C%2FP%3E%3CP%3EI%20want%20the%20button%20to%20be%20visible%20if%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EModeration%20Status%20%3D%20pending%3C%2FP%3E%3CP%3EDocument%20type%20%3D%20Offer%20OR%20Schedule%20OR%20LIST%20...%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-828776%22%20slang%3D%22en-US%22%3ERe%3A%20Conditional%20JSON%20formatting%20of%20button%20in%20SharePoint%20List%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-828776%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F322445%22%20target%3D%22_blank%22%3E%40Peter_K%3C%2FA%3E%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F184117%22%20target%3D%22_blank%22%3E%40Maruthi%20Gadde%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20exactly%20that%20question.%20My%20problem%20is%20that%20my%20organization%20is%20multilingual.%26nbsp%3B%3C%2FP%3E%3CP%3EI%20display%20the%20button%20only%20when%20_ModerationStatus%20is%20draft%20and%20I%20have%20a%20flow%20that%20takes%20care%20of%20the%20rest.%26nbsp%3B%3C%2FP%3E%3CP%3EBut%20the%20text%20content%20of%20_ModerationStatus%20is%20language%20specific.%20So%20for%20swedes%2C%20the%20draft%20status%20is%20called%20%22Utkast%22.%20I%20also%20have%20other%20languages%20to%20check%20for.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20been%20experimenting%20with%20that%20line%20above%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%22visibility%22%3A%20%22%3Dif((%5B%24_ModerationStatus%5D%20%3D%3D%20'Draft')'visible'%2C'hidden')%22%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3EBut%20I%20cannot%20grasp%20how%20to%20make%20more%20values%20match%20for%20it%20to%20be%20visible.%20The%20obvious%20solution%20is%20that%20if%20the%20value%20was%20numeric%2C%20it%20would%20be%20language%20independent..%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-829056%22%20slang%3D%22en-US%22%3ERe%3A%20Conditional%20JSON%20formatting%20of%20button%20in%20SharePoint%20List%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-829056%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F62902%22%20target%3D%22_blank%22%3E%40Peter%20K%3C%2FA%3E%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F184117%22%20target%3D%22_blank%22%3E%40Maruthi%20Gadde%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20found%20the%20solution%20here%26nbsp%3B%3CA%20title%3D%22SharePoint%20Stack%20Exchange%22%20href%3D%22https%3A%2F%2Fsharepoint.stackexchange.com%2Fquestions%2F260974%2Fcolumn-formatting-and-or-conditions%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsharepoint.stackexchange.com%2Fquestions%2F260974%2Fcolumn-formatting-and-or-conditions%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20my%20line%20is%20this%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%22visibility%22%3A%20%22%3Dif(%5B%24_ModerationStatus%5D%20%3D%3D%20'Utkast'%2C'visible'%2Cif(%5B%24_ModerationStatus%5D%20%3D%3D%20'Draft'%2C'visible'%2C'hidden')%22%20%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3EThis%20seems%20to%20do%20the%20trick.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20basic%20syntax%20for%20if%20is%20this%3A%20(taken%20straight%20from%20Stack%20Exchange)%3C%2FP%3E%3CP%3Eif(Condition%2C%20ResultIfTrue%2CResultIfFalse)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%2F%2FOR%20(like%20you%20have%20it)%0Aif(%0A%20%20%20%20condition1%2C%0A%20%20%20%20resultIfTrue%2C%0A%20%20%20%20if(%0A%20%20%20%20%20%20%20%20condition2%2C%0A%20%20%20%20%20%20%20%20result-If-c1-False-And-C2-True%0A%20%20%20%20%20%20%20%20result-If-c1-False-And-C2-false%0A%20%20%20%20)%0A)%0A%0A%2F%2FSo%2C%20here's%20the%20AND%3A%0Aif(%0A%20%20%20%20condition1%2C%0A%20%20%20%20if(%0A%20%20%20%20%20%20%20%20condition2%2C%0A%20%20%20%20%20%20%20%20result-If-c1-true-And-C2-True%0A%20%20%20%20%20%20%20%20result-If-c1-true-And-C2-false%0A%20%20%20%20)%2C%0A%20%20%20%20result-if-c1-false%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20big%20thanks%20to%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F184117%22%20target%3D%22_blank%22%3E%40Maruthi%20Gadde%3C%2FA%3E%26nbsp%3Bfor%20giving%20me%20a%20BIG%20piece%20of%20the%20puzzle%20and%20to%20Stevish%20over%20at%20Stack%20Exchange%20for%20providing%20me%20with%20the%20last%20and%20final%20piece.%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

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

4 Replies
Highlighted
Best Response confirmed by Peter_K (Occasional Contributor)
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.

@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...

 

Highlighted

@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.. 

 

Highlighted

@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.