# How to limit CMS number of items showing up with Finsweet CMS Filter + Combine

**URL:** <https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112>\
**Category:** Attributes\
**Created:** [June 26, 2023, 8:45am UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112 "2023-06-26T08:45:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![arthur.xuan.vu](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/arthur.xuan.vu/32/864_2.png) [@arthur.xuan.vu](https://forum.finsweet.com/u/arthur.xuan.vu)\
**Post date:** [June 26, 2023, 8:45am UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/1 "2023-06-26T08:45:07Z")

</div>

Hi Finsweet support team,

My goal is to simply use those two librairies together: CMS Filter + CMS Combine AND to limit the number of items showing up.

I’d like to limit the results to 8 items max and I noticed that using JS was not enough in order to interact with your API.

Could you help me to solve this issue? Thanks a lot!

Live site: [NEW | ACADEMY](https://new-ramify.webflow.io/wip/new-newsletter)

Preview link: [Webflow - Ramify](https://preview.webflow.com/preview/new-ramify?utm_medium=preview_link&utm_source=designer&utm_content=new-ramify&preview=487ed72dc6c1f05c4a8b8b1f81f964a0&pageId=6492f8700da5673a09dd52ab&workflow=preview)

---

<div class="post-metadata">

**Author:** ![josephmukunga](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/josephmukunga/32/522_2.png) [@josephmukunga](https://forum.finsweet.com/u/josephmukunga)\
**Post date:** [June 26, 2023, 5:00pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/2 "2023-06-26T17:00:01Z")

</div>

Hello @arthur.xuan.vu, it’s not possible to limit the number of items when using combine using attributes. Anyway you could limit number of cms items rendered using webflow before publishing and our attributes library will only combine the limited items

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [January 8, 2024, 11:43am UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/3 "2024-01-08T11:43:06Z")

</div>

Hi @josephmukunga,

I have a need to limit the number of CMS items shown in a combined list to 1 (date sorted by the most recently added).

Have you seen a way of doing this at all since this post was created?

Thanks a lot,  
Tristan

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 8, 2024, 11:47am UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/4 "2024-01-08T11:47:22Z")

</div>

Hey @tristanpringle! I’m afraid we have not seen a different approach yet. However, you can share a link and I’ll see what I can work out for you

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [January 8, 2024, 11:50am UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/5 "2024-01-08T11:50:43Z")

</div>

Hey, thanks, that would be great!

This is the share link: [Webflow - Creative Business Company Staging](https://preview.webflow.com/preview/creative-business-company-staging?utm_medium=preview_link&utm_source=designer&utm_content=creative-business-company-staging&preview=c54fc9a2533bbb03faf8c1008adb4368&pageId=65804774e955ac0fb1ae95b1&workflow=preview)

There are two instances of CMS Combine on the page which are working also with CMS filter and Static item.

I need to limit the first feature list to only show 1 item, so where it says “Secure the branding budget you need to unlock the next phase of growth” and “Helping an NGO secure $3.6m in revenue in a single month with an always-on brand campaign approach” – this would only show the most recently added item

This is the live site: [Solutions components](https://creative-business-company-staging.webflow.io/solutions-components)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 8, 2024, 12:48pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/6 "2024-01-08T12:48:57Z")

</div>

@tristanpringle, one question. Between these two items, how are you doing the sorting to know which is the newest? To avoid a whole new CMS Sort setup you might want to add the dates to the items and we can sort with some JS.

Even though the list is the first to show on the page, it is the second instance of the CMS Combine Attribute. Having this in mind this script should do what you are after

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmscombine',
    (listInstances) => {
      console.log('cmscombine Successfully loaded!');

      if (listInstances.length > 1 && listInstances[1].items.length > 1) {
        const listInstance = listInstances[1];

        // Add sorting to ensure the first newest item is shown first

        for (let index = 1; index < listInstance.items.length; index++) {
          const element = listInstance.items[index].element;
          element.style.display = 'none';
        }
      } else {
        console.log('Not enough items in the list to hide.');
      }
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [January 8, 2024, 2:24pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/7 "2024-01-08T14:24:32Z")

</div>

Hey @Support-Luis, thank you so much for this.

The script is working perfectly on the first feature list. However, I need to repeat this functionality for 2 more combined feature lists on the page (there are 3 feature lists in total on the page).

Could you help update the script that you gave me to have the same functionality on all three feature lists?

I’ve also added the date text into each of the CMS items so that we can add the sorting using that.

This is the latest live link: [Solutions components](https://creative-business-company-staging.webflow.io/solutions-components)

I’ve added labels to reference where each combined list should show on the page

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 8, 2024, 3:27pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/8 "2024-01-08T15:27:56Z")

</div>

Sure thing! Let me know how this script works

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmscombine',
    (listInstances) => {
      console.log('cmscombine Successfully loaded!');

      for (let i = 1; i < listInstances.length; i++) {
        const listInstance = listInstances[i];
        const items = listInstance.items;

        // Sorting logic
        const sortedItems = items.slice().sort((a, b) => {
          const dateA = new Date(a.element.querySelector('.date-sort').textContent);
          const dateB = new Date(b.element.querySelector('.date-sort').textContent);
          return dateB - dateA; // Sort in descending order (newest first)
        });

        items.forEach((item) => {
          item.element.style.display = 'none'; // hide all items initially
        });

        if (sortedItems.length > 0) {
          sortedItems[0].element.style.display = ''; // Display only the first item
        } else {
          console.warn(`No items found for instance #${i}`);
        }
      }
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [January 8, 2024, 4:15pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/9 "2024-01-08T16:15:32Z")

</div>

Thanks @Support-Luis, that works great for limiting all of the feature lists to 1 item and sorted by date!

There is an issue though that the CMS filters are not working with the static elements that contain the featured lists. Is there a solution for that?

The latest live link is here: [Solutions components](https://creative-business-company-staging.webflow.io/solutions-components)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 8, 2024, 6:20pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/10 "2024-01-08T18:20:19Z")

</div>

Hey @tristanpringle! I’m not sure I 100% understand the question. Could you please record a quick loom on the desired behavior?

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [January 9, 2024, 8:06am UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/11 "2024-01-09T08:06:34Z")

</div>

Hey @Support-Luis , sure thing, thank you – a screen recording is attached.

The desired behaviour is that the content of the feature lists is included and filtered by the CMS filters at the top of the page. E.g. when ‘Guide’ is toggled, only items with the category of ‘Guide’ should show.

However, at the moment, even if a Guide item is not the first item in a feature-list, when that category filter is active, the feature list still shows with a ‘Case Study’ item at the top.

The way the page is set up is that each of the combined CMS feature lists are nested inside a div with the class of ‘static-item’. These static items use Attributes to get positioned at position 1, 8 and 24 within the main combined (non-featured) collection list on the page.

The Static items are given the attribute of ‘fs-cmsstatic-interactive = true’, so that they should interact with the CMS filters are the top.

Before adding the scripts you created, the CMS filter was functioning correctly on both the featured and non-featured lists, so I’m wondering if something can be added to the script to get that functionality working again?

Thank you!!

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [January 9, 2024, 12:35pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/12 "2024-01-09T12:35:50Z")

</div>

Hey @Support-Luis did you think you’ll be able to take a look this again for me? Really appreciate the help!

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 9, 2024, 5:04pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/13 "2024-01-09T17:04:19Z")

</div>

Hey @tristanpringle! Yes, I’ve been taking a look the whole day. I’ll report back when I find a possible solution…

I can’t fully test as when I override the content the filters stop working on my end. To give you an idea of a possible fix, I am trying to remove from the page the items instead of hiding them as I believe CMS Filter finds a match inside the static item corresponding to the other categories.

I’m close to a solution 💪

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [January 11, 2024, 9:44am UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/14 "2024-01-11T09:44:13Z")

</div>

Hey @Support-Luis, thank you, really appreciate this!!

That method of removing items from the page instead of hiding them in the featured lists sounds exactly like what I thought we need, like you say it seems like the CMS Filter still finds a match inside the static item even if it isn’t the first one shown.

Let me know when you have anything I can try!! 💪💪💪

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 11, 2024, 5:54pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/15 "2024-01-11T17:54:20Z")

</div>

Hey @tristanpringle! Could you test this for me?

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmscombine',
    (listInstances) => {
      console.log('cmscombine Successfully loaded!');

      for (let i = 1; i < listInstances.length; i++) {
        const listInstance = listInstances[i];
        const items = listInstance.items;

        // Sorting logic
        const sortedItems = items.slice().sort((a, b) => {
          const dateA = new Date(a.element.querySelector('.date-sort').textContent);
          const dateB = new Date(b.element.querySelector('.date-sort').textContent);
          return dateB - dateA; // Sort in descending order (newest first)
        });

        listInstance.clearItems();
        listInstance.items.push(sortedItems[0]);
      }
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [January 11, 2024, 7:12pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/16 "2024-01-11T19:12:55Z")

</div>

@Support-Luis that hasn’t helped unfortunately, the same behaviour is happening still. Here’s the live link:

[https://creative-business-company-staging.webflow.io/solutions-components](https://creative-business-company-staging.webflow.io/solutions-components)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 12, 2024, 4:48pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/17 "2024-01-12T16:48:03Z")

</div>

Hey @tristanpringle! Which version worked the best for you? I’ll try to build the solution on top of that

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [January 17, 2024, 2:54pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/18 "2024-01-17T14:54:11Z")

</div>

Hey @Support-Luis, I’ve made some progress just now…

The current live version is here: [Creative Business Company Staging](https://creative-business-company-staging.webflow.io/solutions/brand-planning)

All that’s missing now is making the Static items fit into the combined collection list.  
The divs that should be static are called ‘static-item’ – the first one on the page should be at position 1 in the combined list, and the second one should be at position 8.

This will be awesome when it’s working and will use all of these attribute solutions: Combine/Sort/Filter/Static

Can you see how I can get the Static functionality working?

Here is the share link:  
[https://preview.webflow.com/preview/creative-business-company-staging?utm\_medium=preview\_link&utm\_source=designer&utm\_content=creative-business-company-staging&preview=c54fc9a2533bbb03faf8c1008adb4368&pageId=65783fa40a31d79407e1f87d&itemId=657866bfde2f1c5d562d5a50&workflow=preview](https://preview.webflow.com/preview/creative-business-company-staging?utm_medium=preview_link&utm_source=designer&utm_content=creative-business-company-staging&preview=c54fc9a2533bbb03faf8c1008adb4368&pageId=65783fa40a31d79407e1f87d&itemId=657866bfde2f1c5d562d5a50&workflow=preview)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 17, 2024, 4:53pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/19 "2024-01-17T16:53:13Z")

</div>

Hey @tristanpringle! I am taking a look now and I think I’ve found the issue.

Can you please remove the `fs-cmssort-element="list"` attribute from all but the first list?

Below is the structure after removing the extra attributes. Let me know if you test this.

 ![Screen Shot 2024-01-17 at 17.52.31](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/8/8ca5edaabb342679242f61ac4693cbd47eb5e929.png)

---

<div class="post-metadata">

**Author:** ![tristanpringle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/tristanpringle/32/961_2.png) [@tristanpringle](https://forum.finsweet.com/u/tristanpringle)\
**Post date:** [January 17, 2024, 7:52pm UTC](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112/20 "2024-01-17T19:52:46Z")

</div>

Hey @Support-Luis thank you! I tried that and the date sorting still works, but the static items still isn’t doing its thing!

So close but not quite there… 😅 Anything you can see for the static item functionality specifically??

[Next page](https://forum.finsweet.com/t/how-to-limit-cms-number-of-items-showing-up-with-finsweet-cms-filter-combine/1112.md?page=2)