{"id":39917,"date":"2020-10-10T06:17:18","date_gmt":"2020-10-10T13:17:18","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/premier-developer\/?p=39917"},"modified":"2020-10-08T06:45:43","modified_gmt":"2020-10-08T13:45:43","slug":"how-to-surface-a-classic-solution-in-a-modern-page","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/how-to-surface-a-classic-solution-in-a-modern-page\/","title":{"rendered":"How to Surface a Classic Solution in a Modern Page"},"content":{"rendered":"<p><a href=\"https:\/\/www.linkedin.com\/in\/gunjandatta\/\">Gunjan Datta<\/a> demonstrates how to surface a classic SharePoint HTML\/JS\/CSS solution in a modern page or teams tab.<\/p>\n<hr \/>\n<p>We will use the\u00a0<a href=\"https:\/\/github.com\/gunjandatta\/sp-dashboard-vue\/wiki\">VueJS Basic Dashboard<\/a>\u00a0example from the\u00a0<a href=\"https:\/\/dattabase.com\/examples\/\">Code Examples<\/a>\u00a0page to surface in a modern page and teams tab.<\/p>\n<h3 id=\"minimal-app-page\">Minimal App Page<\/h3>\n<p>We will use the\u00a0<a href=\"https:\/\/dattabase.com\/blog\/minimal-page-for-sharepoint-app-parts\">minimal app page<\/a>\u00a0for app parts to render our custom HTML\/CSS\/JS solution to. Microsoft hasn\u2019t announced Add-In solutions being deprecated, so this solution should work long term. This solution will not work on sites that have\u00a0<a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/allow-or-prevent-custom-script\">Custom Scripts<\/a>\u00a0disabled.<\/p>\n<h4 id=\"dashboard-example\">Dashboard Example<\/h4>\n<p>The VueJS dashboard example uses a content editor webpart which references an index.html.<\/p>\n<p><a href=\"https:\/\/dattabase.com\/blog\/classic-solution-in-modern\">Continue reading on Gunjan&#8217;s blog<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post will go over how to surface a classic SharePoint HTML\/JS\/CSS solution in a modern page or teams tab.<\/p>\n","protected":false},"author":582,"featured_media":39918,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8745],"tags":[335],"class_list":["post-39917","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sharepoint","tag-sharepoint"],"acf":[],"blog_post_summary":"<p>This post will go over how to surface a classic SharePoint HTML\/JS\/CSS solution in a modern page or teams tab.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/39917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=39917"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/39917\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/39918"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=39917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=39917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=39917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}