Asset API Tutorial | Webflow API

List collections

Our first method, listCollections, is used to fetch and return the list of collections for an authorized site using the list collections endpoint. It expects a siteId as a URL parameter, which our frontend should send in the request. If successful, it will respond with a JSON object containing the list of collections.

Get collection details

Get collection details will get the details of a single collection using the get collection endpoint. It expects a collectionId as a URL parameter, which our frontend should send in the request. If successful, it will respond with a JSON object with additional details about the collection, most importantly the fields array which contains the schema, or the fields that belong to the collection.

Create fields

This is a helper function that creates multiple fields for a given collection using the create fields endpoint. In our frontend we've created a list of preset collections in CollectionPresets.js. Each preset has a collection object that contains the collection details, as well as a list of fields that each have their own name, type, and other properties.

This helper function expects a collectionId and a list of fields, and will create each field for the given collection. So we must first create the collection, and then use the collectionId to create the fields.

Create a collection with fields

This is the main function that creates a collection and the corresponding fields. It expects a siteId, as well as a collection object that contains the collection details and a list of fields from a selected preset from CollectionPresets.js.

It will first create the collection using the create collection endpoint, then use the helper function createFields to create multiple fields. Finally, it will respond with the results of each successful field creation.

Delete a collection

This function deletes a collection using the delete collection endpoint. It expects a collectionId as a URL parameter, which our frontend should send in the request. The delete endpoint does not return any data, so we will just respond with a status of 200.

collectionController.js

// List Collections
export const listCollections = async (req, res) => {
  try {
    const data = await req.webflow.collections.list(req.params.siteId);
    res.json(data.collections); // Respond with collection data
  } catch (error) {
    console.error("Error fetching collections:", error);
    res.status(500).send("Failed to fetch collections");
  }
};

// Get Collection Details
export const getCollection = async (req, res) => {
  try {
    const data = await req.webflow.collections.get(req.params.collectionId);
    res.json(data); // Respond with collection details
  } catch (error) {
    console.error("Error fetching collection details:", error);
    res.status(500).send("Failed to fetch collection");
  }
};

// Helper function to create multiple fields for a given collection
async function createFields(collectionId, fields) {
  // Create each field in parallel and return the results
  return Promise.all(
    fields.map((field) => {
      return req.webflow.collections.fields
        .create(collectionId, field)
        .then((response) => ({
          success: true,
          field: field.name,
          id: response.id,
        }))
        .catch((error) => ({
          success: false,
          field: field.name,
          error: error.message,
        }));
    })
  );
}

// Create a preset collection and corresponding fields
export const createCollectionWithFields = async (req, res) => {
  const siteId = req.params.siteId;
  const { name, singularName, slug, fields } = req.body.collection;

  // Define details of the new collection
  const collectionDetails = {
    displayName: name,
    singularName: singularName,
    slug: slug,
  };

  try {
    // Create the collection in Webflow
    const collection = await req.webflow.collections.create(
      siteId,
      collectionDetails
    );
    console.log(`Created Collection: ${collection.id} successfully`);

    // Create fields for the new collection
    const fieldCreationResults = await createFields(collection.id, fields);
    console.log("All fields creation attempted.");

    // Filter results to separate successful and failed field creations
    const successfulFields = fieldCreationResults.filter(
      (result) => result.success
    );
    const failedFields = fieldCreationResults.filter(
      (result) => !result.success
    );

    // Respond with detailed information about the operation
    res.status(201).send({
      message: "Collection and fields processed.",
      collectionId: collection._id,
      successfulFields: successfulFields,
      failedFields: failedFields,
    });
  } catch (error) {
    console.error("Failed to create collection or fields:", error);
    res.status(500).send({
      message: "Failed to create collection or fields",
      error: error.message,
    });
  }
};

// Delete Collection
export const deleteCollection = async (req, res) => {
  try {
    const data = await req.webflow.collections.deleteCollection(
      req.params.collectionId
    );
    res.json(data); // Respond with data
  } catch (error) {
    console.error("Error deleting collection:", error);
    res.status(500).send("Failed to delete collection");
  }
};