sp-dev-fx-webparts/samples/react-quick-links-grid

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
• Microsoft 365 tenant

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

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
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
• 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