Connect Elements to Collection Fields With No Code (Data-Binding)

If you want to connect an element to a collection field, you must choose whether you want to connect it yourself from the app, or allow site-builders to connect this element on their own. For example if you build an app with complex logic that you need to control, you would probably use the first option. If you build a more design-oriented widget and want to give site-builders the freedom to connect any field they want to the design, your would use the second. 

Here are some details about these two options:

Option 1: Connect an element to a collection in Blocks

You can connect an element to a collection field in Blocks, through adding a dataset. If you do this, note that: 

• An outer widget cannot connect an inner-widget’s element to a dataset. You must go into the inner widget and connect the element from there.
• If you connect an app’s element to a dataset, you cannot allow a site builder to connect this element to a collection on their site. Therefore, you will also not be able to add the Connect to CMS  action button to this element’s action bar. Note that the action button will be disabled and appear gray. 

To connect an element to a field in Blocks:

1. Go to the Design tab. 
2. Click on the element.
3. Click on the Connect to CMS  icon in the action bar. 
4. Select a dataset, or add one if you haven't.
5. Select the field to connect to your element. 

You can also connect the elements through code.

Option 2: Allow site builder to connect the element on a site

You can also allow site builders to connect app elements to their site’s CMS through the Connect to CMS  action button. If you choose to do this, note that:

• Once the app is installed on user sites and they connect the element to their collections, if you connect the same element to your collection in Blocks, it will break the app’s functionality on their site. 
• If you connected an element to your own collection in Blocks, you will not be able to add this action button to the element's action bar. 

To allow site builders to connect the element on their site:

1. Go to the Configuration tab. 
2. Click on the element. 
3. Click Edit Action Bar. 
4. Click + Add.
5. Add the Connect to CMS  button and accept the notification.