0

Brand new to SharePoint Online and I want to test out JSON to format a telephone column instead of an extra calculated column.

I'm attempting to display entries:

5554443333 as (555) 444-3333

and

4443333 as 444-3333

Ideally a number column would be used since the formatting isn't intended to be saved, just displayed.

I'm surprised something like this doesn't already exist in the GitHub PnP formatting examples. Does anyone have examples I can use?

1
1

I'm certainly no expert but this code seems to meet your needs. I've only really focused on the "txtContent" field so you can largely ignore the rest.

In plain English, it is counting the length of the string. If it's 10 characters long, it displays it as (xxx) yyy-zzzz, if it is 7 characters, it displays it as xxx-yyyy. If it is neither, it displays "Invalid" but you could easily adapt it to meet any other requirements you may have. This was applied to a column with a type of Number.

Finding the length of the string was an unknown for me but I found this on the SharePoint Online column formatting guide

indexOf Since the operator length doesn't work for string value types ( it will return 1 or 0 ), indexOf can serve us as a nice workaround to get the length of a string, for instance: indexOf([$column1] + '^', '^'). We will use '^' or any other character we may want to use to find out the end of the string.

My JSON code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "attributes": {
    "class": ""
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": "",
        "class": ""
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px"
      },
      "txtContent": "=if(indexOf(@currentField + '^', '^') == 10,'('+substring(toString(@currentField),0,3)+') '+substring(toString(@currentField),3,6)+'-'+substring(toString(@currentField),6,10),if(indexOf(@currentField + '^', '^') == 7,substring(toString(@currentField),0,3)+'-'+substring(toString(@currentField),3,8),'Invalid')",
      "attributes": {
        "class": ""
      }
    }
  ]
}
2
  • Okay, indexOf... I was trying to use @currentfield.length in all my tests. Any thoughts on why one works but the other doesn't? I'd think .length wouldn't include the commas since it's a number field. Sep 23 '21 at 22:01
  • Looking at the "length" operator in the link above, it says "length: returns the number of items in an array (multi-select person or choice field), for all other value types it returns 1 when true and 0 when false. It does NOT provide the length of a string value "
    – user79408
    Sep 24 '21 at 1:47
0

The JSON code provided by user79408 is feasible

"indexOf" can serve us as a nice workaround to get the length of a string. E.g:indexOf([$columnname])

Because you choose to use the Number column to fill in phone number. And, every 3 digits in the Number column will add a " , " as a separator by default. Therefore we recommend using indexOf(@currentField + '^', '^') to ignore " ," separator.

enter image description here

enter image description here

JSON Formatting:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "attributes": {
    "class": ""
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": "",
        "class": ""
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px"
      },
      "txtContent": "=if(indexOf(@currentField + '^', '^') == 10,'('+substring(toString(@currentField),0,3)+') '+substring(toString(@currentField),3,6)+'-'+substring(toString(@currentField),6,10),if(indexOf(@currentField + '^', '^') == 7,substring(toString(@currentField),0,3)+'-'+substring(toString(@currentField),3,8),'Please enter a 7-digit or 10-digit phone number!')",
      "attributes": {
        "class": ""
      }
    }
  ]
}

enter image description here

enter image description here

1
  • thank you for the screenshots in your step by step response. Sep 23 '21 at 22:03

Your Answer

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.