In this section, we delve into the Folder Object, a part of the Webflow Designer Extension API.

The Folder Object represents a site folder and provides methods for managing its properties. Whether you're renaming folders, changing slugs, or managing parent-child relationships, the Folder Object offers the tools you need.

Properties

id
Type: FolderId

Description: The unique identifier of the folder.

type
Type: 'Folder'

Description: Indicates that the object is of type 'Folder'.

Methods

Get Name

getName()

Description: Retrieve the name of the folder.

let folderName = myFolder.getName();
console.log("Folder Name:", folderName);

Set Name

setName(name: string)

Parameters:

• name: string - The new name to set for the folder.

Description: Give your folder a new name.

myFolder.setName("New Folder Name");

Get Slug

getSlug()

Description: Find out the slug of the folder.

let folderSlug = myFolder.getSlug();
console.log("Folder Slug:", folderSlug);

Set Slug

setSlug(slug: string)

Parameters:

• slug: string - The new slug to set for the folder.

Description: Choose a cool new slug for your folder.

myFolder.setSlug("new-folder-slug");

Get Parent Folder

getParent(): Promise<null | Folder>

Description: Check if your folder has a parent folder, and if yes, get its details.

myFolder.getParent().then((parentFolder) => {
  if (parentFolder) {
    console.log("Parent Folder Name:", parentFolder.getName());
  } else {
    console.log("No parent folder.");
  }
}).catch((error) => {
  console.error("Error while getting parent folder:", error);
});

Set Parent Folder

setParent(parent: Folder)

Parameters:

• parent: Folder - The parent folder to set for the current folder.

Description: Assign a new parent folder to your folder.

myFolder.setParent(parentFolder);

Save Changes

save(): Promise<undefined>

Description: Keep all the changes you made to your folder.

myFolder.save().then(() => {
  console.log("Folder changes saved successfully!");
}).catch((error) => {
  console.error("Error while saving folder changes:", error);
});

Delete Folder

destroy(): undefined

Description: Remove the folder from existence!

myFolder.destroy();