+ The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling. +
+Isolated mode: ⚠ mandatory. Find more samples on MGT Playground. MGT components require API permissions, see the Microsoft docs for more info.
+Isolated mode: ⚠ mandatory. Find more samples on MGT Playground. MGT components require API permissions, see the Microsoft docs for more info.
diff --git a/samples/react-cherry-picked-content/samples/Isolated-MGT-Emails.html b/samples/react-cherry-picked-content/samples/Isolated-MGT-Emails.html index 9c118e061..7f60e60ad 100644 --- a/samples/react-cherry-picked-content/samples/Isolated-MGT-Emails.html +++ b/samples/react-cherry-picked-content/samples/Isolated-MGT-Emails.html @@ -1,6 +1,6 @@Isolated mode: ⚠ mandatory. Find more samples on MGT Playground. MGT components require API permissions, see the Microsoft docs for more info.
+Isolated mode: ⚠ mandatory. Find more samples on MGT Playground. MGT components require API permissions, see the Microsoft docs for more info.
+ +Isolated mode: ⚠ mandatory. Find more samples on the MGT Playground. MGT components require API permissions, see the Microsoft docs for more info.
+Isolated mode: ⚠ mandatory. Find more samples on the MGT Playground. MGT components require API permissions, see the Microsoft docs for more info.
diff --git a/samples/react-cherry-picked-content/samples/Isolated-MGT-Planner.html b/samples/react-cherry-picked-content/samples/Isolated-MGT-Planner.html new file mode 100644 index 000000000..405ad9af5 --- /dev/null +++ b/samples/react-cherry-picked-content/samples/Isolated-MGT-Planner.html @@ -0,0 +1,11 @@ +Isolated mode: ⚠ mandatory. Find more samples on MGT Playground. MGT components require API permissions, see the Microsoft docs for more info.
+ + + +{title}
+{strings.FeedbackSent}
+{strings.Error}
++ {strings.FeedbackWrapperTitle} +
++ {strings.FeedbackWrapperDescription} +
++ Title + | ++ Name + | ++ Size (KB) + | +
{document.Title} | +{document.Name} | +{(document.Size / 1024).toFixed(2)} | +
&nbps; | ++ Total: + | ++ {(totalSize / 1024).toFixed(2)} + | +
Error
; + } +}; diff --git a/samples/react-pnp-js-hooks/src/webparts/pnPjsExample/components/interfaces.ts b/samples/react-pnp-js-hooks/src/webparts/pnPjsExample/components/interfaces.ts new file mode 100644 index 000000000..dcb90e79a --- /dev/null +++ b/samples/react-pnp-js-hooks/src/webparts/pnPjsExample/components/interfaces.ts @@ -0,0 +1,20 @@ +// create File item to work with it internally +export interface IFile { + Id: number; + Title: string; + Name: string; + Size: number; +} + +// create PnP JS response interface for File +export interface IResponseFile { + Length: number; +} + +// create PnP JS response interface for Item +export interface IResponseItem { + Id: number; + File: IResponseFile; + FileLeafRef: string; + Title: string; +} \ No newline at end of file diff --git a/samples/react-pnp-js-hooks/src/webparts/pnPjsExample/hooks/useDocuments.ts b/samples/react-pnp-js-hooks/src/webparts/pnPjsExample/hooks/useDocuments.ts new file mode 100644 index 000000000..a5735ca2b --- /dev/null +++ b/samples/react-pnp-js-hooks/src/webparts/pnPjsExample/hooks/useDocuments.ts @@ -0,0 +1,114 @@ +import { Logger, LogLevel } from "@pnp/logging"; +import { spfi, SPFI } from "@pnp/sp"; +import { useEffect, useState } from "react"; +import { IFile, IResponseItem } from "../components/interfaces"; +import { getSP } from "../pnpjsConfig"; +import { Caching } from "@pnp/queryable"; +import { IItemUpdateResult } from "@pnp/sp/items"; + +const useDocuments = () => { + const LOG_SOURCE = "🅿PnPjsExample"; + const LIBRARY_NAME = "Documents"; + + const [documents, setDocuments] = useState