Logic

When we talk about conditionally displaying a Component, it's easy to see how a filter could work on a Component List and test for a certain set of properties or values, but there's one more layer. Because we don't want to have to put display logic every Component that is ever built, we need to somehow abstract the data about when a Component should be displayed into another area. For this, we "wrap" our Components in a Logic. Simply put, a Logic component only contains data about WHEN a Component embedded inside of it should be displayed. Here's a sample Logic component:

{
  "startTime": "",
  "endTime": "",
  "embeddedComponent": {
    "ref": "/components/related-posts/instances/new",
    "data": {
      "_ref": "/components/related-posts/instances/new"
    }
  }
}

Here we have a Logic component that contains three properties: startTime, endTime and embeddedComponent. Let's break these down into a little more detail:

• startTime & endTime: These are two properties exposed to a user in the component's settings which allow a user to set a time frame for the component to display itself. At render time the Logic tests the current date against the timeframe the user has defined and decides if it should display itself. If we are between the two times then the Component it wraps will be displayed.
• embeddedComponent: This is an object which contains a reference to some instance of a component. This can be ANY component on your site. The important part of this is that the Logic is not aware of what component it wraps, the reference is added to the Logic but it doesn't matter what the reference is.

By creating this separation between the display logic around a Component and grouping all the components into one Component List inside a Space, we're able to create an easy editing flow around how you manage your conditional logic while still being able to edit the base Components easily.