diff --git a/docs/images/graph-helloworld-webpart-on-page.png b/docs/images/graph-helloworld-webpart-on-page.png index 180ec6343..33125cf11 100644 Binary files a/docs/images/graph-helloworld-webpart-on-page.png and b/docs/images/graph-helloworld-webpart-on-page.png differ diff --git a/docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md b/docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md index 22be9d549..04131079e 100644 --- a/docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md +++ b/docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md @@ -1,7 +1,7 @@ --- title: Add the jQueryUI Accordion to your SharePoint client-side web part description: Adding the jQueryUI Accordion to your web part project involves creating a new web part. -ms.date: 10/21/2021 +ms.date: 12/31/2025 ms.localizationpriority: high ms.custom: scenarios:getting-started --- @@ -12,8 +12,6 @@ Adding the jQueryUI Accordion to your web part project involves creating a new w ![Screenshot of a web part that includes a jQuery Accordion](../../../images/jquery-accordion-wb.png) -[!INCLUDE [spfx-gulp-heft-migration-wip](../../../../includes/snippets/spfx-gulp-heft-migration-wip.md)] - Ensure that you've completed the following steps before you start: - [Build your first web part](build-a-hello-world-web-part.md) @@ -150,7 +148,7 @@ By default, all dependencies referenced in your project's code are included in t ## Build the Accordion -At this point, the project is configured to depend on jQuery and jQueryUI, but to not include the in the resulting solution's bundle. The next step is to implement the web part by adding the Accordion to the web part. +At this point, the project is configured to depend on jQuery and jQueryUI, but to not include them in the resulting solution's bundle. The next step is to implement the web part by adding the Accordion to the web part. ### Add the Accordion HTML @@ -158,7 +156,7 @@ At this point, the project is configured to depend on jQuery and jQueryUI, but t 1. Add class `MyAccordionTemplate` that contains the HTML for the accordion. Add the following code to the **MyAccordionTemplate.ts** file: ```typescript - export default class MyAccordionTemplate { + class MyAccordionTemplate { public static templateHtml: string = `

Section 1

