Teams Real Simple with Pictures: Show and tel:// Launching PSTN calls from Lists using JSON – and building a Phone Book for your business

This blog is part of a series on Teams. For more articles, check back often

Written: 19/11/2021 | Updated: N/A

I got back on the circuit this week: aMS Germany and Power Platform French Summit bookending a delivery of Microsoft 365 Fundamentals: so all in all I’ve had little time to really sit down and think about what to write – but then every once in a while a good turn of fortune occurs, and this week I found out that Lists now supports tel: which is something I have wanted to see ever since I wrote about hyperlinked email addresses. You see, launching a PSTN call from a list makes a lot of sense: namely because people and lists go hand in hand. A list of staff members. A list of potential recruits. A list of vendors. And the thing is, Teams as we know it has never really had a proper communal phone book has it? One that all members of staff can share. You know, I am not talking about some all singing, all dancing, aesthetically mind-blowing app. I am talking about basic no frills does what it says on the tin. I want a list of people, to be able to be searched by a team, and then can call on the spot. One or two clicks then go. Well, now we can all because Lists supports tel://.

This is going to be a fun one.

This blog will cover

  • Creating a List and formatting the List with JSON
  • Building the App
  • Pushing the App into Teams

Note this blog will have some abridged steps which will assume some experience with a Microsoft 365 environment, particularly Lists, Power Apps and Teams

Prerequisites

  • Microsoft 365 Licence which includes Lists, Power Apps and Teams
  • Microsoft Teams Calling Plan/Direct Routing set up

CREATING THE LIST AND FORMATTING THE LIST WITH JSON

1.) Ok, I am starting out in the Lists Web App. I could also do it in the Progressive Web App as I love the PWA version and it’s so good to getting to the list quickly. As shown there is nothing in the demo environment I am spinning this up in, so I select New List

2.) Then Blank List

3.) I am going to call this List Phone Book then give it a description, logo and color: something to distinguish it from other lists. I save to a SharePoint Site, not to a personal list. Once done, select Create

4.) I rename the first column to Contact and then proceed to create more columns. The columns I choose will be Office, Mobile and Email

5.) I then add a few items, fill it up a bit. Notice the office numbers are slightly different from the mobile numbers. In real life these may both be the same – but this is for demo purposes later. The numbers are in E.164 format to account for international dialing

6.) Next, in the advanced settings, I turn off attachments on List Items. Again, this will be explained later

7.) Back in the list I format the email column with JSON, which I did in the previous blog by using the following

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "debugMode": true,
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "txtContent": "@currentField",
      "attributes": {
        "href": {
          "operator": "+",
          "operands": [
            "mailto:",
            "@currentField"
          ]
        }
      }
    }
  ]
}

8.) I now do the same to the number columns again using JSON as well as tel. This looks like

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "debugMode": true,
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "txtContent": "@currentField",
      "attributes": {
        "href": {
          "operator": "+",
          "operands": [
            "tel:",
            "@currentField"
          ]
        }
      }
    }
  ]
}

Clicking on a number now prompts to make the call in Teams. This is awesome in itself.

Just imagine opening the PWA Lists App and one click making a call right out of Teams. This is in my production environment. Works really nice.

BUILDING THE APP

1.) So I started thinking. What if I could build an app on top of this. I could always try and surface the app via SPFX. However, I have opted to try Power Apps first. So in the List select Integrate and then Power Apps and then Create an App

2.) Name the app and select Create. I used Phone Book

3.) Here’s how the app looks when it starts. Gallery view. Cool. You can see the Name, the Office Number and the Mobile. No email.

4.) But in the detail screen you see it

5.) So the first thing is to remove the numbers off the front page. This is done by changing the Layout of the Galley to Title. Good

6.) In the detail screen I then add a number of buttons corresponding to Office, Mobile and Email

7.) Selecting each of the buttons, I then amend OnSelect in the advanced section. For Call Office

Launch("tel://" & DataCardValue2)

For Call Mobile

Launch("tel://" & DataCardValue3)

For Email. Notice I am using Mailto here not tel because I want it to trigger an email

Launch("mailto://" & DataCardValue4)

Now, I use DataCardValuex because I am using variables. In other words when someone clicks the button it will call the number in that particular field – not a specific number. Since we will have many contacts in the app we don’t want a situation where whatever button in whatever contact calls the same number. We want the button to launch the specific number we require

8.) Now to test. The buttons trigger a call in Teams and an email

9.) Search works

10.) Adding another contact into the List pushes it into the app. Good.

PUSHING THE APP INTO TEAMS

1.) Now we are ready to go. This is a simple config and much more can be done to the app to add functionality and make it look good. However, I am ok at this point it feels good and so I am going to publish the app. Select File

2.) Save the app

3.) Select Publish

4.) Select Publish This Version

5.) All changes are now published

6.) In Teams, select Apps on the app rail

7.) Select Built for your Org

8.) The App should appear under Built by your Colleagues. Select it

9.) You can add as a personal app, or to a Team. Select Add for the personal app

10.) Its now up and working in Teams

11.) It’s triggering PSTN calls and emails

12.) In the desktop client you can pop the app

Looking great