Finsweet Attributes

Advanced FS Load

Overview
Attributes Notes
Finsweet Form Submit
401
Finsweet CMS Nest
406
Finsweet CMS Sort
406
Finsweet ToC
407
Finsweet Prev Next
407
Finsweet Rich Text
408
Finsweet Input Counter
410
Finsweet CMS Load
Finsweet CMS Load
501
Responsive Pagination
502
Advanced FS Load
504
Finsweet CMS Filter
Finsweet CMS Filter
650
Automatic Filtering
652
Advanced FS Filter
652
Browser Extension Candies
Finsweet's Unbind CMS
3:41
801
Debugging
Troubleshooting your Finsweet Attributes Config
901
No items found.
Published
July 7, 2023
Updated
in lightbox

Custom Javascript

For javascript developers, Finsweet offers an API

https://finsweet.com/attributes/api/cms-load

With it you can capture certain events, like page changes, item rendering, and respond specially. You can also programmatically manipulate both the in-memory data and the paginated views.

But how would you use that?

Use External Datasources

You can use CMS Load and CMS Filter with external data by loading it with your own Javascript, and then passing it to Finsweet's tools through the API.

A tutorial here-

https://finsweet.com/attributes/api/cms-load

Attributes API

Finsweet offers an API, which allows you to use client-side Javascript to further extend the capabilities of loading and filtering.

https://finsweet.com/attributes/api

https://finsweet.com/attributes/api/cms-load

https://www.npmjs.com/package/@finsweet/attributes-cmscore

One of the chief reasons for the API is to allow you to work with new content as CMS Load renders it into the page.

Here, for example, we re-initialize Webflow forms to ensure that new forms will function properly with Webflow's forms handler.

Modifying Content on FS CMS Load

Filip Sas shared a script he wrote to translate dates from English to Dutch in collection lists that are loaded by FS Load.

https://discourse.webflow.com/t/easily-translate-date-in-webflow/42712/9?u=memetican

FS Load API

Finsweet CMS Filter has an API which allows you to handle callback events and perform certain actions.

The basic framework looks like;

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsload Successfully loaded!');

      const [filterInstance] = filterInstances;

	  // YOUR CODE HERE

    },
  ]);
</script>

Within that setup function, you can setup additional event handlers for specific tasks;

RenderItems

Runs whenever the list renders items after switching pages

filterInstance.listInstance.on('renderitems', (renderedItems) => {
  console.log('renderitems event', renderedItems);
});

AddItems

filterInstance.listInstance.on('additems', (addedItems) => {
  console.log('additems event', addedItems);
}); 

SwitchPage

filterInstance.listInstance.on('switchpage', (targetPage) => {
  console.log('switchpage event', 'The user has navigated to the page number ', targetPage);
});

References

Technical Notes

https://finsweet.com/attributes/api/cms-core#cmslist-instance

renderItems happens when a pagination event renders more elements into the list. This can happen based on a page-button click, or through a scrolling action in the event of CMS load more.

  • It can be called directly to refresh the view.
  • It returns a promise which can be awaited to ensure the new data is loaded before your custom code progresses.

clearItems clears the visible and in-memory lists.

Caching

You can see the cached pages in the browser's data store. Remove these if you need to do performance testing on the page load.

I'm unclear on cache rules;

  • How long the cache remains before updating
  • Update triggers, such as whether a newly published site is detected

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.