<<<<<<< HEAD
A powerful web part that allows users to test and build CAML queries visually with a rich, intuitive interface. This enhanced version includes a visual query builder, query validation, saved queries, and more.
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node. |
| Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility. |
This sample is optimally compatible with the following environment configuration:
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1"){kind=icon}
For more information about SPFx compatibility, please refer to https://aka.ms/spfx-matrix
Get your own free development tenant by subscribing to Microsoft 365 developer program
- Dan Toft - Original author
- Nicolas Kheirallah - SPFx 1.20.0 modernization with enhanced features including visual query builder, validator, and saved queries =======
Short summary on functionality and used technologies.
[picture of the solution in action, if possible]
Get your own free development tenant by subscribing to Microsoft 365 developer program
Any special pre-requisites?
| Solution | Author(s) |
|---|---|
| folder name | Author details (name, company, twitter alias with link) |
a58305c (Base)
| Version | Date | Comments |
|---|---|---|
| <<<<<<< HEAD | ||
| 1.0 | November 26, 2022 | Initial release |
| 2.0 | March 11, 2025 | Enhanced version with visual query builder, validator, saved queries, and SPFx 1.20.0 upgrade |
Basic knowledge of SharePoint lists and CAML query language is helpful, but the visual query builder makes it accessible to beginners as well.
For advanced usage, check out the CAML documentation.
- Clone this repository (or download this solution as a .ZIP file then unzip it)
- From your command line, change your current directory to the directory containing this sample (
react-caml2table, located undersamples) - in the command line run:
npm installgulp serve
This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.
This enhanced web part provides a comprehensive tool for working with CAML queries in SharePoint:
- Visual Query Builder - Create complex CAML queries without writing XML
- Query Validation - Instant feedback on query syntax and potential issues
- Query Templates - Pre-built templates for common query patterns
- Query History - Navigate through previously executed queries
- Saved Queries - Save, manage and reuse your queries
- Field Reference - Quick access to list field metadata
- Export Results - Export query results to CSV
- Enhanced Editor - Monaco Editor for rich XML editing experience
- Modern UI - Fluent UI components for a SharePoint-native look and feel
- Microsoft Graph API Integration - For SharePoint list operations
- PnPjs Integration - Simplified SharePoint REST API interactions
- SPFx 1.20.0 compatibility - Latest SharePoint Framework support
- React Hooks & Context - Modern React patterns
- Separation of Concerns - Clean architecture with services, utilities, and components
- TypeScript Type Safety - Strong typing throughout
- Responsive Design - Works on all device sizes
The web part includes several pre-built query templates:
<View>
<Query>
<Where>
<In>
<FieldRef Name="ID" />
<Values>
<Value Type="Integer">1</Value>
<Value Type="Integer">4</Value>
<Value Type="Integer">6</Value>
<Value Type="Integer">8</Value>
</Values>
</In>
</Where>
</Query>
</View><View>
<Query>
<Where>
<Geq>
<FieldRef Name="Modified" />
<Value Type="DateTime">
<Today OffsetDays="-7" />
</Value>
</Geq>
</Where>
<OrderBy>
<FieldRef Name="Modified" Ascending="False" />
</OrderBy>
</Query>
</View><View>
<RowLimit>10</RowLimit>
<Query>
<OrderBy>
<FieldRef Name="ID" Ascending="False" />
</OrderBy>
</Query>
</View>The solution follows a modular architecture:
src/
└── webparts/
└── caml2Table/
├── Caml2TableWebPart.ts # Main web part definition
├── Caml2TableContext.ts # React context
├── components/ # React components
│ ├── Caml2Table.tsx # Main component
│ ├── CamlValidator.tsx # Query validation component
│ ├── CamlQueryBuilder.tsx # Visual query builder
│ └── SavedQueriesManager.tsx # Saved queries component
├── models/ # Data models
│ ├── IFieldInfo.ts # Field metadata interface
│ ├── ICamlCondition.ts # Query condition interface
│ └── ISavedQuery.ts # Saved query interface
├── services/ # Service layer
│ ├── SharePointService.ts # SharePoint API interactions
│ └── StorageService.ts # Local storage service
└── utils/ # Utilities
├── CamlHelpers.ts # CAML generation utilities
├── QueryTemplates.ts # Predefined query templates
└── QueryHistoryManager.ts # Query history utilities
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run spfx doctor from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at issues related to this sample to see if anybody else is having the same issues.
You can also try looking at discussions related to this sample and see what the community is saying.
If you encounter any issues using this sample, create a new issue.
For questions regarding this sample, create a new question.
Finally, if you have an idea for improvement, make a suggestion.
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.
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
a58305c (Base)