121 lines
4.8 KiB
Markdown
121 lines
4.8 KiB
Markdown
|
# webpart-quick-links
|
||
|
|
|
||
|
|
## Summary
|
||
|
|
|
||
|
|
This project is a SharePoint Framework (SPFx) WebPart that displays a set of quick links fetched from a SharePoint list. The quick links are displayed with icons and titles in a responsive grid layout.
|
||
|
|
|
||
|
|
[picture of the solution in action, if possible]
|
||
|
|
|
||
|
|
## Features
|
||
|
|
|
||
|
|
- **Dynamic Data Fetching**: Retrieves quick links dynamically from a SharePoint list, allowing for easy updates without modifying code.
|
||
|
|
- **Customizable List Fields**: Configurable property pane options for specifying the list title and internal names of the fields for title, URL, and icon.
|
||
|
|
- **Responsive Design**: Adapts to different screen sizes with a responsive grid layout, ensuring a consistent look on various devices.
|
||
|
|
- **Modern UI**: Displays quick links in a modern card layout with rounded corners and a hover effect for improved user experience.
|
||
|
|
- **Theming Support**: Uses SharePoint theme colors for a consistent look with the rest of the SharePoint site, including theme-based colors for icons and text.
|
||
|
|
- **Error Handling**: Includes error handling for data fetching to manage issues with retrieving list items gracefully.
|
||
|
|
|
||
|
|
## Used SharePoint Framework Version
|
||
|
|
|
||
|
|
|
||
|
|
1.19.0
|
||
|
|
|
||
|
|
## Applies to
|
||
|
|
|
||
|
|
- [SharePoint Framework](https://aka.ms/spfx)
|
||
|
|
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||
|
|
|
||
|
|
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||
|
|
|
||
|
|
## Prerequisites
|
||
|
|
|
||
|
|
- Node.js (v18.20.4)
|
||
|
|
- SharePoint Online environment
|
||
|
|
- A SharePoint list containing the quick links. This list is configured with columns
|
||
|
|
Title - Single line of text
|
||
|
|
URL - Hyperlink or Picture
|
||
|
|
Icon - Single line of text // Fluent Icon names can be referred from (https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
1. Clone the repository:
|
||
|
|
git clone <repository-url>
|
||
|
|
2. Navigate to the project directory:
|
||
|
|
cd quick-links-webpart
|
||
|
|
3. Install the dependencies:
|
||
|
|
npm install
|
||
|
|
|
||
|
|
## Configuration
|
||
|
|
|
||
|
|
Before running the WebPart, you need to configure the property pane to point to the correct SharePoint list and fields.
|
||
|
|
|
||
|
|
## Property Pane Fields
|
||
|
|
|
||
|
|
List Title: The title of the SharePoint list to fetch data from.
|
||
|
|
Title Field: The internal name of the Title field in the SharePoint list.
|
||
|
|
URL Field: The internal name of the URL field in the SharePoint list.
|
||
|
|
Icon Field: The internal name of the Icon field in the SharePoint list.
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
Run the WebPart locally:
|
||
|
|
|
||
|
|
gulp serve
|
||
|
|
Open the SharePoint Workbench to add the WebPart and configure the property pane fields.
|
||
|
|
|
||
|
|
## Project Structure
|
||
|
|
|
||
|
|
The project includes the following key files:
|
||
|
|
|
||
|
|
QuickLinksWebPart.ts: Defines the main WebPart class and handles rendering and property pane configuration.
|
||
|
|
QuickLinks.tsx: Defines the React component that fetches and displays the quick links.
|
||
|
|
QuickLinksWebPart.module.scss: Contains the CSS styles for the QuickLinks component.
|
||
|
|
|
||
|
|
## Building the Project
|
||
|
|
|
||
|
|
To build the project, run the following command:
|
||
|
|
|
||
|
|
gulp build
|
||
|
|
|
||
|
|
## Deploying the WebPart
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
|
||
|
|
| Solution | Author(s) |
|
||
|
|
| ----------- | ----------------------- |
|
||
|
|
| folder name | Venkadesh Sundaramurthy |
|
||
|
|
|
||
|
|
## Version history
|
||
|
|
|
||
|
|
| Version | Date | Comments |
|
||
|
|
| ------- | --------------- | --------------- |
|
||
|
|
| 1.0 | August 05, 2024 | Initial release |
|
||
|
|
|
||
|
|
## Disclaimer
|
||
|
|
|
||
|
|
**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.**
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Minimal Path to Awesome
|
||
|
|
|
||
|
|
- 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.
|
||
|
|
|
||
|
|
> 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.
|
||
|
|
|
||
|
|
## References
|
||
|
|
|
||
|
|
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||
|
|
- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
|
||
|
|
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
|
||
|
|
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
|
||
|
|
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|