Skip to main content

How to Set Up Content with a Shared Datasource

This guide explains how to set up two pieces of content that share a common datasource. This setup allows changes in one piece of content (the "Controller") to be reflected in another (the "Receiver").

Table of Contents

Create the Datasource​

  • Go to Datasources and create a new Internal datasource.
  • Ensure Editable from Display is enabled.
  • For this example, choose the Custom datasource type and use the following JSON structure:
{
"color": "red"
}

Create the Receiver Content​

The Receiver will be the content we manipulate through the datasource.

  • Create a new content called Receiver.
  • Put down a text widget. Set the background and font color to the color key in your JSON datasource.
    • Go to Widget > Other > Bind Anything and select the color key from your datasource.

Create the Controller Content​

The Controller will be the content used to manipulate the datasource.

  • Create a new content called Controller
  • Put down a text widget, this will be the first of the three controllers that we will create. This we will call Red.
    • Set the text as Red
    • Go to Widget > Other > Edit Touch Events and Add new
    • For action type select Merge internal datasource
    • Select the datasource we created previously and select the color key from the datasource picker
    • Select Value origin as Static value
    • In the JSON data field put red only, without brackets or notes

We created the first control widget for the content. We are going to create two more widgets for Green and Blue

  • Copy the widget
  • Change the text to Green
  • Change Value origin's Static value to green
  • Copy the widget
  • Change the text to Blue
  • Change Value origin's Static value to blue

We created all the control widgets for the content.

Optional: Use a Base Datapath for Simplified Widget Connections​

To streamline widget handling, set up a base datapath in both contents. Widgets linked to this base datapath will auto-connect, meaning that switching to a new datasource with the same structure only requires you to change the base datapath.

Testing the Setup​

  • Open both the Controller and Receiver contents in separate previews.
  • Click the color options in Controller content. Changes should display in Receiver content.

Downloadable content​

Try it out!

Data bindings won’t transfer during export/import, so certain connections need manual setup.

  • First create the Internal datasource and make sure Editable from Display is enabled on it as we did before.
  • After import reconnect the Receiver content’s text widget background color and font color to this datasource
  • After import, check that each widget in Controller content is linked to the datasource in Edit Touch Events; icons might appear connected, but the picker could be empty.

Receiver content
Controller content

NOTE: Please enable Import as Content in the import modal!