@@ -209,6 +207,7 @@ At this point, the project is configured to depend on jQuery and jQueryUI, but t
`; } + export default MyAccordionTemplate; ``` 1. Save the file. @@ -289,7 +288,7 @@ At this point, the project is configured to depend on jQuery and jQueryUI, but t 1. Finally, initialize the accordion: ```typescript - jQuery('.accordion', this.domElement).accordion(accordionOptions); + (jQuery as any)('.accordion', this.domElement).accordion(accordionOptions); ``` As you can see, you use the variable `jQuery` that you used to import the `jquery` module. You then initialize the accordion. @@ -309,7 +308,7 @@ At this point, the project is configured to depend on jQuery and jQueryUI, but t } }; - jQuery('.accordion', this.domElement).accordion(accordionOptions); + (jQuery as any)('.accordion', this.domElement).accordion(accordionOptions); } ``` @@ -320,7 +319,7 @@ At this point, the project is configured to depend on jQuery and jQueryUI, but t 1. In your console, ensure that you're still in the **jquery-webpart** folder, and execute the following to build and preview your web part: ```console - gulp serve --nobrowser + heft start ``` Once the web server starts, open a browser and navigate to a SharePoint site's hosted workbench to test your project. For example: `https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx`. @@ -329,4 +328,4 @@ At this point, the project is configured to depend on jQuery and jQueryUI, but t ![Screenshot of a web part that includes a jQuery Accordion](../../../images/jquery-accordion-wb.png) -1. In the console where you have **gulp serve** running, select CTRL+C to terminate the task. +1. In the console where you have **heft start** running, select CTRL+C to terminate the task. diff --git a/docs/spfx/web-parts/get-started/build-web-part-microsoft-graph-toolkit.md b/docs/spfx/web-parts/get-started/build-web-part-microsoft-graph-toolkit.md index 6698c01f1..5908e0a21 100644 --- a/docs/spfx/web-parts/get-started/build-web-part-microsoft-graph-toolkit.md +++ b/docs/spfx/web-parts/get-started/build-web-part-microsoft-graph-toolkit.md @@ -1,7 +1,7 @@ --- title: Build a SharePoint web part with the Microsoft Graph Toolkit description: Get started using the Microsoft Graph Toolkit to build a SharePoint web part. -ms.date: 12/10/2025 +ms.date: 01/05/2025 ms.localizationpriority: high --- @@ -23,8 +23,6 @@ Getting started involves the following steps: 1. Build and deploy your web part. 1. Test your web part. -[!INCLUDE [spfx-gulp-heft-migration-wip](../../../../includes/snippets/spfx-gulp-heft-migration-wip.md)] - ## Set up your SharePoint Framework development environment and create a new web part Follow the steps to [Set up your SharePoint Framework development environment](/sharepoint/dev/spfx/set-up-your-development-environment) and then [create a new web part](/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part). @@ -121,8 +119,8 @@ After downloading the Microsoft Graph Toolkit SharePoint Framework .sppkg packag Now, you will build your application and deploy it to SharePoint. Build your application by running the following commands: ```bash -gulp bundle -gulp package-solution +heft build --production +heft package-solution --production ``` In the `sharepoint/solution` folder, there will be a new `.sppkg` file. You will need to upload this file to your SharePoint Online App Catalog. Go to the [More features page of your SharePoint admin center](https://admin.microsoft.com/sharepoint?page=classicfeatures&modern=true). Select **Open** under **Apps**, then click **App Catalog**, and **Distribute apps for SharePoint**. Upload your `.sppkg` file, and click **Deploy**. @@ -144,10 +142,10 @@ Open the `config\serve.json` file in your project and replace the value of `ini Save the file and then run the following command in the console to build and preview your web part: ```bash -gulp serve +heft start ``` -Your hosted workbench will automatically open in your browser. Add your web part to the page and you should see your web part with the Microsoft Graph Toolkit components in action! As long as the gulp serve command is still running in your console, you can continue to make edits to your code and then just refresh your browser to see your changes. +Your hosted workbench will automatically open in your browser. Add your web part to the page and you should see your web part with the Microsoft Graph Toolkit components in action! As long as the **heft start** command is still running in your console, you can continue to make edits to your code and then just refresh your browser to see your changes. ## Next Steps diff --git a/docs/spfx/web-parts/get-started/provision-sp-assets-from-package.md b/docs/spfx/web-parts/get-started/provision-sp-assets-from-package.md index 7102c9e81..6b4e36cf6 100644 --- a/docs/spfx/web-parts/get-started/provision-sp-assets-from-package.md +++ b/docs/spfx/web-parts/get-started/provision-sp-assets-from-package.md @@ -1,7 +1,7 @@ --- title: Provision SharePoint assets from your SharePoint client-side web part description: SharePoint assets can be provisioned as part of the SharePoint Framework solution, and deployed to SharePoint sites when the solution is installed on it. -ms.date: 05/03/2023 +ms.date: 01/05/2025 ms.localizationpriority: high ms.custom: scenarios:getting-started --- @@ -22,8 +22,6 @@ You can also follow these steps by watching this video on the Microsoft 365 Plat > [!Video https://www.youtube.com/embed/09uoG6Voeew] -[!INCLUDE [spfx-gulp-heft-migration-wip](../../../../includes/snippets/spfx-gulp-heft-migration-wip.md)] - ## Create a new web part project 1. Create a new project directory in your favorite location: @@ -253,13 +251,13 @@ Now you're ready to deploy the solution to SharePoint. Because we're provisionin 1. In the console, execute the following command to package your client-side solution that contains the web part to get the basic structure ready for packaging: ```console - gulp bundle + heft build --production ``` 1. Execute the following command to create the solution package: ```console - gulp package-solution + heft package-solution --production ``` The command creates the **asset-deployment-webpart.sppkg** package in the **sharepoint/solution** folder. @@ -389,13 +387,13 @@ Next, we need to update both the solution version and the feature version respon 1. In the console window, execute the following command to repackage your client-side solution that contains the web part so that we get the basic structure ready for packaging: ```console - gulp bundle + heft build --production ``` 1. Execute the following command to create the solution package: ```console - gulp package-solution + heft package-solution --production ``` The command creates a new version of the solution package in the **sharepoint/solution** folder. Notice that you can easily confirm from the **sharepoint/solution/debug** folder that the updated XML files are included in the solution package. diff --git a/docs/spfx/web-parts/get-started/using-microsoft-graph-apis.md b/docs/spfx/web-parts/get-started/using-microsoft-graph-apis.md index eb4d6fc9b..f0bbad260 100644 --- a/docs/spfx/web-parts/get-started/using-microsoft-graph-apis.md +++ b/docs/spfx/web-parts/get-started/using-microsoft-graph-apis.md @@ -1,7 +1,7 @@ --- title: Building SharePoint Framework solutions, which use Microsoft Graph description: Getting started tutorial on using Microsoft Graph with SharePoint Framework solutions -ms.date: 11/24/2022 +ms.date: 01/01/2026 ms.localizationpriority: high --- @@ -19,8 +19,6 @@ You can also follow these steps by watching this video on the Microsoft 365 Plat > [!Video https://www.youtube.com/embed/tHzbh5JoC-A] -[!INCLUDE [spfx-gulp-heft-migration-wip](../../../../includes/snippets/spfx-gulp-heft-migration-wip.md)] - ## Create a SharePoint Framework project for Microsoft Graph usage 1. Create a new project directory in your favorite location: @@ -99,7 +97,7 @@ In this case, we'll include the solution-specific permissions in the package. In this case, we'll modify the code to use Microsoft Graph to get access on the current user's last five emails. 1. Open **./src/webparts/helloWorld/MyFirstGraphWebPartWebPart.ts**. -1. Add the following `import` statements after the existing `import` statements at the top fo the file: +1. Add the following `import` statements after the existing `import` statements at the top of the file: ```typescript import { MSGraphClientV3 } from '@microsoft/sp-http'; @@ -111,30 +109,34 @@ In this case, we'll modify the code to use Microsoft Graph to get access on the ```typescript public render(): void { this.context.msGraphClientFactory - .getClient('3') - .then((client: MSGraphClientV3): void => { - // get information about the current user from the Microsoft Graph - client - .api('/me/messages') - .top(5) - .orderby("receivedDateTime desc") - .get((error, messages: any, rawResponse?: any) => { - - this.domElement.innerHTML = ` -
-
-

