Framer Update, CMS

CMS Update: Previous / Next Items, Hide & Show Fields, and More

4:15

12K views

Oct 24, 2024

About this lesson

We’ve introduced the much-requested Previous and Next links in CMS detail pages. These navigation links are now included by default in the latest sample blog, but you can also easily add them to any existing project. Simply go to the Insert menu, select the Fields category, and drag the Previous / Next links onto your page. You can use these with components too, ensuring great flexibility both in placement on the page, as well as customization options. We’ve also introduced a new menu in the CMS view, allowing you to control which fields are displayed in the collection table. Additionally, we’ve added a new metadata option that displays when an item was created or last edited. This information is available for all items created or edited after September 10th, 2024. On top of this, we’ve been working on a number of bug fixes and improvements to address your feedback of the past month, see a complete list at https://www.framer.com/updates/cms-previous-next

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:01hi everyone I'm Ido from framer today 0:04I'd like to show you some updates we've 0:06made to the CMS starting with the much 0:08requested ability to add links to 0:10previous and next items in detailed 0:13Pages the latest sample blog includes 0:16these by default but if you want to add 0:18them to existing CMS Pages it's easy so 0:21let me remove this one to show you 0:24how you can head to the insert menu 0:27select the fields category 0:30and then drag the preview next onto your 0:33page these links work out of the box but 0:36let me quickly show you how they are set 0:39up here you see there is a new next 0:41variable next to slack that you can 0:43assign this 0:45way and a bit below in the properties 0:48you'll see there is a visibility 0:50condition that takes care of showing the 0:52link only if the next variable is set 0:55lastly there is a Content variable that 0:57takes the title from the next item and 1:00adds a little arrow all the building 1:03blocks we've just seen are designed to 1:05be super flexible to allow you to create 1:08any type of navigation like these arrows 1:10on top and now I'm going to show you how 1:13to set this up with 1:15components if I double click on this 1:18arrow button you'll see that there are 1:21two variants one enabled and one 1:23disabled to make this link to the next 1:26item first I'm going to create a link 1:29variable 1:30and I'm also going to make sure that the 1:33disabled variant has this link removed 1:36so that you cannot link on the disabled 1:38State now back to the canvas I'm going 1:41to head to the link variable we just 1:43created and via the add menu I'm going 1:46to select the slack and assign the next 1:51variable and just like that if I preview 1:54you'll see that the next button already 1:56works the only issue is that it stays 1:59enabled all Al on the last page which 2:01means if I click I'm going to head to a 2:03page that is not 2:06existing to fix this I'm going to add to 2:08the variant property then click on set 2:12variable next and then is set now when 2:16is set is going to show the enabled 2:19variant and when not set I'm going to 2:21change to disabled and if I preview 2:23again my button now works exactly as 2:26expected by showing the disabled state 2:28in the last page 2:30and just like that we created custom 2:32previews and next buttons now I want to 2:36show you something else in the CMS view 2:39you'll see that there is a new menu on 2:41the top right which says show on click 2:45you'll see all the fields of your 2:47collection and you'll be able to pick 2:49which ones you want to show or hide 2:51allowing for great flexibility in 2:53customizing your CMS View and there is 2:56more we also added created and edited m 2:59met data that you can display on the 3:01table as well this is useful because if 3:04you manually change the order of items 3:06you can sort back by creation date or 3:09last edited 3:11date one useful detail to know is that 3:14we started collecting that metadata 3:16starting from September 10th 2024 so if 3:20your items are older than that you won't 3:23see that 3:25information we also added other workflow 3:27improvements you've been asking for like 3:30one click to select all drafts and 3:33quickly 3:34undra as well as improved rightclick 3:37menus to better communicate you can 3:39import or paste collections from other 3:43projects lastly a common request after 3:46our references release was the ability 3:49to rearrange multi- references per field 3:52and now you can just do that so you see 3:55that when you sort them the order is 3:57immediately reflected in the canvas 4:01I hope you enjoyed this round of updates 4:03and there are many more to come so stay 4:05tuned and see you soon 4:10[Music]

TeachesCMS Pages / Dynamic Content Component Variants

Also coversCollections Components Links Variables

Watch on YouTube ↗

‹ Framer Update: October 2024

Stacks and Relative Positioning in Framer (Fundamentals Lesson 6) ›