Asset API Tutorial | Webflow API

itemsController.js

// List collection items
export const listItems = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.listItems(
      req.params.collectionId
    );
    res.json(data.items);
  } catch (error) {
    console.error("Error fetching collection items:", error);
    res.status(500).send("Failed to fetch collection items");
  }
};
// Create collection Item
export const createItem = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.createItem(
      req.params.collectionId,
      req.body
    );
    res.json(data);
  } catch (error) {
    console.error("Error creating collection item:", error);
    res.status(500).send("Failed to create collection item");
  }
};
// Delete Collection Item
export const deleteItem = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.deleteItem(
      req.params.collectionId,
      req.params.itemId
    );
    res.status(200).send("Item deleted successfully");
  } catch (error) {
    console.error("Error deleting item:", error);
    res.status(500).send("Failed to delete item");
  }
};

List collection items

This function returns a list of items for a collection using the list items endpoint. It expects a collectionId as a URL parameter, which our frontend should send in the request.

Webflow offers query parameters to filter and sort the items returned. Including name, slug, and lastPublished. These filters are useful for narrowing down the list of items returned.

Pagination

For larger collections, you can also paginate through the items using the offset parameters returned in the response. For example, if you have 1000 items in a collection, your first request may return the pagination object {"limit": 100, "offset": 0, total: 1000}.

To get the next set of 100 items, your second request should add a value of 1 to the offset value from the previous response in our example our new offset would be 1. Loop this process until you have retrieved all items.

Create collection item

itemsController.js

// List collection items
export const listItems = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.listItems(
      req.params.collectionId
    );
    res.json(data.items);
  } catch (error) {
    console.error("Error fetching collection items:", error);
    res.status(500).send("Failed to fetch collection items");
  }
};
// Create collection Item
export const createItem = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.createItem(
      req.params.collectionId,
      req.body
    );
    res.json(data);
  } catch (error) {
    console.error("Error creating collection item:", error);
    res.status(500).send("Failed to create collection item");
  }
};
// Delete Collection Item
export const deleteItem = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.deleteItem(
      req.params.collectionId,
      req.params.itemId
    );
    res.status(200).send("Item deleted successfully");
  } catch (error) {
    console.error("Error deleting item:", error);
    res.status(500).send("Failed to delete item");
  }
};

This function creates a new item in a collection using the create item endpoint. It also expects a collectionId as a URL parameter, as a body payload for the item that includes details like:

isDraft: Indicates whether the item is a draft or should be published upon site publish. This defaults to true.
isArchived: Indicates whether the item is archived. This defaults to false.
fieldData: An object containing the field values for the item with required fields for name and slug. You can add additional fields and values as needed based on the collection schema.

On success, this function returns the new item object with the id and other details.

Create multiple items

The create item endpoint supports creating multiple items at once by sending an array named items in the payload. Each item in the array should include the same fields as a single item payload.

If your site uses localization, you can create items in multiple locales via the create bulk items endpoint, which requires a collection_id as a path parameter.

Delete collection item

itemsController.js

// List collection items
export const listItems = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.listItems(
      req.params.collectionId
    );
    res.json(data.items);
  } catch (error) {
    console.error("Error fetching collection items:", error);
    res.status(500).send("Failed to fetch collection items");
  }
};
// Create collection Item
export const createItem = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.createItem(
      req.params.collectionId,
      req.body
    );
    res.json(data);
  } catch (error) {
    console.error("Error creating collection item:", error);
    res.status(500).send("Failed to create collection item");
  }
};
// Delete Collection Item
export const deleteItem = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.deleteItem(
      req.params.collectionId,
      req.params.itemId
    );
    res.status(200).send("Item deleted successfully");
  } catch (error) {
    console.error("Error deleting item:", error);
    res.status(500).send("Failed to delete item");
  }
};

This function deletes an item in a collection using the delete item endpoint. It expects a collectionId and itemId as URL parameters, which our frontend should send in the request.

Since this endpoint returns a 204 status code on success, we can just return a success message to the frontend.

List collection items

This function returns a list of items for a collection using the list items endpoint. It expects a collectionId as a URL parameter, which our frontend should send in the request.

Webflow offers query parameters to filter and sort the items returned. Including name, slug, and lastPublished. These filters are useful for narrowing down the list of items returned.

Pagination

Create collection item

This function creates a new item in a collection using the create item endpoint. It also expects a collectionId as a URL parameter, as a body payload for the item that includes details like:

isDraft: Indicates whether the item is a draft or should be published upon site publish. This defaults to true.
isArchived: Indicates whether the item is archived. This defaults to false.
fieldData: An object containing the field values for the item with required fields for name and slug. You can add additional fields and values as needed based on the collection schema.

On success, this function returns the new item object with the id and other details.

Create multiple items

The create item endpoint supports creating multiple items at once by sending an array named items in the payload. Each item in the array should include the same fields as a single item payload.

If your site uses localization, you can create items in multiple locales via the create bulk items endpoint, which requires a collection_id as a path parameter.

Delete collection item

This function deletes an item in a collection using the delete item endpoint. It expects a collectionId and itemId as URL parameters, which our frontend should send in the request.

Since this endpoint returns a 204 status code on success, we can just return a success message to the frontend.

itemsController.js

// List collection items
export const listItems = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.listItems(
      req.params.collectionId
    );
    res.json(data.items);
  } catch (error) {
    console.error("Error fetching collection items:", error);
    res.status(500).send("Failed to fetch collection items");
  }
};
// Create collection Item
export const createItem = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.createItem(
      req.params.collectionId,
      req.body
    );
    res.json(data);
  } catch (error) {
    console.error("Error creating collection item:", error);
    res.status(500).send("Failed to create collection item");
  }
};
// Delete Collection Item
export const deleteItem = async (req, res) => {
  try {
    const data = await req.webflow.collections.items.deleteItem(
      req.params.collectionId,
      req.params.itemId
    );
    res.status(200).send("Item deleted successfully");
  } catch (error) {
    console.error("Error deleting item:", error);
    res.status(500).send("Failed to delete item");
  }
};