Folder SDK

The folder SDK provides functionality to manage folders and their relations to parent folders and projects. Every folder belongs to a project and can have subfolders.

A root folder is a folder that is not a subfolder of another folder. It is always associated with a project. Folders can be nested down to a level of 20 on an API level but it is recommended to keep the nesting level as low as possible. The UI usually supports a nesting level of 5.

Installation

To integrate the SDK Folder package into your project, use the following command with your preferred package manager:

npm install @sdk/folder

Folder Service

A service has to be set up to use the folder SDK. This service can be used to create, update and delete folders.

import myConnectClient from './myConnectClient';
import { FolderService, FolderMapper } from '@sdk/folder';
 
const folderService = new FolderService(myConnectClient, new FolderMapper());

The example above shows how to set up a folder service. It assumes that myConnectClient is a instance of the Connect client from the @sdk/connect package.

For a documentation of the folder service, please refer to the API documentation.

React Integration

In order to have access to the folder service in your React components, you can use the FolderProvider. As a folder is always associated with a project, you need to provide the current project ID and the current folder ID to the FolderProvider. If only the project is of relevance, you can provide the project's root folder ID as the current folder ID.

import router from 'my-framework/router';
import { FolderProvider } from '@sdk/folder';
 
/**
 * Defines what should happen when a folder is navigated to by the user.
 */
const handleNavigateToFolder = (destinationProjectId: ProjectId, destinationFolderId: FolderId) => {
  router.push({
    pathname: `/projects/${destinationProjectId}/${destinationFolderId}`,
  });
};
 
export default function App() {
  return (
    <FolderProvider onNavigateToFolder={handleNavigateToFolder} currentProjectId={projectId} currentFolderId={folderId}>
      {children}
    </FolderProvider>
  );
}