Advanced FS Load

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

‍

‍

‍

‍