The JSON Provider allows you to connect external Data Sources to build graphics with dynamic third-party data such as weather graphics, sports results, etc.

Requirements

1. JSON URL

You need the JSON URL with all the data that you want to connect with our Graphics elements:

E.g.  https://flowics-pruebas.s3-us-west-2.amazonaws.com/providers/standings-premier.json 

{
  "standings": [
    {
      "team": "Liverpool",
      "won": 4,
      "lost": 0,
      "draw": 0,
      "points": 12
    },
    {
      "team": "Man City",
      "won": 3,
      "lost": 1,
      "draw": 0,
      "points": 10
    },
    {
      "team": "Leicester City",
      "won": 2,
      "lost": 2,
      "draw": 0,
      "points": 8
    },
    {
      "team": "Crystal Palace",
      "won": 2,
      "lost": 1,
      "draw": 1,
      "points": 7
    },
    {
      "team": "Arsenal",
      "won": 2,
      "lost": 1,
      "draw": 1,
      "points": 7
    },
    {
      "team": "Everton",
      "won": 2,
      "lost": 1,
      "draw": 1,
      "points": 7
    },
    {
      "team": "West Ham",
      "won": 2,
      "lost": 1,
      "draw": 1,
      "points": 7
    },
    {
      "team": "Man United",
      "won": 1,
      "lost": 2,
      "draw": 1,
      "points": 5
    }
  ]
}

2. JSON SCHEMA

You can generate it from https://jsonschema.net/ 

Following the example above, our JSON schema is:

{
  "definitions": {},
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "http://example.com/example.json",
  "type": "object",
  "title": "The Root Schema",
  "required": [
    "checked",
    "dimensions",
    "id",
    "name",
    "price",
    "tags"
  ],
  "properties": {
    "checked": {
      "$id": "/properties/checked",
      "type": "boolean",
      "title": "The Checked Schema",
      "default": false,
      "examples": [
        false
      ]
    },
    "dimensions": {
      "$id": "/properties/dimensions",
      "type": "object",
      "title": "The Dimensions Schema",
      "required": [
        "width",
        "height"
      ],
      "properties": {
        "width": {
          "$id": "/properties/dimensions/properties/width",
          "type": "integer",
          "title": "The Width Schema",
          "default": 0,
          "examples": [
            5
          ]
        },
        "height": {
          "$id": "/properties/dimensions/properties/height",
          "type": "integer",
          "title": "The Height Schema",
          "default": 0,
          "examples": [
            10
          ]
        }
      }
    },
    "id": {
      "$id": "/properties/id",
      "type": "integer",
      "title": "The Id Schema",
      "default": 0,
      "examples": [
        1
      ]
    },
    "name": {
      "$id": "/properties/name",
      "type": "string",
      "title": "The Name Schema",
      "default": "",
      "examples": [
        "A green door"
      ],
      "pattern": "^(.*)$"
    },
    "price": {
      "$id": "/properties/price",
      "type": "number",
      "title": "The Price Schema",
      "default": 0.0,
      "examples": [
        12.5
      ]
    },
    "tags": {
      "$id": "/properties/tags",
      "type": "array",
      "title": "The Tags Schema",
      "items": {
        "$id": "/properties/tags/items",
        "type": "string",
        "title": "The 0 Schema",
        "default": "",
        "examples": [
          "home",
          "green"
        ],
        "pattern": "^(.*)$"
      }
    }
  }
}

3. Add CORS support 

You need to add CORS support to your API in order to be used by the Flowics support.

Setting up a JSON Provider

1. OVERLAY

Add an Overlay to the region where you want to display the content. 

2. JSON PROVIDER

Add a JSON Provider just below the overlay.

On the inspector (right-sidebar):

• Paste the JSON URL in the Fetch URL field.
• Paste the schema in the Schema field.
• Disable Use simulated data.

3. BUILDING BLOCKS

You can use our Building Blocks Catalog in order to display your JSON data. According to the type of data you have, use the one that suits you best e.g., if you have a list of data, use the Dynamic content list.

4. BINDING

Bind the Dynamic list to an upper data provider.

Use Paginate Items to decide how many items you would like to display as well as from which item of your list you would like to start.

Use Current page to sort between pages of your JSON with your remote control while you are on air.

5. LIST ITEM

Add a List Item just below the dynamic list to display all the listed elements in your JSON. You can connect to the list item, according to the data you want to display, a text, progress bar, image, etc.

You can add a prefix or a suffix value. For example, to add the % mark, use the suffix field.  

6. VIDEO TUTORIAL

Take a look at the following video to learn how to use a JSON Provider in our Graphics Builder.