Welcome to SharePoint Framework!

-

- The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling. -

-
-
-
`; - - // List the latest emails based on what we got from the Graph - this._renderEmailList(messages.value); + .getClient('3') + .then((client: MSGraphClientV3): Promise => { + // get information about the current user from the Microsoft Graph + return client + .api('/me/messages') + .top(5) + .orderby("receivedDateTime desc") + .get() + .then((messages: {value: MicrosoftGraph.Message[]}) => { + + this.domElement.innerHTML = ` +
+
+

Welcome to SharePoint Framework!

+

+ The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling. +

+
+
+
`; + + // List the latest emails based on what we got from the Graph + this._renderEmailList(messages.value); + }); + }) + .catch((error) => { + console.error('Error fetching messages:', error); }); - }); } ``` @@ -144,12 +146,14 @@ In this case, we'll modify the code to use Microsoft Graph to get access on the private _renderEmailList(messages: MicrosoftGraph.Message[]): void { let html: string = ''; for (let index = 0; index < messages.length; index++) { - html += `

Email ${index + 1} - ${escape(messages[index].subject)}

`; + html += `

Email ${index + 1} - ${escape(messages[index].subject ?? '')}

`; } // Add the emails to the placeholder - const listContainer: Element = this.domElement.querySelector('#spListContainer'); - listContainer.innerHTML = html; + const listContainer: Element | null = this.domElement.querySelector('#spListContainer'); + if (listContainer) { + listContainer.innerHTML = html; + } } ``` @@ -158,13 +162,13 @@ In this case, we'll modify the code to use Microsoft Graph to get access on the 1. Execute the following commands to build bundle your solution. This executes a release build of your project by using a dynamic label as the host URL for your assets. ```console - gulp bundle --ship + heft build --production ``` 1. Execute the following task to package your solution. This creates an updated **graph-apis.sppkg** package on the **sharepoint/solution** folder. ```console - gulp package-solution --ship + heft package-solution --production ``` Next, you need to deploy the package that was generated to the tenant App Catalog. diff --git a/docs/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab.md b/docs/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab.md index 47089774f..980887cef 100644 --- a/docs/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab.md +++ b/docs/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab.md @@ -1,7 +1,7 @@ --- title: Build Microsoft Teams tab using SharePoint Framework - Tutorial description: Tutorial on how to build Microsoft Teams tabs using SharePoint Framework. Capability was released to general availability in SharePoint Framework v1.8. -ms.date: 10/21/2021 +ms.date: 01/02/2026 ms.localizationpriority: high --- @@ -22,8 +22,6 @@ You can also follow these steps by watching this video on the Microsoft 365 Plat > [!Video https://www.youtube.com/embed/JoTAC2i-XeU] -[!INCLUDE [spfx-gulp-heft-migration-wip](../../../../includes/snippets/spfx-gulp-heft-migration-wip.md)] - ## Create a Microsoft Teams tab project 1. Create a new project directory in your favorite location: @@ -138,9 +136,14 @@ Locate the **./src/webparts/\*\*/manifest.json** file for the web part you want
`; } ``` - > [!NOTE] > For a full description of the information available through Microsoft Teams context for Microsoft Teams tabs, see: [Microsoft Teams developer documentation](/microsoftteams/platform/concepts/tabs/tabs-context). +1. Update the **MyFirstTeamsTabWebPart.module.scss** file to define the CSS classes used in the render method. + + Ensure your SCSS file includes the required CSS classes (`.container`, `.row`, `.column`, `.title`, `.subTitle`, `.description`, `.button`, `.label`). + + > [!TIP] + > To avoid Sass deprecation warnings from Office UI Fabric Core mixins, use plain CSS properties instead of SCSS mixins like `@include ms-Grid-row` or `@include ms-fontColor-white`. Define your styles with standard CSS properties for better compatibility with newer Sass versions. ## Package and deploy your web part to SharePoint @@ -149,13 +152,13 @@ Ensure that your console is activated in the root folder of the solution where w 1. Execute the following commands to build bundle your solution. This executes a release build of your project by using a dynamic label as the host URL for your assets. ```console - gulp bundle --ship + heft build --production ``` 1. Execute the following task to package your solution. This creates an updated **teams-tab-webpart.sppkg** package on the **sharepoint/solution** folder. ```console - gulp package-solution --ship + heft package-solution --production ``` 1. Next, you need to deploy the package that was generated to the tenant App Catalog. diff --git a/docs/spfx/web-parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md b/docs/spfx/web-parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md index a8ec3a70e..13e5d34e8 100644 --- a/docs/spfx/web-parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md +++ b/docs/spfx/web-parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md @@ -1,7 +1,7 @@ --- title: Simplify adding web parts with preconfigured entries description: Use preconfigured entries in a SharePoint Framework client-side web part to provide users with preconfigured versions of your web part. -ms.date: 06/06/2024 +ms.date: 01/01/2026 ms.localizationpriority: high --- # Simplify adding web parts with preconfigured entries @@ -14,8 +14,6 @@ More complex SharePoint Framework client-side web parts likely have many propert > [!WARNING] > SPFx solutions targeting SharePoint Server 2016 are limited to setting only a single web part property as a preconfigured entry. For more information, see [issue #5260](https://github.com/SharePoint/sp-dev-docs/issues/5260). -[!INCLUDE [spfx-gulp-heft-migration-wip](../../../../includes/snippets/spfx-gulp-heft-migration-wip.md)] - ## Web part preconfigured entries Each SharePoint Framework client-side web part consists of two pieces: @@ -452,7 +450,7 @@ In a real-life scenario, you would retrieve the list of lists from the current S 1. Confirm that the project is building by running the following command: ```console - gulp serve + heft start ``` 1. In the web browser, add the web part to the canvas and open its property pane. You should see all the properties available for users to configure. @@ -489,7 +487,7 @@ Imagine that users often use the gallery web part to show the five most recently 1. Start debugging the project by running the following command: ```console - gulp serve + heft start ``` > [!NOTE] @@ -545,7 +543,7 @@ Imagine that another group of users often uses your gallery web part to show doc 1. To see the result, start debugging the project by running the following command: ```console - gulp serve + heft start ``` 1. When you open the web part toolbox to add the web part to the canvas, you see that there are two web parts for you to choose from. @@ -613,7 +611,7 @@ Depending on how you build your web part, it could be possible that the web part 1. To see the result, start debugging the project by running the following command: ```console - gulp serve + heft start ``` 1. When you open the web part toolbox to add the web part to the canvas, you see that there are now three web parts that users can choose from.