list formatting: multiple mailto-links break code

Question

When I use an a element in JSON to generate a mailto-link, everything works fine:

{
                    "elmType": "a",
                    "style": {
                      "position": "absolute",
                      "left": "20px",
                      "width": "40px",
                      "height": "40px",
                      "line-height": "40px",
                      "border-radius": "50%",
                      "text-align": "center",
                      "cursor": "pointer",
                      "text-decoration": "none"
                    },
                    "attributes": {
                      "iconName": "Mail",
                      "class": "ms-fontColor-neutralSecondary ms-fontWeight-semibold",
                      "href": "='mailto:' + [$Profil.email]",
                      "title": "='Eine Email an ' + [$Title] + ' schreiben'"
                    }
                  }

This code generates a clickable icon, which opens the mail-client with the email address provided by the people field Profil. However, if I generate a second mailto-link with the same technique for a list entry, it seems to break the code and displays nothing. Also if I use callto: (to start a Teams call) instead of mailto: it doesn't work.

If I just use one of both linktypes the list element displays fine.

I figured out that it seems to be because of the : but can't find a way to get around it. Using AST formatting didn't help either.

EDIT:

The callto: link, which cannot be used in a JSON format, can be replaced with a valid https-link according to this article here. It needs to be in this format:

https://teams.microsoft.com/l/call/0/[email protected]

Answer 1

Are you putting them inside a div element? I've taken your code and modified it slightly and it seems to be working for me. The only things I've done are wrapping the two a elements in a div and changing the left attribute from 20px to 40px so it isn't overlapping.

This works fine for mailto: links but according to the following, you cannot use callto: links. You can use tel: links but they have specific requirements.

You can use column formatting to provide hyperlinks that go to other webpages, or start custom functionality. This functionality is limited to static links that can be parameterized with values from fields in the list. You can't use column formatting to output links to protocols other than http://, https://, mailto: or .

tel: protocol only allows digits, *+# special characters and .-/() visual separators.

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#create-clickable-actions

My working version of your code for reference:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
{
                    "elmType": "a",
                    "style": {
                      "position": "absolute",
                      "left": "20px",
                      "width": "40px",
                      "height": "40px",
                      "line-height": "40px",
                      "border-radius": "50%",
                      "text-align": "center",
                      "cursor": "pointer",
                      "text-decoration": "none"
                    },
                    "attributes": {
                      "iconName": "Mail",
                      "class": "ms-fontColor-neutralSecondary ms-fontWeight-semibold",
                      "href": "='mailto:' + [$Profil.email]",
                      "title": "='Eine Email an ' + [$Title] + ' schreiben'"
                    }
                  },
                  {
                    "elmType": "a",
                    "style": {
                      "position": "absolute",
                      "left": "40px",
                      "width": "40px",
                      "height": "40px",
                      "line-height": "40px",
                      "border-radius": "50%",
                      "text-align": "center",
                      "cursor": "pointer",
                      "text-decoration": "none"
                    },
                    "attributes": {
                      "iconName": "Mail",
                      "class": "ms-fontColor-neutralSecondary ms-fontWeight-semibold",
                      "href": "='mailto:' + [$Profil.email]",
                      "title": "='Eine Email an ' + [$Title] + ' schreiben'"
                    }
                  }
  ]
}