import { sp } from "@pnp/sp/presets/all"; import { useState } from "react";
const useFetchListItems = () => {
const [items, setItems] = useState<any[]>([]);
const [loading, setLoading] = useState(false);
const fetchAllItems = async () => {
setLoading(true);
let all: any[] = [];
let paged = await [Link]("YourListTitle").[Link](5000).getPaged();
all = [Link]([Link]);
while ([Link]) {
paged = await [Link]();
all = [Link]([Link]);
setItems(all);
setLoading(false);
};
return { items, loading, fetchAllItems };
};This leverages .getPaged() and iterates until no more results are available. Just make sure:
What is PnP Js?
PnPjs is a fluent JavaScript API for consuming SharePoint REST APIs in a type-safe manner. You can use it
with SharePoint Framework, Nodejs, or JavaScript projects.
What is SharePoint Framework?
"The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side
SharePoint development, easy integration with SharePoint data, and support for open source tooling."
The SharePoint Framework works for SharePoint Online and also for on-premises (SharePoint 2016 Feature
Pack 2 and SharePoint 2019).
What is XML?
XML stands for extensible Markup Language
o Xml (Extensible Markup Language) is a markup language.
o XML is designed to store and transport data.
o XML tags are not predefined. You must define your own tags.
What is a gulp?
the term Gulp is an open-source JavaScript toolkit created by Eric Schoffstall used as a front-end web
development streaming build system.
Work with [Link] and npm, used for automation of time-consuming and repetitive tasks.
Uses in web development like minification, concatenation, cache busting, unit testing, linting, optimization,
etc.
What is [Link] in the SPFx?
the term [Link] file is an application’s directory responsible for recording the package version
number and dependencies.
What is the node_modules folder and what is its role?
the node_modules folder stores all your packages and dependencies. it also stores any dependencies of
those, So, it’s a kind of tree structure which can be quite deep. for example, if an app uses jQuery and
Reacts it will resolve the dependency as per the single library convenience.
What is NPM
NPM is the JavaScript package management
tools, worked within node js framework.
to install the npm, Node Js must have installed
What is a Yeoman generator?
SharePoint Online SPFx Yeoman Generator helps to create a SharePoint client-side solution project with
the right toolchain and project structure.
What is the local workbench in SharePoint?
SharePoint workbench gives you the flexibility to test web parts in your local environment and from a
SharePoint site.
How can we change the package name of the SPFx solution?
It is very easy to change the default package name in the SPFx solution, need to open package-
[Link] and change the Zipped Package file name for example new name is Solution/[Link].
what is the manifest file in the SPFx and what is its uses?
It contains the CDN path. You can use the built-in Office 365 Content Delivery Network (CDN) to host
static assets (images, JavaScript, Stylesheets, WOFF files) to provide better performance for your
SharePoint Online pages
OnInit() - when the SPFx page has been initialized
Supe() - used for the reference variable of parent object
What is the role of the constructor in the class.
In the SPFx it is used to initialize class member and dependencies of the class. It is always called before
anything else. It accepts props as its’s argument. Always start with super() class. States are being declared
here.
What is the advantage of Fluent UI and Its framework.
Fluent UI is Microsoft's latest UI based framework, which is used to provide a rich user experience with the
SharePoint custom development(SPFx), it has best suited with React Js and introduced Fluent UI React
framework.
Click the link for more getting started.
What is the URL of the local workbench of SPFx?
If you want to test at the local environment “[Link]
To test with the SharePoint site the URL will be [Link]
From where did you set the initial page URL?
In the project structure under the config folder in the [Link] file, you can set the initial page.
This page will run first when you debug the solution.
What is Bundling and Minification?
It improves the loading time by reducing number of calls & reducing spaces from JavaScript & CSS files.
How to deploy the SPFx solution into Sharepoint Sites?
Gulp clean –ship
Gulp build –ship
Gulp bundle –shop
Gulp package-solution –ship
import { sp } from "@pnp/sp";
import { PermissionKind } from "@pnp/sp/security";
async function updateItemPermissionsOnSave(itemId: number) {
try {
// Step 1: Check if the user has Full Control permissions
const hasFullControl = await [Link]([Link]);
if (!hasFullControl) {
[Link]("User does not have Full Control permissions.");
return;
[Link]("User has Full Control permissions.");
// Step 2: Get the item and break inheritance
const list = [Link]("Documents");
const item = [Link](itemId);
// Break inheritance (copy permissions from parent first)
await [Link](true);
// Step 3: Add Read permission to the current user
const currentUser = await [Link]();
const roleAssignments = await [Link]();
// 1073741827 is Read permission
await [Link]([Link], 1073741827);
[Link]("Permissions updated to Read for the current user.");
} catch (error) {
[Link]("Error updating permissions: ", error);
Correct my sentence. Make points also.
Suppose i have two sharepoint lists named as UAT and Prod , now i want to use the UAT customized form in Prod.
NB: Both of the lists should have same schema
Go to the UAT list setting -> Form Settings -> Versions -> Export Package
Export the zip file you have downloaded
Go inside the file. Open json file in VS code.
Inside the code , find out embeddedApp. Find out ListId and SIteID and ListURL
Change the values according to the Prod list and save the file.
Again make the file a Zip(Compressed file).
Then go to [Link]
Then Import the zip file inside there.
Open the imported app and change the OnSave , DataSource and OnNew code manually.
Then check you Prod list you will find the new app deployed there from UAT to Prod
