Script editor for Microsoft Teams

The script editor web part was kind of a super hero in the classic SharePoint, with a few clicks it allowed content creators to build web parts and to embedded content from the web.

This awesome web part is back and ready to spread the magic as an app in Microsoft Teams.

The modern script editor app is not provided officially by Microsoft, it was developed by Mikael Svenson and is available as an open source project part of the PnP initiative.


How to install the Microsoft Teams script editor

As an open source project you can download the script editor project from GitHub and compile it. If you don’t know how to do it or simply don’t have time I already did it and you can get the installation package from here.

Even though this article is only targeting Microsoft Teams it needs to be installed from the SharePoint global app catalog doing the following:

  1. Open the global SharePoint app catalog
  2. Upload the SPPKG to the app catalog
  3. On the popup click check the option Make this solution available to all sites in the organization and click on Deploy Deploy SharePoint web part
  4. Once deployed select the application on the app catalog
  5. On the ribbon click Sync to Teams Sync to Microsoft Teams

By doing these steps the app will became available for Microsoft Teams but also available for any SharePoint site collection.

How to use the script editor on Microsoft Teams

The script editor can be used for a variety of things but one that comes immediately to my mind is embedded other applications as tabs. This is handy for things like Weather widgets, Google Maps, Twitter feed among others.

To embedded your code as a tab in Microsoft Teams do the following:

  1. Get the embedded code for your widget and copy it
  2. Open the team where you want to add it
  3. Add a new tab
  4. Look for the modern script editor
  5. Click on the app and then click on Addadd script editor to Microsoft Teams
  6. On the following popup click on Save
  7. On the property pane click on Edit HTML code property pane on microsoft teams
  8. Paste the code snippet and click on Savecode snippet on Microsoft Teams
  9. Close the property pane and rename your tab

The following code will create a responsive weather widget for New York as the image below it demonstrates.

<a class="weatherwidget-io" href="" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="retro-sky" >NEW YORK WEATHER</a>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src='';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');

No comments yet

Leave a Reply

I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.