F’in sweet CMS Library for Webflow

F’in sweet CMS Library for Webflow

A javascript Library that makes your Webflow CMS Lists a hell of a lot more powerful.

Dev'initions

We use these terms throughout this documentation. Let’s learn!
Script
A program that is interacting with HTML
Library
Collection of pre-written Javascript functions that you can use on your website. jQuery is an example of a library
New Instance
Creating a new version of (or initializing) our Library
Component
A part or element of a larger whole. Not devy, just a word :)
Variable
A container that stores information
Array
A list that stores many values in a single variable
Function
Code that performs a task

No code required

As much as we F'in LOVE javascript at Finsweet, we know who our market is.

Introducing Visual Script Writer!

There are many people who don't want to write javascript and have zero interest learning. No problem — we made a Visual Script Writer just for you. You don't have to write a single line of code to use this Library. You can generate 100% of the code visually.

Please make sure you are sitting down when you click the button blow. It is really F'in sweet.
Grab it here

For others who are interested in learning javascript - we have deep explanations, step by step walkthroughs, and all that jazz. We built this training around teaching you basics of javascript. If you want to take your Webflow skills to the next level, learn javascript.

If you read the docs, follow the walkthroughs, and really learn how this F'in sweet CMS Library works, you'll also learn the basics of javascript and the building blocks of using most javascript libraries.

Let's learn... and do F'in sweet stuff with Webflow CMS :)

Need help? We have free support!

Get started

Add F’in sweet CMS Library to your page

The very first step is to put the library script on the page. The link below is a CDN hosted javascript file free for you to use. You may also download this file and upload the script file to your own server.

We recommend adding this Library before the closing<body></body> tag of the page. CMS Library has no dependencies, so you can put the code in the <head></head> if you need. If you have no reason to put it in the <head></head>,  go for the<body></body>

Create a new instance of the Library

Create a new Library instance just below the Library script. Use this function if you are putting your code in the <body></body> (recommended).

Copy code
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>

<script>
// immediately/self invoked function. This function executes right away
(function() {
  // create a new Library instance and store it in a variable called "customBlogPosts"

  var customBlogPosts = new FsLibrary('.blog-posts-list') // Collection List class

  // we're going to put our components here

})();
</script>

Creating an instance establishes which Webflow dynamic list we are working with when using the components below. Adding components to your instance is flexible. You can add multiple components to the same FsLibrary instance. You can also create multiple instances of FsLibrary on the same page and use different library components on different instances. For example, you can run Add Classes on your customBlogPosts list and also run Filter and Combine on your availableJobs collection list.

Need your script in the <head></head> of the page? Use this function!

<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>

<script>
// wait for the DOM to load and then run the function
document.addEventListener("DOMContentLoaded", function() {
  // create a new Library instance and store it in a variable called "customBlogPosts"

  var customBlogPosts = new FsLibrary('.blog-posts-list') // Collection List class

  // we're going to put our components here

});
</script>

Copy code

Why is it different in the <head></head> ? This waits for the DOM to load before executing the javascript. We must wait for the DOM to load because we are trying to access elements in the DOM with our script.

Code explanation

customBlogPosts
The variable we created to store our Library instance. The name of the variable can be set to whatever you want.
new FsLibrary
How we create a new instance of FsLibrary. This name can not be customized. It must be new FsLibrary.
.blog-posts-list
The class we apply to the Webflow 'Collection List' that we want to use the Library on. Important: this is not the 'Collection List Wrapper' and not the 'Collection Item'. It is the middle element of a Dynamic List embed.

After we create our instance and store it in a variable, we add components. Choose one and let's get started!