How to Surface a Classic Solution in a Modern Page

This post will go over how to surface a classic SharePoint HTML/JS/CSS solution in a modern page or teams tab.

We will use the VueJS Basic Dashboard example from the Code Examples page to surface in a modern page and teams tab.

Minimal App Page

We will use the minimal app page for app parts to render our custom HTML/CSS/JS solution to. Microsoft hasn’t announced Add-In solutions being deprecated, so this solution should work long term. This solution will not work on sites that have Custom Scripts disabled.

Dashboard Example

The VueJS dashboard example uses a content editor webpart which references an index.html.

index.html
<!-- The element to render the solution to -->
<div id="sp-dashboard" class="bs"></div>

<!-- Reference the solution script -->
<script src="./sp-dashboard-vue.js"></script>

We will copy the minimal app page to a new file called app.aspx, and add the index.html contents to it. This file will need to be uploaded to the same folder containing the solution, based on the script source file references.

Upload Files

app.aspx
<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
<%@ Page Language="C#" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<!-- Required to be used in an App Part -->
<WebPartPages:AllowFraming runat="server" />

<html>
    <head>
        <title>VueJS Dashboard</title>
        <meta name="WebPartPageExpansion" content="full" />

        <!-- Required for the SP.UI.ModalDialog -->
        <link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/Themable/corev15.css">
    </head>
    <body>
        <form runat="server">
            <!-- Required to make posts to SP -->
            <SharePoint:FormDigest runat="server" />

            <!-- SharePoint References -->
            <SharePoint:ScriptLink Name="MicrosoftAjax.js" runat="server" Defer="False" Localizable="false" />
            <SharePoint:ScriptLink Name="sp.core.js" runat="server" Defer="False" Localizable="false" />
            <SharePoint:ScriptLink Name="sp.js" runat="server" Defer="True" Localizable="false" />

            <!-- The element to render the solution to -->
            <div id="sp-dashboard" class="bs"></div>

            <!-- Reference the solution script -->
            <script src="./sp-dashboard-vue.js"></script>
        </form>
    </body>
</html>
View Dashboard

Click on the app.aspx page to view the solution.

Test File

Create Modern Page

Create a new modern page and add the embed webpart to the page.

Create Modern Page

Reference app.aspx

Set the absolute url of the solution in the webpart properties.

Reference App

View Modern Page

Save or publish the page to view the solution.

View Modern Page

Known Issues

The css may need to be adjusted for the modern page.

Surface to Teams

Add Teams Tab

In teams, add a SharePoint tab to a channel.

Add Teams Tab

Next, click on the Add page or list from any SharePoint site link to reference the page by its url.

Add SharePoint Page

Reference the App

This will not work, but I wanted to show you what will happen if you try to reference a non-modern SharePoint page.

Reference App in Teams

If you wanted to reference the app page, then you will need to select the Website instead of the SharePoint option in the first step.

Reference the Modern Page

Updating the url to the modern page we created in the previous step will work.

View Teams Tab

Known Issues

The css will need to be adjusted for a teams tab.