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>
<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