Skip to content

feat: add React configurable list sample - #6476

Open
vystartasv wants to merge 2 commits into
pnp:mainfrom
vystartasv:feat/react-list-and-records
Open

feat: add React configurable list sample#6476
vystartasv wants to merge 2 commits into
pnp:mainfrom
vystartasv:feat/react-list-and-records

Conversation

@vystartasv

Copy link
Copy Markdown
Contributor

By submitting this pull request, you agree to the contribution guidelines

  • New sample
  • Bug fix/update
  • Related issues: fixes #X, partially #Y, mentioned in #Z

What's in this Pull Request?

Adds samples/react-configurable-list, a read-only React SharePoint list and records browser for configurable SMB/SME data views.

  • Configures list title, visible fields, page size, default sort, sort direction, and search.
  • Uses explicit PnPjs $select/$expand queries with bounded pages.
  • Supports text, number, currency, date, Boolean, choice, hyperlink, and person fields.
  • Provides responsive table/card views, keyboard-accessible sorting and selection, safe links, loading, empty, retry, permission, throttling, and generic error states.
  • Includes focused tests for query construction, field mapping, formatting, URL safety, paging, and failed requests.
  • Read-only MVP: no create, edit, delete, attachments, bulk actions, or custom query language.

Node Version

Node version used: 22.22.2

How was this tested?

From samples/react-configurable-list:

  • npm install --package-lock-only --ignore-scripts — passed; 0 vulnerabilities reported by npm at lockfile generation.
  • npm ci — passed.
  • npm run lint — passed.
  • npm test -- --clean — passed: 5 suites, 15 tests.
  • npm run build — passed with TypeScript 5.8.3 and Webpack 5.105.4.
  • npm run package — passed with production build and package-solution validation.
  • Generated build/package output was removed before commit.
  • Static audit found no debugger, TODO/FIXME, console.log, or credential-like content.

Tenant validation and a representative static PNG screenshot are pending. The README and metadata state this explicitly; no tenant result or fabricated screenshot is claimed.

Checklist

  • My pull request affects only ONE sample.
  • My sample builds without errors.
  • I have updated the README.md file's Version history. For new samples, created a new README.md file matching the repository requirements.
  • My README.md has at least one static high-resolution screenshot located in the assets folder. Pending tenant validation and screenshot help.
  • My README.md contains complete setup instructions, including prerequisites and permissions required.
  • My solution includes a .nvmrc file indicating the version of Node.js.

@github-actions

Copy link
Copy Markdown
Contributor

Validation failed!

File: samples/react-configurable-list/assets/sample.json

@vystartasv

Copy link
Copy Markdown
Contributor Author

Hi maintainers and community 👋

Could someone with access to a SharePoint Online tenant help validate this sample and capture one or two representative screenshots?

This is a read-only, configurable SharePoint list and records browser. Helpful checks would be:

  • Configure it against a small ordinary SharePoint list.
  • Verify field discovery and supported text, number, currency, date, Boolean, choice, hyperlink, and person rendering.
  • Check explicit field selection, sorting, search, paging, empty results, and retry/error states.
  • Confirm permission-denied and throttling behavior if possible.
  • Check keyboard operation, row/card selection, safe links, and narrow-viewport rendering.
  • Capture one or two screenshots suitable for the README.

Dummy data is completely fine. Please remove or blur tenant names, site URLs, user names, record details, and any other sensitive information before posting screenshots.

The sample builds and tests locally, but I do not currently have a tenant available for end-to-end validation. Any observations about setup, permissions, filtering, paging, and usability would greatly help complete the pull request. Thank you!

@github-actions

Copy link
Copy Markdown
Contributor

Sample PR validation for #6476

⚠️ Validation status: warnings

We automatically validate all pull requests against our contribution guidance to ensure that all samples provide a consistent experience to our community.

In order to merge this PR in a timely manner, the following criteria must be met:

Validation Status
Pull request affects only one folder ✅ Succeeded
Sample folder name follows naming convention ✅ Succeeded
README.md contains visitor stat image ✅ Succeeded
Sample requires a .nvmrc file ✅ Succeeded
Sample requires a README.md ✅ Succeeded
Sample requires a screenshot .png in assets folder ⚠️ Warning
No .sppkg file ✅ Succeeded
No node_modules folder ✅ Succeeded
No lib folder ✅ Succeeded
No upgrade reports ✅ Succeeded

@vystartasv please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.

@github-actions

Copy link
Copy Markdown
Contributor

Sample PR validation for #6476

⚠️ Validation status: warnings

We automatically validate all pull requests against our contribution guidance to ensure that all samples provide a consistent experience to our community.

In order to merge this PR in a timely manner, the following criteria must be met:

Validation Status
Pull request affects only one folder ✅ Succeeded
Sample folder name follows naming convention ✅ Succeeded
README.md contains visitor stat image ✅ Succeeded
Sample requires a .nvmrc file ✅ Succeeded
Sample requires a README.md ✅ Succeeded
Sample requires a screenshot .png in assets folder ⚠️ Warning
No .sppkg file ✅ Succeeded
No node_modules folder ✅ Succeeded
No lib folder ✅ Succeeded
No upgrade reports ✅ Succeeded

@vystartasv please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant