Add Web Parts to Tabs in Modern SharePoint Pages.

• Upload the Solution Package to your app catalog
• Add the web part “ModernHillbillyTabs” to the section of the page where you want the tabs to be.
• Add the web parts you want to be in tabs to the SAME SECTION
• Edit the Web Part Properties of the ModernHillbillyTabs and click on the button “Manage Tab Labels” Using the collection property that is displayed, select the web part you want to put in a tab and specify the label you want for that tab. You’ll notice when selecting a web part it just says “Web Part 1”, “Web Part 2”, etc… this is because there’s no identifying title on all web parts. You may have to guess which web part you are labeling and go back and update the label if you were wrong. Hey, you get what you pay for.

Blog post with video using the web part can be found at: http://www.markrackley.net/2022/06/29/the-return-of-hillbilly-tabs/

• SharePoint Framework
• Microsoft 365 tenant

Get your own free development tenant by subscribing to Microsoft 365 developer program

Any special pre-requisites?

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

• Clone this repository
• Ensure that you are at the solution folder
• in the command-line run:
  • npm install
  • gulp serve

Include any additional steps as needed.

Description of the extension that expands upon high-level summary above.

This extension illustrates the following concepts:

• topic 1
• topic 2
• topic 3

Notice that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions advance.

Share your web part with others through Microsoft 365 Patterns and Practices program to get visibility and exposure. More details on the community, open-source projects and other activities from http://aka.ms/m365pnp.

• Getting started with SharePoint Framework
• Building for Microsoft teams
• Use Microsoft Graph in your solution
• Publish SharePoint Framework applications to the Marketplace
• Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development"# Modern_Hillbilly_Tabs"