The Custom Data Provider is an element that allows you to create simple data structures directly in the graphics editor, removing the need to use external data sources such as JSON files or Google Sheets to integrate data within your graphics packages.
This element is compatible with other graphic elements that have bindable properties, making it easy to link custom variables to your graphic elements.
Adding a Custom Data Provider
Within the Data Providers, locate the Custom Data element and double-click on it, to add it with a Global Data Provider scope
Click in "New Property"
Adding Properties
To start using this element, you'll need to define properties that will help you build your data structure.
The available properties are:
Text: Through this field, you can edit, create, or remove text within your graphic., whether for a headline or for specific details like the head coach's name for the home and away team.
Text List: Allows you to create, edit or remove a list of text items. For example, you can create a list with the names of the home team and another with the away team.
Image: Allows you to add images such as logos, TV bugs, and more. Images must be pre-uploaded to the Assets Library. The key advantage of this property is that it removes the need to manually search for image URLs for linking.
Images List: It allows you to have a list of images. For example, you can display different images linked to a dynamic list and have the ability to change these images directly.
Video. Allows you to add or change videos in .webm or .mp4 format. You can change or upload new videos within the Assets Library and dsiplay into your graphic. To view the requirements for uploading a video, click here.
Color: It lets you include team colors in your data structure for each participating team.
Font: It allows you to assign a font to texts that are bound to this value. This feature cannot be used in the Remote Control, only in the Graphic Editor.
When creating properties, you need to provide
a name
a description (this is optional)
The property will appear listed in the inspector under the Properties tab. From there, you will be able to edit the name or description, and you can also delete an added property.
You can create as many properties as you need and reorder them.
Editing Values
In the Values tab, you have the ability to create, edit, or remove the various values you’ve created, allowing you to easily manage and adjust them as needed.
Show on Remote Control
To display and use the "Values" created n your Custom Data Provider in your remote control, within the editor, you need to enable the "Show on Remote Control" option in the "Values" tab.
To know more about this option, click here.
Binding Data
Once the Properties and their respective Values are added, those will be the data available to bind to elements in the Tree, such as Dynamic Lists, Text Elements, Images, and others.
API control for Custom Data Providers.
Some "Values" contained in the Custom Data can be controlled via API. To do this, it is necessary to enable the "Integration ID" option.
To know mora about how enable the "Integration ID" click here.
The "Values" that can be controlled via API are:
Custom text.
Custom image.
Custom color.
For more information, you can consult here.
Use Cases
Graphic Editor/Remote
Graphic Editor/Remote
When you already have a graphic created and "Values" added to your Custom Data Provider, you can directly change the elements that are linked to these values. You can make these changes directly on the remote without the need to return to the editor and make the adjustments.
In this case we change:
Colors
Logos
Sponsors
Into this:
Viz Flowics Plugin
Viz Flowics Plugin
One advantage of using Custom Data Providers is that within the Viz Flowics Plugin, you can directly edit the desired template.
In the case of images, you can create an image list without needing to use a Google Sheet, making it more straightforward to select images directly from the asset library.
To do this, follow these steps:
Inside the template in the Viz Flowics Plugin, click on "Select File".
In the Asset Library, select the image(s) you want to use in the Plugin and click "Select".
Inside the Plugin, the selected images will be displayed, and you can arrange them in the order you need.
