Tramite la proprietà customRowAction di Column formatting è possibile settare uno o più valori di un campo in un item SharePoint Online.

Può tornare utile, ad esempio in una check list, per impostare velocemente un flag.

customRowAction

Il formato è questo

JSON

{
  "elmType": "div",
  "txtContent": "[$FieldName]",
  "customRowAction":{
    "action": "setValue",
    "actionInput": {
      "FieldInternalName_1": "FieldValue_1",
      "FieldInternalName_2": "FieldValue_2",
      "FieldInternalName_3": "=if([$Status] == 'Completed', 'yes', 'no')"
    }
  }
}
dove nella action va impostato il valore setValue, mentre i campi FieldInternalName_N rappresentano i nomi interni dei campi da aggiornare con il valore passato.

Esempio

Si può creare un Column formatting che visualizza un pulsate per settare il flag quando questo è false, mentre se true visualizza un icona
description
description

Power Automate: Button/Flag

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "margin": "3px"
  },
  "customRowAction": {
    "action": "setValue",
    "actionInput": {
      "notificationHide": 1
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "padding": "5px",
        "cursor": "pointer",
        "white-space": "nowrap",
        "border-radius": "20px",
        "display": "=if(@currentField == true, 'flex', 'none')",
        "align-items": "center"
      },
      "attributes": {
        "class": "sp-css-backgroundColor-successBackground",
        "iconName": "Accept"
      }
    },
    {
      "elmType": "div",
      "style": {
        "padding": "5px 10px 5px 10px",
        "cursor": "pointer",
        "white-space": "nowrap",
        "border-radius": "5px",
        "display": "=if(@currentField != true, 'flex', 'none')",
        "align-items": "center"
      },
      "attributes": {
        "class": "ms-bgColor-themePrimary ms-bgColor-themeTertiary--hover ms-fontColor-white"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "font-size": "15px",
            "margin-right": "5px"
          },
          "attributes": {
            "iconName": "Hide"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Hide"
        }
      ]
    }
  ]
}
Il bottone si adegua al tema del sito tramite l'uso delle classi CSS: sp-css-backgroundColor-successBackground, ms-bgColor-themePrimary, ecc....

Variante

L'esempio di prima rimane cliccabile anche quando il flag è settato, infatti ad ogni click verrà aggiornata la data di modifica (Modified) anche se il valore non cambia.

Volendo si può spostare l'azione di setValue del campo (customRowAction) solo quando è visualizzato il pulsante:

Power Automate: Button/Flag non cliccabile

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "margin": "3px"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "padding": "5px",
        "cursor": "pointer",
        "white-space": "nowrap",
        "border-radius": "20px",
        "display": "=if(@currentField == true, 'flex', 'none')",
        "align-items": "center"
      },
      "attributes": {
        "class": "sp-css-backgroundColor-successBackground",
        "iconName": "Accept"
      }
    },
    {
      "elmType": "div",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "notificationHide": 1
        }
      },
      "style": {
        "padding": "5px 10px 5px 10px",
        "cursor": "pointer",
        "white-space": "nowrap",
        "border-radius": "5px",
        "display": "=if(@currentField != true, 'flex', 'none')",
        "align-items": "center"
      },
      "attributes": {
        "class": "ms-bgColor-themePrimary ms-bgColor-themeTertiary--hover ms-fontColor-white"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "font-size": "15px",
            "margin-right": "5px"
          },
          "attributes": {
            "iconName": "Hide"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Hide"
        }
      ]
    }
  ]
}
In questo caso, quando il flag è settato, il click sul campo avrà come effetto la selezione della riga.

Toggle

In altri casi potrebbe servire un comportamento di tipo toggle, ovvero premo e imposto il valore a true lo premo un altra volta e lo imposto a false e così via
Toggle On/Off
Toggle On/Off
questo è il JSON

Power Automate: Button/Toggle

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "customRowAction": {
    "action": "setValue",
    "actionInput": {
      "Toggle": "=if(@currentField == true, 0, 1)"
    }
  },
  "style": {
    "margin": "3px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "padding": "5px 10px 5px 10px",
        "cursor": "pointer",
        "white-space": "nowrap",
        "border-radius": "5px",
        "align-items": "center"
      },
      "attributes": {
        "class": "=if(@currentField == true,, 'sp-field-severity--good','sp-field-severity--severeWarning')"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "font-size": "15px",
            "margin-right": "5px"
          },
          "attributes": {
            "iconName": "=if(@currentField == true, 'Accept', 'Cancel')"
          }
        },
        {
          "elmType": "span",
          "txtContent": "=if(@currentField == true, 'On', 'Off')"
        }
      ]
    }
  ]
}
L'espressione che inverte lo stato del flag è:

Power Automate: if

"Toggle": "=if(@currentField == true, 0, 1)"
dove Toggle è il nome del campo della mia lista.
Da notare che il confronto con il valore del campo è fatto con la keyword true, ma il valore va impostato con 0 e 1.
Tags:
Column formatting4 SharePoint Online75
Potrebbe interessarti anche: