useSharePointTreeView

@spartanfx/react v1.2.2

---

@spartanfx/react / spfx / useSharePointTreeView

Function: useSharePointTreeView()

function useSharePointTreeView(config): UseSharePointTreeViewReturn;

SharePoint adapter hook for the TreeView component. Returns items + the matching schema, ready to spread into <TreeView />.

Supports two hierarchy models:

• 'parentId' — a SharePoint list with a self-lookup column (parent/child).
• 'path' — a SharePoint document library, where the hierarchy is the file path. All folders + files are read recursively and the TreeView builds (and synthesizes any missing) folders from the paths.

Configuration

Required

Property	Type	Description
mode	TreeViewHierarchyMode	Hierarchy model: - 'parentId' — a SharePoint list with a self-lookup column. - 'path' — a SharePoint document library (hierarchy from the file path).
sp	SPFI	PnPjs SPFI instance.

Options

Property	Type	Description
camlQuery?	string	Full-control CAML ViewXml, consistent with the DataTable/TaskManager/Planner SPFx adapters — its <ViewFields> define the select, <Query> the filter + sort, <RowLimit> the page size. - 'parentId' mode: runs via getItemsByCAMLQuery, replacing the default query. Include the id, label and parent-lookup fields in <ViewFields>. - 'path' mode: used as the document-library view; when omitted a Scope='RecursiveAll' view returning every folder + file is used.
fieldMapping?	ISharePointTreeViewFieldMapping	Field mapping overrides.
listId?	string	List/library id. Provide this or listName.
listName?	string	List/library title. Provide this or listId.
rowLimit?	number	Maximum rows to fetch. Default 5000.

Full type reference: ISharePointTreeViewConfig

Returns

UseSharePointTreeViewReturn

Example

// Parent/child list
const tree = useSharePointTreeView({
  sp,
  mode: 'parentId',
  listName: 'TreeViewTest',
  fieldMapping: { label: 'Title', parentId: 'Parent' },
});

// Document library
const docs = useSharePointTreeView({ sp, mode: 'path', listName: 'PersonalRepository' });

return <TreeView items={tree.items} schema={tree.schema} />;