Merge List Columns

This SPFx web part merges SharePoint list columns from different lists in any site into a DetailsList component. According to the administrator's adjustments, either admins or users can configure this web part.

Contents

• Installation
• Add Web Part
• Wep Part Configuration
• Functionality

Installation

First, clone the project and open it in VS Code. In Terminal, run the following command:

  npm run finalBuild

Next step is to navigate to the 'sharepoint\solution' folder to retrieve the 'multi.sppkg' solution package.

Then, navigate to a SharePoint site appcatalog and deploy the 'multi.sppkg' solution to your appcatalog site. Let’s call this site the destination site.

Now, go to the SharePoint Administration Center using this URL: https://yourtenant-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/home. Since this solution will create a list in the destination site, and the Graph API needs permission to read all sites; it is required to approve an API access request. To do so, access the SharePoint Admin Center, click on Advanced, then API access. The Sites.ReadWrite.All permission is required.

Finally, select the APIs related to this solution and approve them, as shown in the screenshot below.

Add Web Part

Now after installing the web part, it is ready to use. Navigate to SharePoint Site contents and create a page. You can then use this web part on any SharePoint pages. Edit the page and add the Merge web part.

Web Part Configuration

Once the web part is added to a page, a button will appear in the web part zone. If a site owner or administrator clicks that button, they can easily configure the web part. This button is available only for administrators. All queries will be logged in a SharePoint list, and based on the web part configuration, the administrator can decide who can see the result (Merged columns). Let's explore the different parts of the web part configuration.

As shown in the screenshot above, there are two main parts in the configurations.

• Styling

  • Description Field

  • Button Alignment

  • Button size

    These three items are related to the style and appearance of the web part

• Visiblity Status

  • Who can see this web part?

  • Who can edit this web part?

    Obviously, these two items are related to visibility and edit capability of the web part

Functionality

When an administrator clicks on the main button of the web part, a Fluent UI panel is displayed. Within the panel, there are multi-select Fluent UI dropdown components that administrators can use to select sites, lists, and columns associated with those lists. Upon clicking the Show grid button, a Fluent UI DetailsList containing all the selected columns displays accumulated items. The web part provides the ability to filter items.

Once an administrator configures everything and clicks on Show grid, all encoded queries will be recorded in the 'MergeLists' list, which is automatically created by the web part. This allows current site users to see the results without any problems regardless of columns type.

Used SharePoint

Framework Version

Solution

Solution	Author
Multi.sppkg	Shahab Matapour

Version history

Version	Date	Comments
1.0	January 27, 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.

---