Framer Update: Empty States in CMS Lists

Quick Overview

Framer enables users to easily set up dynamic empty states for CMS collection lists by utilizing a visibility condition on an element that checks if the number of visible items equals zero, which is demonstrated by switching the condition from 'Equals 0' to 'Doesn't Equal 0' to show the list content appear.

Key Points: The tutorial demonstrates how to design an empty state for a CMS collection list within Framer. The 'Meetups' collection list initially shows three upcoming events: Valencia (Feb 7), London (Feb 15), and Berlin (Feb 18). An empty state placeholder layer, initially visible, is configured using a 'Visibility Condition' in the right panel's Styles section. The condition is set on the 'Visible Items' variable, checking if it 'Equals' the value '0' to display the empty state placeholder. When the filter condition is changed to 'Doesn't Equal 0' (or when filtering the list to a date range with no events), the list items appear, and the empty state disappears. Further customization involves adding a 'Become a Host' button to the empty state placeholder and linking it to the relevant application page. The final result shows that the empty state and the populated list states toggle correctly based on the presence of data in the CMS collection.

Context: This video is a short tutorial by an individual named Aitor, demonstrating a feature in the design tool Framer, specifically how to dynamically implement and customize empty states for components that display data from a CMS collection list. The demonstration focuses on using conditional visibility rules tied to the number of items returned by the CMS query.

Detailed Analysis

The demonstration begins with a Framer design showing a dynamic list component titled 'Upcoming meetups' populated with three entries: Valencia, London, and Berlin. The goal is to set up a corresponding empty state that appears when the collection list yields no results. The presenter selects the 'Meetups' list component and navigates to the 'Content' section in the right inspector panel, setting the 'State' to 'Empty' to view the empty state layer which is currently selected in the layer panel. This empty state layer contains placeholder text and an icon. The presenter then examines the 'Styles' section of the empty state layer, where a 'Condition' is set for visibility. The condition uses the 'Visible Items' variable, set to 'Equals' the value '0'. This means the empty state is visible only when zero items are returned from the data source. To test the populated state, the presenter changes the condition to 'Doesn't Equal 0', causing the three meetups to reappear and the empty state to hide. To finalize the empty state, the presenter adds a 'Button' component from the Assets panel into the empty state layer, types the text 'Become a Host' onto the button, and sets the button's link to the 'Apply to become a host' page section. Finally, the presenter clicks 'Done' to exit the empty state editing mode, confirming that the system correctly toggles between the populated list and the customized empty state based on the CMS item count.