This webpart pulls images from a SharePoint list and renders them similar to stories on Instagram. Use this webpart to provide an engaging image showcase on your SharePoint site.
Get your own free development tenant by subscribing to Microsoft 365 developer program
- This solution uses Yarn. Either install yarn globally via npm or delete yarn.lock file.
- Before deploying you should create a compatible list on the destination SharePoint site. Use the following fields:
- Title: Single line of text (default)
- Content: Single or multiline text
- Image: Image field type
- Author: Person field type
- Active: Yes/No field type
- Permission User.ReadBasic.All to the Graph API
| Solution | Author(s) |
|---|---|
| sp-insta-stories | MRS Company Ltd |
| Version | Date | Comments |
|---|---|---|
| 1.0 | November 4, 2022 | Initial release |
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.
git clone {repo url} # Clone repo
cd sp-insta-stories # Change directory to project folder
yarn # Install dependencies
gulp serve # Serve in dev. Remember to change your dev environment in config/serve.json
gulp build # Build solution
gulp bundle --ship # Bundle for prod
gulp package-solution --ship # Create .sppkg fileThen upload the sharepoint/sp-insta-stories.sppkg file to your App Catalog and deploy.
This extension illustrates the following concepts:
- Using @pnp/sp to pull data from SharePoint API
- Using @pnp/graph to pull User information from Microsoft Graph
- Using FluentUI components
- Inspired by this great work from Luis Mañez in the PnP sample repo
- 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