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.

HANDS ON

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="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="retro-sky" >NEW YORK WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>


2 Responses to “Script editor for Microsoft Teams”

  1. Patti Love

    February 4, 2021

    Hello,

    The pnp-script-editor.zip file for the Teams script editor did not include a JSON file. The .SPPKG file will not sync to Teams from the SharePoint App Catalog. Was the JSON omitted intentionally or is there a different .ZIP file that includes all components of the script editor app?

    Thanks!
    Patti

    Reply
    • João Ferreira

      May 19, 2021

      Hi Patti,

      Have you tried the compiled package I have in the article or have you compiled your own from the repo.
      The one in the article works the Sync to Teams feature of the app catalogue.

      Have a nice day 🙂

      Reply

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.