Directory- Link to Microsoft Teams

Get Help
1

Can you please advise how I can change the functionality of the call and chat button in the directory detail view cards to link directly to teams and open either chat or call?

Screenshot 2023-02-09 at 5.14.50 pm
Screenshot 2023-02-09 at 5.14.50 pm372×630 148 KB

2

Hi Sophie,

In order to change the functionality, you will need to make some changes to the List from Data Source component’s code. Here are the detailed steps:

  1. Log into your Studio account and in the edit mode, open the directory screen and click on the List from Data Source component to open the settings.
  2. In the component settings, under ‘Developer options’ click on ‘Edit component’s code’.
  3. In the HTML tab, open the ‘Detail template’ code.
  4. Delete or comment out the code from line 36 to 48, as you won’t need it.
    image
    image738×224 8.42 KB
  5. Paste the code below after line 34:
     <div class="small-card-list-detail-button">
        <a href="https://teams.microsoft.com/l/call/0/0?users={{originalData.Email}}" target="_blank" class="focus-outline" tabindex="0">
          <div class="small-card-list-detail-button-image"><span class="fa fa-phone"></span></div>
          <div class="small-card-list-detail-button-text">Teams</div>
        </a>
      </div>
    
     
      <div class="small-card-list-detail-button">
         <a href=" https://teams.microsoft.com/l/chat/0/0?users={{originalData.Email}}" target="_blank" class="focus-outline" tabindex="0">
          <div class="small-card-list-detail-button-image"><span class="fa fa-comment"></span></div>
          <div class="small-card-list-detail-button-text">Chat</div>
          </a>
      </div>
  1. Please note that the code above considers the email you use for Teams is the email in the “Email” column in the data source connected to the List from Data source. If the email used in teams is not in that column, some changes to the code would be necessary.

Besides changing the component code as indicated above, some changes will be required in the screen JavaScript. These are the steps you should follow:

  1. Still in edit mode, open the directory screen and open the developer options.
  2. Paste the code below at the end of the screen JavaScript tab:
Fliplet.Hooks.on('beforeNavigateToURL', function(data) {
  if (data.url.includes('teams.microsoft')) {
    data.inAppBrowser = false;
  }
});
  1. Also in the screen JS, delete or comment out lines 1143 - 1151. You won’t need that code, since you want the phone and chat icons to take the user to teams, instead of opening the phone/chat overlay.
    image

After that, the phone and chat icons should take the user to Teams to call/start a chat.