{"id":15267,"date":"2023-09-12T08:33:54","date_gmt":"2023-09-12T15:33:54","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=15267"},"modified":"2023-09-18T06:56:23","modified_gmt":"2023-09-18T13:56:23","slug":"announcing-sharepoint-framework-1-18-with-updates-for-microsoft-teams-microsoft-viva-and-sharepoint","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-sharepoint-framework-1-18-with-updates-for-microsoft-teams-microsoft-viva-and-sharepoint\/","title":{"rendered":"Announcing SharePoint Framework 1.18 with updates for Microsoft Teams, Microsoft Viva and SharePoint"},"content":{"rendered":"<p>We are really excited to announce <strong>general availability of the SharePoint Framework (SPFx) 1.18 \u2013 with updates for Microsoft Viva, Microsoft Teams, Outlook, Microsoft 365 app and SharePoint Online<\/strong>\u00a0experiences. SharePoint Framework is the easiest way to build your enterprise solutions for Microsoft 365 with automatic single sign-on, automatic hosting and with industry standard web stack tooling.<\/p>\n<p><strong>Your input and feedback has been invaluable<\/strong>\u00a0to define the key features for our releases, both current and future.\u00a0<strong>Thank you \ud83d\udc4f<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>Key capabilities in SharePoint Framework 1.18<\/h2>\n<ul>\n<li>More flexibility for the <strong>Viva Connections card layout options<\/strong> for building more engaging dashboard<\/li>\n<li>Other improvements and adjustments for the <strong>Viva Connection experiences<\/strong><\/li>\n<li>Fluent <strong>UI React v8 support<\/strong> for the Microsoft 365 solutions<\/li>\n<li>Updates for the <strong>Microsoft Teams solution templates<\/strong> to align with design guidance<\/li>\n<li><strong>TypeScript v4.7<\/strong> support<\/li>\n<li>Default <strong>Node.js<\/strong> version updated to <strong>version 18<\/strong><\/li>\n<li>Numerous<strong> other improvements and adjustments<\/strong> based on the reported issues by customers and partners.\n<ul>\n<li>If you ran into any issues, please use Premier Support if that\u2019s an option or report your issues at\u00a0<a href=\"https:\/\/aka.ms\/spfx-issues\" target=\"_blank\" rel=\"noopener\">https:\/\/aka.ms\/spfx-issues<\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Related documentation updates for the 1.18 release on the Viva Connections updates<\/p>\n<ul>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/design\/designing-card\" data-linktype=\"relative-path\">Designing Viva Connections custom cards for your dashboard<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/get-started\/migrate-to-spfx-1-18\" data-linktype=\"relative-path\">Migrate Adaptive Card Extensions to SharePoint Framework 1.18<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/get-started\/build-people-search-adaptive-card-extension\" data-linktype=\"relative-path\">Tutorial &#8211; Create a People Search Adaptive Card Extension<\/a><\/li>\n<\/ul>\n<p>New samples showcasing the new Viva Connections layout features:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/pnp\/sp-dev-fx-aces\/tree\/main\/samples\/InputCard-Start-Chat\" data-linktype=\"external\">Start a Chat Text Box input Adaptive Card Extension<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/pnp\/sp-dev-fx-aces\/tree\/main\/samples\/InputCard-Prompt-Survey\" data-linktype=\"external\">Prompt Survey Adaptive Card Extension<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/pnp\/sp-dev-fx-aces\/tree\/main\/samples\/InputCard-PeopleSearch\" data-linktype=\"external\">People Search Adaptive Card Extension<\/a><\/li>\n<\/ul>\n<p>Here are some example layouts you can now build with the new Viva Connections layout options.<\/p>\n<p style=\"padding-left: 40px;\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/09\/spfx-acecard-types-118-new-1.png\"><img decoding=\"async\" class=\"alignnone wp-image-15274 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/09\/spfx-acecard-types-118-new-1.png\" alt=\"Image spfx acecard types 118 new\" width=\"800\" height=\"614\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/09\/spfx-acecard-types-118-new-1.png 800w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/09\/spfx-acecard-types-118-new-1-300x230.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/09\/spfx-acecard-types-118-new-1-768x589.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>You can find full list of release details from the following documentation:<\/p>\n<ul>\n<li class=\"\"><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/release-1.18\" target=\"_blank\" rel=\"noopener\">SharePoint Framework 1.18 release notes<\/a><\/li>\n<\/ul>\n<p><em>Notice<\/em>. We have also publicly already talked about a new opportunity called <em>Bot Framework powered Microsoft Viva cards<\/em>. This feature is <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-public-preview-of-bot-framework-powered-viva-connections-extensibility\/\">currently in public preview<\/a> and focuses on using Bot Framework with Microsoft Viva. It does not have direct dependency on the SharePoint Framework client-side libraries. Bot Framework powered Microsoft Viva cards will introduce a new option for ISV to extend their Bot Framework specific implementations also to power Microsoft Viva Connections dashboard. This will be an additional option for building extensibility for the dashboard. You can also use SharePoint Framework by taking advantage of the <a href=\"https:\/\/learn.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/overview-viva-connections\">Adaptive Card Extensions (ACEs)<\/a> which will keep on getting also improvements in future.<\/p>\n<p>&nbsp;<\/p>\n<h2>Live demo of new features<\/h2>\n<p>We did recently demonstrated new features in the SharePoint Framework 1.18 release within our weekly <a href=\"https:\/\/www.youtube.com\/watch?v=5YfG-9pjiic&amp;list=PLR9nK3mnD-OUQOW86tT5dkCRQAVGY7DlH\">Microsoft 365 &amp; Power Platform community call<\/a>, which is open for all customers and partners to join.<\/p>\n<p><iframe title=\"Introduction to new features and capabilities within SPFx 1.18\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/LJAUVd4leRY?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>You are more than welcome to join on the future community calls which are a great way to keep up to date on the new features and capabilities which are available within the Microsoft 365 and in Power Platform. Download recurrent invite to the calls from <a href=\"https:\/\/aka.ms\/community\/calls\">https:\/\/aka.ms\/community\/calls<\/a>. Everyone is welcome \ud83e\udde1<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"installing-sharepoint-framework-1-13-preview\">Installing SharePoint Framework 1.18 \ud83d\udc69\u200d\ud83d\udcbb<i class=\"fabric-icon fabric-icon--Link\" aria-hidden=\"true\"><\/i><\/h2>\n<p>You can install <strong>general availability of the SharePoint Framework 1.18 <\/strong>by using the following command which will always install the latest production ready packages.<\/p>\n<pre tabindex=\"0\"><span class=\"pl-c1\">npm install @microsoft\/generator-sharepoint@latest --global<\/span><\/pre>\n<p>&nbsp;<\/p>\n<h2 id=\"whats-sharepoint-framework\">What\u2019s SharePoint Framework? \ud83d\ude80<i class=\"fabric-icon fabric-icon--Link\" aria-hidden=\"true\"><\/i><\/h2>\n<p>SharePoint Framework is a widely used extensibility option in <span class=\"brand\">Microsoft 365<\/span>\u00a0with\u00a0<strong>tens of millions of end users each month for the custom components built by developers for Microsoft Teams, Microsoft Viva and SharePoint<\/strong>. It\u2019s the easiest way to build developer extensibility for <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>You can build SharePoint Framework powered solutions by using <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/teams-toolkit-fundamentals?pivots=visual-studio-code\">Microsoft Teams Toolkit<\/a>, <a href=\"https:\/\/learn.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/set-up-your-development-environment\">SharePoint Framework Yeoman Generator<\/a> or with the <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/preview-of-viva-connections-toolkit-for-vs-code\/\">Microsoft Viva Toolkit<\/a>. Key advantage is the flexibility of automatic hosting with the option to use the exact same component across the different hosts without any code level changes. This is designed to maximize the value of your development investments regardless of which primary host you are targeting.<\/p>\n<p class=\"\">Key capabilities of the SharePoint Framework for\u00a0<span class=\"brand\">Microsoft 365<\/span>\u00a0are following:<\/p>\n<ul>\n<li><b>Content Driven Applications <\/b>\u2013 SharePoint Framework can be used to build content driven applications on surfacing information easily from Microsoft 365 with Microsoft Graph or to integrate with externally hosted content.<\/li>\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>Industry standard tooling<\/strong> \u2013 SharePoint Framework is using standard web stack tooling with node, npm, TypeScript and any JavaScript framework of your preference. Just standard web skill to succeed without any proprietary tooling.<\/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<pre tabindex=\"0\"><span class=\"pl-c1\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/02\/spfx-across-m365-hosts-features-spfx.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12835 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/02\/spfx-across-m365-hosts-features-spfx.png\" alt=\"Image showing SharePoint Framework across Microsoft 365 host features\" width=\"1199\" height=\"675\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/02\/spfx-across-m365-hosts-features-spfx.png 1199w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/02\/spfx-across-m365-hosts-features-spfx-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/02\/spfx-across-m365-hosts-features-spfx-1024x576.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/02\/spfx-across-m365-hosts-features-spfx-768x432.png 768w\" sizes=\"(max-width: 1199px) 100vw, 1199px\" \/><\/a>\r\n\r\n<\/span><\/pre>\n<h2 id=\"additional-resources-and-support\">Additional resources and support \ud83e\udd1d<i class=\"fabric-icon fabric-icon--Link\" aria-hidden=\"true\"><\/i><\/h2>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Please report any issues or feedback using following issue list \u2013 <a href=\"https:\/\/aka.ms\/spfx-issues\">https:\/\/aka.ms\/spfx-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:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/sharepoint-framework-overview?WT.mc_id=m365-47395-cxa\">Overview documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/web-parts\/get-started\/build-a-hello-world-web-part?WT.mc_id=m365-47395-cxa\">Getting started documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/build-for-teams-overview?WT.mc_id=m365-47395-cxa\">Build for Microsoft Teams using SharePoint Framework<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/office\/overview\">Extend Outlook and Office with the SharePoint Framework<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/overview-viva-connections?WT.mc_id=m365-47395-cxa\">Overview of Viva Connections Extensibility<\/a><\/li>\n<li><a href=\"https:\/\/aka.ms\/m365\/dev\/learn\/connections\">Microsoft Learn &#8211; Extend Microsoft Viva Connections<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/learn\/paths\/m365-sharepoint-associate\/?WT.mc_id=m365-47395-cxa\">Microsoft Learn &#8211; Extend Microsoft SharePoint &#8211; Associate<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=m365pnp.viva-connections-toolkit\">Microsoft Viva Connections Toolkit &#8211; Simplify your development experience for Viva Connections<\/a><\/li>\n<li><a href=\"https:\/\/pnp.github.io\/cli-microsoft365\/cmd\/spfx\/project\/project-upgrade\/\" target=\"_blank\" rel=\"noopener\">CLI for Microsoft 365<\/a>\u00a0\u2013 SharePoint Framework Upgrade tooling from previous versions to latest<\/li>\n<li><a href=\"https:\/\/aka.ms\/spfx-webparts\" target=\"_blank\" rel=\"noopener\">SharePoint Framework web part samples<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>If you are looking to build experiences for <span class=\"brand\">Microsoft 365<\/span>, we strongly recommend joining our community calls and other <a href=\"https:\/\/aka.ms\/community\/home\"><span class=\"brand\">Microsoft 365<\/span> &amp; Power Platform Community<\/a> activities covering Microsoft Graph, Microsoft Teams, Power Platform, Microsoft Viva, OneDrive, SharePoint and more&#8230; More details here <a href=\"https:\/\/aka.ms\/community\/home\">https:\/\/aka.ms\/community\/home<\/a> \ud83d\ude80<\/p>\n<p>And, follow us on <a href=\"https:\/\/twitter.com\/Microsoft365Dev\">Twitter<\/a> to stay up to date on Microsoft 365 Platform announcements.<\/p>\n<p class=\"\">Happy coding! Sharing is caring!\u00a0<a class=\"lightbox-link\" href=\"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/1f9e1.svg\" target=\"_blank\" rel=\"noopener\" aria-label=\"Lightbox image, click or press enter to enlarge\" data-featherlight=\"image\"><img decoding=\"async\" class=\"emoji\" role=\"img\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/1f9e1.svg\" alt=\"\ud83e\udde1\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are excited to announce a new public version of the SharePoint Framework, v1.18, with new features, capabilities and fixes for Microsoft Viva, Microsoft Teams and SharePoint.<\/p>\n","protected":false},"author":69217,"featured_media":15269,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,128,142,166,9],"tags":[223,23,116,12,162,19,123],"class_list":["post-15267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-developer","category-microsoft-teams","category-microsoft-viva","category-sharepoint","category-sharepoint-framework","tag-microsoft-teams","tag-teams-toolkit","tag-microsoft-viva","tag-outlook","tag-sharepoint","tag-sharepoint-framework","tag-viva-connections"],"acf":[],"blog_post_summary":"<p>We are excited to announce a new public version of the SharePoint Framework, v1.18, with new features, capabilities and fixes for Microsoft Viva, Microsoft Teams and SharePoint.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/15267","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\/69217"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=15267"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/15267\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/15269"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=15267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=15267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=15267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}