{"id":6555,"date":"2021-07-26T10:31:11","date_gmt":"2021-07-26T18:31:11","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=6555"},"modified":"2021-11-15T15:55:29","modified_gmt":"2021-11-15T23:55:29","slug":"announcing-public-preview-of-sharepoint-framework-1-13-with-viva-connections-extensibility","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-public-preview-of-sharepoint-framework-1-13-with-viva-connections-extensibility\/","title":{"rendered":"Announcing public preview of SharePoint Framework 1.13 &#8211; with Viva Connections Extensibility"},"content":{"rendered":"<p>We are excited to announce the availability of <strong>public preview of the SharePoint Framework (SPFx) 1.13 &#8211; with Microsoft Viva Connections extensibility support<\/strong> for optimized mobile experiences.<\/p>\n<p>Viva Connections is your gateway to a modern employee experience where you can build and integrate apps that shape culture and foster connections to help employees thrive. With SPFx, you have multiple ways to extend \u2013 using the same out-of-the-box or custom SPFx web parts, SPFx extensions (e.g., header, footer), and specific components for optimized mobile experiences. SharePoint Framework 1.13 public preview contains new component types which are targeted for building mobile experiences for Microsoft Viva Connections.<\/p>\n<p>You can find details on how to get started and tutorials from following references<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/release-1.13\">SharePoint Framework 1.13 preview release notes<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/overview-viva-connections\">Overview of Viva Connections Extensibility<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/get-started\/build-first-sharepoint-adaptive-card-extension\">Tutorial &#8211; Build your first SharePoint Adaptive Card Extension<\/a><\/li>\n<\/ul>\n<p>Notice that initially you can ONLY test the Viva Cards in online workbench. More polished end-user experience with the dashboard experience is planned to get released within upcoming weeks.<\/p>\n<h2>Installing SharePoint Framework 1.13 preview<\/h2>\n<p>You can install\u00a0<strong>preview of the SharePoint Framework 1.13 <\/strong>by using following command \u2013 which will always install he latest preview packages.<\/p>\n<pre class=\"\"><span class=\"pl-c1\">npm install @microsoft\/generator-sharepoint@next --global<\/span><\/pre>\n<h2>Solution samples with Viva Connections extensibility<\/h2>\n<p>As part of this release we also include three new reference solutions, which are demonstrating the power of SharePoint Framework for building experiences for Microsoft Teams and Microsoft Viva Connections. Each solution is provided with business scenario video, fully tested solution code and documentation.<\/p>\n<p>Notice. We continue evolving these solutions based on internal and external feedback, so they will be improved and adjusted also in future.<\/p>\n<p><strong>World Clock: SharePoint Framework Teams and Personal App Reference Application<\/strong><\/p>\n<p>The World Clock solution helps teams and managers deal with geographically dispersed team members helping make it easier to reconcile working times and meeting schedules with all the members. The solution can be added as a Teams tab to help members of a Team work together but also as a Personal App to help you manage your personal &#8220;teams&#8221; who may live in various time zones.<\/p>\n<p><iframe title=\"World Clock: SharePoint Framework Teams and Personal App Reference Application\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/j7-u-sBc5qI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Intro video at YouTube &#8211; <a href=\"https:\/\/www.youtube.com\/watch?v=j7-u-sBc5qI\">https:\/\/www.youtube.com\/watch?v=j7-u-sBc5qI<\/a><\/li>\n<li>Source code and installation instructions &#8211; <a href=\"https:\/\/github.com\/pnp\/spfx-teams\/tree\/main\/samples\/WORLDCLOCK\">https:\/\/github.com\/pnp\/spfx-teams\/tree\/main\/samples\/worldclock<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>COVID-19 Check-In: SharePoint Framework Teams Personal App Reference Application<\/strong><\/p>\n<p>This solution depicts how you can build a teams based custom form that collects information from users and provides a custom dashboard for working with the results.<\/p>\n<p><iframe title=\"COVID-19 Check-In: SharePoint Framework Teams Personal App Reference Application\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/LG8dx6Lsvy4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Intro video at YouTube &#8211; <a href=\"https:\/\/www.youtube.com\/watch?v=LG8dx6Lsvy4\">https:\/\/www.youtube.com\/watch?v=LG8dx6Lsvy4<\/a><\/li>\n<li>Source code and installation instructions &#8211; <a href=\"https:\/\/github.com\/pnp\/spfx-teams\/tree\/main\/samples\/COVID\">https:\/\/github.com\/pnp\/spfx-teams\/tree\/main\/samples\/covid<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Executive Room Reservation: SharePoint Framework Teams and Personal App Reference Application<\/strong><\/p>\n<p>The Executive Room Reservation application is an executive scheduling application that allows users to see upcoming meetings, select and book a room based on availability dates and the number of participants. Users can see a photo of the room where the meeting is booked, get an address to the building to put in the meeting invite, and get directions to the building. It provides a seamless way for executive assistants to schedule meeting rooms for executive meetings. The application demonstrates the ability to create a visually engaging Microsoft Teams based solution.<\/p>\n<p><iframe title=\"Executive Room Reservation: SharePoint Framework Teams and Personal App Reference Application\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/5GJHlMCQMBo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Intro video at YouTube &#8211; <a href=\"https:\/\/www.youtube.com\/watch?v=j7-u-sBc5qI\">https:\/\/www.youtube.com\/watch?v=j7-u-sBc5qI<\/a><\/li>\n<li>Source code and installation instructions &#8211; <a href=\"https:\/\/github.com\/pnp\/spfx-reference-scenarios\/tree\/main\/samples\/ace-teams-roomreservation\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/pnp\/spfx-reference-scenarios\/tree\/main\/samples\/ace-teams-roomreservation<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2 class=\"\">What\u2019s SharePoint Framework?<\/h2>\n<p>SharePoint Framework is widely used extensibility in\u00a0<span class=\"brand\">Microsoft 365<\/span>\u00a0with\u00a0<strong>tens of millions of end users each month for the custom components<\/strong>\u00a0built by developers. It\u2019s really the easiest way to get build extensibility for\u00a0<span class=\"brand\">Microsoft 365<\/span>\u00a0and it\u2019s taken advantage by thousands of partners and customers on building custom experiences for end users.<\/p>\n<p>Key capabilities of the SharePoint Framework for\u00a0<span class=\"brand\">Microsoft 365<\/span>\u00a0are following:<\/p>\n<ul>\n<li><strong>Automatic Single Sign On<\/strong>\u00a0\u2013 SharePoint Framework components have automatic and seamless SSO included for all platforms they are hosted. No specific consents needed from Microsoft 365 end users.<\/li>\n<li><strong>Automatic hosting<\/strong>\u00a0\u2013 SharePoint Framework components are automatically hosted in SharePoint without additional maintenance or operational costs.<\/li>\n<li><strong>Consistent developer experience<\/strong>\u00a0\u2013 Use the same code and development patterns for Microsoft Viva, Microsoft Teams and in SharePoint.<\/li>\n<li><strong>Industry standard tooling<\/strong>\u00a0\u2013 SharePoint Framework is using standard web stack tooling with node, npm, TypeScript and any JavaScript framework of your preference. Just standard web skills needed, no special skills needed. Anyone can do this.<\/li>\n<\/ul>\n<p>SharePoint Framework has also made the permission and token management for accessing the data in\u00a0<span class=\"brand\">Microsoft 365<\/span>\u00a0easy. You will be using the awesome\u00a0<strong>Microsoft Graph APIs<\/strong>\u00a0for accessing business data and you can further simplify the development of SharePoint Framework components by taking advantage of the\u00a0<strong>Microsoft Graph Toolkit<\/strong>, which provides reusable controls with data connectivity to Microsoft Graph.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-6542 size-large\" src=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-365\/blogs\/wp-content\/uploads\/2021\/07\/spfx-easiest-way-solutions-m365-1024x576.png\" alt=\"SharePoint Framework - The easiest way to build your enterprise solutions for Microsoft 365\" width=\"1024\" height=\"576\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/07\/spfx-easiest-way-solutions-m365-1024x576.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/07\/spfx-easiest-way-solutions-m365-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/07\/spfx-easiest-way-solutions-m365-768x432.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/07\/spfx-easiest-way-solutions-m365-1536x865.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/07\/spfx-easiest-way-solutions-m365.png 1949w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>SharePoint Framework provides multiple shapes and component types across Microsoft Teams, Microsoft Viva and SharePoint.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-6545\" src=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-365\/blogs\/wp-content\/uploads\/2021\/07\/sharepoint-framework-shapes-1024x577.png\" alt=\"SPFx shapes\" width=\"1024\" height=\"577\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/07\/sharepoint-framework-shapes-1024x577.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/07\/sharepoint-framework-shapes-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/07\/sharepoint-framework-shapes-768x432.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/07\/sharepoint-framework-shapes-1536x865.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/07\/sharepoint-framework-shapes.png 1829w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Additional resources and support<\/h2>\n<ul>\n<li>Please report any issues on the public preview using following issue list &#8211; <a href=\"http:\/\/aka.ms\/viva\/connections\/developer\/preview\/issues\">https:\/\/aka.ms\/viva\/connections\/developer\/preview\/issues<\/a>\n<ul>\n<li>We have engineering people monitoring any incoming issues and helping you to get unblocked or getting your questions answered<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/techcommunity.microsoft.com\/t5\/microsoft-viva-blog\/viva-connections-welcomes-new-partners-and-opens-developer\/ba-p\/2540643\">Viva Connections welcomes new partners and opens developer preview<\/a>\u00a0\u2013 Microsoft Viva Blog<\/li>\n<li><a href=\"https:\/\/techcommunity.microsoft.com\/t5\/microsoft-viva-blog\/how-to-implement-microsoft-viva-connections-with-microsoft\/ba-p\/2337065\">How to implement Microsoft Viva Connections with Microsoft Mechanics<\/a>\u00a0\u2013\u00a0<a href=\"https:\/\/twitter.com\/AdamHarmetz\">Adam Harmetz<\/a>\u00a0(Microsoft)<\/li>\n<li><a href=\"https:\/\/mybuild.microsoft.com\/sessions\/83a31949-e368-432b-8582-5883e9995046\">Build solutions that span across Microsoft Teams, Viva Connections and SharePoint<\/a>\u00a0\u2013 Build 2021 session \u2013\u00a0<a href=\"https:\/\/twitter.com\/vesajuvonen\">Vesa Juvonen<\/a>\u00a0(Microsoft)<\/li>\n<li><a href=\"http:\/\/aka.ms\/spfx\">SharePoint Framework documentation<\/a>\u00a0\u2013 Will be including Viva Connections cards tutorials when 1.13 beta is released<\/li>\n<li><a href=\"https:\/\/pnp.github.io\/cli-microsoft365\/cmd\/spfx\/project\/project-upgrade\/\">CLI for Microsoft 365<\/a> &#8211; SharePoint Framework Upgrade tooling from previous versions to latest<\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/set-up-your-developer-tenant\">SharePoint Framework tutorial for getting started<\/a><\/li>\n<li class=\"\"><a href=\"https:\/\/aka.ms\/spfx-webparts\">SharePoint Framework web part samples<\/a><\/li>\n<\/ul>\n<p>If you are looking into building experiences for\u00a0<span class=\"brand\">Microsoft 365<\/span>, we strongly recommend on joining our community calls and other\u00a0<span class=\"brand\">Microsoft 365<\/span>\u00a0community activities. More details from\u00a0<a href=\"https:\/\/aka.ms\/m365pnp\">https:\/\/aka.ms\/m365pnp<\/a>.<\/p>\n<p class=\"\">Happy coding! Sharing is caring! \ud83e\udde1<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are excited to announce the availability of public preview of the SharePoint Framework (SPFx) 1.13 &#8211; with Microsoft Viva Connections extensibility support for optimized mobile experiences.<\/p>\n","protected":false},"author":69078,"featured_media":6545,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128,142,9],"tags":[25],"class_list":["post-6555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","category-microsoft-viva","category-sharepoint-framework","tag-tabs"],"acf":[],"blog_post_summary":"<p>We are excited to announce the availability of public preview of the SharePoint Framework (SPFx) 1.13 &#8211; with Microsoft Viva Connections extensibility support for optimized mobile experiences.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69078"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=6555"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6555\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/6545"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=6555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=6555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=6555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}