This article explains how to create a Datasource on panel and establishes the connection between Scene Designer and Datasource. You can assign dynamic values to your elements, so when their source value change, they are also updated automatically.

Create a Datasource

If you don't know what a Datasource is, read our article.

  • Click Datasources on the left panel.
  • Click Create.
  • Enter a Name.
  • Select the appropriate Refresh period.
  • Click Save.
  • Click on the datasource name.
  • Click the Editor tab.
  • Select Text option on editor area.
  • Copy the sample JSON below for a quick start. You can edit the prices as you want.

{
 "prices": [
   {
     "name": "Toast",
     "data": "$6.90"
   },
   {
     "name": "Ice cream",
     "data": "$2.20"
   },
   {
     "name": "Salad",
     "data": "$4.90"
   },
   {
     "name": "Steak burger",
     "data": "$13.90"
   },
   {
     "name": "Ice tea",
     "data": "$3.90"
   },
   {
     "name": "Double cheese menu",
     "data": "$10.90"
   },
   {
     "name": "chicken bacon burger",
     "data": "$6.90"
   }
 ]
}

  • Go back to Detail page. You should see the code as an output here. Click Save.

Whole process should look like this:


Create a Scene and connect Datasource

  • Go to Contents and click Create.
  • Enter content name and select Playlist Editor with Designer (Beta).
  • Click Create.
  • Click Add New Item button.
  • Select Add Scene from drop-down menu.
  • Click on the editor icon next to playlist item to open the scene designer.
  • Click Insert Element and select Text from drop-down menu.
  • Click Pick Datasource Field under the Format tab.
  • Select the datasource that you created.
  • Select the price.
  • Text element will be updated accordingly.
  • This field will be updated whenever there is a change in datasource value. You can also assign dynamic values to images and videos (via URL).

_______

Next: 8.12 Previewing a Scene

Previous: 8.10 Timeline - Keyframes - Animations
_______

Related Articles:

8.3 Scene Elements
4.6 What is Datasource?
4.7 Create a Datasource

Did this answer your question?