Importing items that reference another collection

Ok so I have a collection of “Providers” and a collection of “Articles”. As I bring new Articles in via csv Import is there a way I can have the “Providers” automatically map to the referenced collection so that I don’t have to go into the individual items and set the provider one at a time?


Here is my public share link: LINK
(how to access public share link)

1 Like

Good afternoon @Edmund_Bini, I see your concern and unfortunately to answer your question would be NO. Since it is a reference field that you are connecting to your articles you would need to manually attached that field to each article.

I hope you don’t have too many? Yes it will take some time, but it actually pretty easy, as long as the fields are set up properly.

Is there a way to put the actual reference CID as a placeholder in that field?

Hi @Julian_Wan, Reference and Multi-reference fields are the only fields that are not able to be pulled.

Since reference and multi-reference come from other collections.

Best Regards,
~ Brandon

I’ve noticed if I put the value of the corresponding reference item from the referenced collection, when I do a patch request it updates properly.

Is this an error? It’s working now so I guess… problem solved!

1 Like

Hi Julian,

Are you saying you figured out a way to make it reference the referenced collection automatically? This is a pretty important feature for what I’m creating so would love to know what your solution was. Thanks!

1 Like

Has anyone figured out a way to do this? It’s such a deal killer when you are dealing with dynamic data changing all the time it makes webflow so useless to me :frowning:

Why can’t it look for values in the column you specify in the other database or even create them if they don’t already exist?

Hey Blake,

Yes I do this by finding the item ID from the referenced collection (not the CID, but the ID of the individual entry, which is displayed at the bottom of the item from within Webflow’s designer)

Then when I patch an item using Postman (or Parabola.io) — in place of any “value” I simply put the ID of the referenced item in the JSON that corresponds with the reference field.

It works great.

2 Likes

Has anyone figured this out with .csv exports? Or is there are fancy workaround for this? The fact that this isn’t doable is just insane.

No fancy workaround I’m afraid. I’ve done it, but you have to do it through the API.

Hi Julian,

If what you are saying works this would greatly help me out!

Im just having trouble in postman on how I lay this out. If you could please give me an example of how you set this out in postman that would be a massive help.
For context, I am trying to Post a new collection item through postman and reference another collection item. Have you found a way to do this in Post or just in Patch?

I am pretty new to coding so still struggling on certain things.

Thanks
R

2 Likes

sadly this is the one feature that is at this point in time, MOST needed and seemingly quite easy to implement… It baffles me how this is not done yet.

1 Like

I figured this out. (INSANE that they STILL haven’t made this a feature)

Solution: You need to get the weblfow ID for the collection item you are referencing and import it with Zapier.

  • Take your excel or .csv of collection items with the other fields you want to reference.
  • Import them to webflow WITHOUT the multi-reference.
  • THEN copy/paste that .csv into a Google Sheet.
  • Go get the hidden webflow ID for the multi-references you need using integromat (explained below).
  • Using a =vlookup, add all of the multi-reference IDs in a new column on Google Sheets next to the reference item name.
  • Use zapier to add those all the IDs for every item to the multi-ref field INSTEAD of the name.

How to get the IDs: Get the collection item you want to reference by using https://www.integromat.com/ (a more powerful zapier)

  1. Create or import one of your collection items and manually choose the reference to the collection that you would have ideally imported in a column. (You may have to do this multiple times depending on how many multi-references you need for one item)

Then…
2. Create an Integromat account.
3. Create a new Scenario.
4. Create a new Module, search and choose Webflow and connect your account.
5. Now click the canvas to create a new module, choose Webflow and ‘List Items’ as the action.
6. Fill out all the fields to point it to the correct CMS collection.
7. Click OK, and then right click on the module and select ‘Run This Module Only’.

You will have a data output that you can go look at. Where the collection item you are referencing is, there should be a drop down that you can open up and see. For me, my non-profit category of “Sustainable Future” that I want to reference as a tag for a couple thousand non-profits has a Webflow ID of “5ebb80080c6df5beb7fc91cb”.

Export your webflow collection so you can get the Collection Item ID (required to update an item in a collection). Also FYI - try to remove as many required fields in webflow as you can so that Zapier doesn’t require those too.

Now, create a Zapier account and create a Zap for Google Sheets to Webflow with the actions set to basically 'whenever a row gets updated or created, update this ‘live item’ in webflow.

  1. Match the value in your google sheet for collection item ID.
  2. Match up any other required fields.
  3. Match your multi-reference to the new column in sheets with the webflow ID for the other collection item you want to reference.
  4. Let it run and update all collection items with their respective collection reference.

Note - you may have some trouble getting it zapier to run all the data.

BOOM.

2 Likes

Wow. :bowing_man: This post deserves more :heart:.

I did it in Parabola.io.

Next step, figure out how to add the categories / tags to all the posts.

<sponge bob>2 hours later </sponge bob>

Update: got it to work with the categories. As soon as the Parabola importer sees a multi-reference field, it already wraps the contents with [" "]. So all I needed was a list of all the categories’s IDs separated by comma.

2 Likes

I’ve also used parabola and integromat to achieve this. It’s doable, but it’s not as easy as just importing a CSV file.

That’s why I’m building a tool that is straight forward. You give it a CSV, map a column to a reference field, and it detects the reference field you want to match. The column can be anything: a slug, id, cid, etc.

If anyone is interested, I’m looking for beta testers.

3 Likes

Awesome, thank you for the love and glad you got it working.

If anyone wants to see how this would look via CMS API, here’s a script I have running in an Airtable scripting block, which allows me to create collections as “tabs” in a base, then lookup the corresponding CMS Webflow ID field.

In this example, I am referencing multiple tables in an airbase, and updating (or creating new entries) for agency “services” that have various “category” or similar reference ID’s.

// pick tables from your base here
let table = base.getTable('Services');

// pick a view from your base here
let view = table.getView('Editor View');

// get records in order
let result = await view.selectRecordsAsync();

// define a delay function for a rate limit, ignore red squiggly, if you're using Airtable to manage CMS for Webflow this will prevent any rate limit errors.
function timeout(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
for (let record of result.records) {
  await timeout(1000); // 1 sec pause for Webflow's Rate Limit

  // check for Webflow IDs (Use any field where you keep webflow IDs)
  let originalValue = record.getCellValue('Webflow ID');

  // set your Webflow headers
  let myHeaders = new Headers();
  myHeaders.append('accept-version', '1.0.0');
  myHeaders.append('Authorization', 'Bearer [YOUR WEBFLOW API KEY]');
  myHeaders.append('Content-Type', 'application/json');

  // match your fields to the values you want updated
  let webflowRequest = JSON.stringify({
    fields: {
      name: record.getCellValue('Name of Service'),
      slug: record.getCellValue('Slug'),
      'service-feature-image': record.getCellValue('Featured Image'), // you can reference images directly from the attachment field of an Airtable record, which is nice.
      'main-category': record.getCellValue('Category ID'), // this is a reference field, the value would be a Webflow ID like 5qq439bc083e9a72d6067cd9
      'seo-meta-description': record.getCellValue('SEO Description'), // text field
      'airtable-id': record.getCellValue('Airtable ID'), // I put Airtable ID's in my Webflow CMS and Webflow ID's in my Airtable base, go figure. Hehe.
      'vimeo-preferred': record.getCellValue('Video URL'), // url field
      'main-service-article': record.getCellValue('Main Article ID'), // as an example, this references another base that has a Webflow ID for the article, eg, 5ff439bc083e9a054c067cf2
      'logo-description': record.getCellValue('Long Description'), // text field
      'light-logo': record.getCellValue('SVG Icon') // example of a conditional field, which only runs if the cell called 'SVG Icon' is populated.
        ? record.getCellValue('SVG Icon')[0].url
        : null,
      'step-1-image': record.getCellValue('Step 1 Image') // see above
        ? record.getCellValue('Step 1 Image')[0].url
        : null,
      'step-2-image': record.getCellValue('Step 2 Image') // see above
        ? record.getCellValue('Step 2 Image')[0].url
        : null,
      'step-3-image': record.getCellValue('Step 3 Image') // see above
        ? record.getCellValue('Step 3 Image')[0].url
        : null,
      _draft: false, // required for webflow
      _archived: false, // required for webflow
    },
  });
  console.log(webflowRequest);
  // check if there's no Webflow ID, and set POST as the method
  if (!originalValue) {
    let postOptions = {
      method: 'POST',
      headers: myHeaders,
      body: webflowRequest,
      redirect: 'follow',
    };

    let postResults = await fetch(
      'https://cors-anywhere.herokuapp.com/https://api.webflow.com/collections/{YOUR COLLECTION ID}/items/?live=true', // Note the '?live=true' parameter. This is optional. Also, note the first half of the url. I use CORS Anywhere because this Airtable base has only a few items. If you have over 200 to update within an hour, I recommend running Airtable scripts from Chrome with a CORS disabler Browser Extension.
      postOptions,
    );
    const postJSON = await postResults.json();
    console.log(postJSON);
    let newID = postJSON._id;
    await table.updateRecordAsync(record, {
      'Webflow ID': newID,
    });

    //you don't need this following block, but if you want to output your updated data in as markdown in the console, then use this:
    let value = record.getCellValueAsString('Name of Service');
    let seodesc = record.getCellValueAsString('SEO Description');
    output.markdown(`##### Updated ${value}.`);
    output.markdown(`SEO Description: ${seodesc}`);
  }

  // check if there is a Webflow ID, and set PUT as the method
  if (originalValue) {
    let putOptions = {
      method: 'PUT',
      headers: myHeaders,
      body: webflowRequest,
      redirect: 'follow',
    };

    let putResults = await fetch(
      'https://cors-anywhere.herokuapp.com/https://api.webflow.com/collections/[YOUR COLLECTION ID]/items/' +
        originalValue +
        '?live=true',
      putOptions,
    );
    const putJSON = await putResults.json();
    console.log(putJSON);
    //you don't need this, but if you want to output your updated data in markdown, use this:
    let value = record.getCellValueAsString('Name of Service');
    let seodesc = record.getCellValueAsString('SEO Description');
    output.markdown(`##### Updated ${value}.`);
    output.markdown(`SEO Description: ${seodesc}`);
  }
}

Here’s an example of how that may look:

1 Like

Hi Rheed,

I typically avoid using Postman for content updates with CMS, and instead opt to use Airtable (or Firebase/Firestore) to update Webflow CMS.

My post above shows how you can do this in JSON format (without using Parabola.io) so hopefully you can get this working how you want!

Trying to sign up to your tool. But its not working.
I would like to beta test it.

@QA_Brandon please, please, please bring this into your feature planning! If there are errors matching the referenced collection, perhaps you can return the line numbers of the records with errors and a short description of which fields didn’t match.

In my case, I delete and import about 250 records every 3 months. These records represent weekly meetup groups, and they have 4 references to other collections (day of week for meetup, time of meetup, type of group, and geographic area/location). We made these fields collections because we wanted users to be able to filter the meetups by these different fields.

The result is that every 3 months, I dread having to import 250 new records. I know other webflow designers who deal with the same issue. It’s very frustrating that Webflow doesn’t seem to be taking steps to address the issue. As a computer programmer myself it seems extremely simple to map values from a CSV column to records in a separate collection, so I don’t understand why this is such a problem.

Giving Webflow users the ability to import data quickly will greatly enhance the user experience, and prevent users like me from having to do hours of manual data entry. Not to mention, the manual entry is highly prone to human error.

Hey guys, I just saw some recent activity on this thread and I believe this might help some of you guys.

https://cms-gems.webflow.io/

The tool automates the process of linking fields to their correspondents reference items. It works for reference and multi-reference field.

I’m aware that some people with very very large datasets are having some trouble with it, and that’s on me (I plan on refactoring the tool to better accommodate large quantities of data as soon as I have the time), but if your database doesn’t hold more than a couple of thousands items, you should be good.

The videos on each page give you a nice walkthrough of the whole process

4 Likes