Hi there :)
We love to get in touch with you!
Email is not valide
In RadioManager it is possible to add your own modules, widgets and applications and extend our service to your station's demands. There are several types of widgets which are displayed on different locations in RadioManager. For example a widget in the Rundown Tab would be an ideal location for a Traffic Update App. There are a total of 6 widget types:
| method name | Parameters | Returns | Description |
|---|---|---|---|
| saveWidget() | [content:string] | Send the content back to RadioManager. In the case of fields, data will be saved when the save button is activated in RadioManager. |
|
| saveWidgetForItem() | [itemId:int], [content:string] | Save new widget content for this specific item. For rundown_tab widget. |
|
| setHeight() | [newHeight:int] | Set new height for the iframe, newHeight is in pixels. |
|
| setWidth() | [newWidth:int] | Set new width for the iframe, newWidth is in pixels. |
|
| getWidgetFromItem() | [itemId:int], [callback:function] | Get the current widget content. Callback has 1 parameter for widget content. For rundown_tab widget. |
|
| setAmount() | [amount:int] | Set a new amount. For a rundown_tab widget, this amount is viewable in the title and this is the number besides the item icon. |
|
| setAmountForItem() | [itemId:int], [amount:int] | Set a new amount for a specific item. For rundown_tab widget. |
|
| addAmount() | [amount:int] | Add a specific amount. Default amount is 1. | |
| addAmountForItem() | [itemId:int], [amount:int] | Add a specific amount to an item. Default amount is 1. | |
| subtractAmount() | [amount:int] | Subtract a specific amount. Default amount is 1. | |
| subtractAmountForItem() | [itemId:int], [amount:int] | Subtract a specific amount to an item. Default amount is 1. | |
| startDnd() | Activates drag and drop zones in RadioManager. | ||
| stopDnd() | Deactivates drag and drop zones in RadioManager. | ||
| createDndObject() | [customData:string] | Call this function to create a valid object which RadioManager can read. Valid customData is given back in the event with an itemId. | |
| requestAuthorizationKey() | Call this function if you need to get the authorization key or when the key is outdated. The new authorization key will be returned within the authorizationKey event. |
||
| popup() | [iFrameUrl:string], [parameters:object] | [PopupEmitter] | Opens the popup widget in RadioManager. The iFrameUrl parameter must be an url to the widget popup content. The parameters is a optional object with. The inserted information will come back by the initialized of the popup. The return value of this function is a control class for the popup widget. |
| popupEmitter() | [iFrameUrl:string] | [PopupEmitter] | Returns the communication class between the popup and the widget who called the popup. |
| method name | rundown_tab | rundown_item | rundown_live | menu | field | story_content | remote_settings | popup_widget |
|---|---|---|---|---|---|---|---|---|
| saveWidget | x | x | x | |||||
| saveWidgetForItem | x | |||||||
| setHeight | x | x | x | x | x | |||
| setWidth | x | |||||||
| getWidgetFromItem | x | |||||||
| (set-/add-/subtract-)Amount | x | |||||||
| (set-/add-/subtract-)AmountForItem | x | |||||||
| startDnd | x | |||||||
| stopDnd | x | |||||||
| createDndObject | x | |||||||
| requestAuthorizationKey | x | x | x | x | x | x | x | |
| popup | x | x | x | x | x | x | x | |
| popupEmitter | x |
This event will be broadcast at the moment the widget is initialised from within RadioManager. I contains an object back with the following:
This event is broadcast when saving an object in RadioManager. It contains a callback function as parameter. After saving (eg. the saveWidget function, or saving to your own database) the callback must be executed. After the callback is executed, RadioManager will proceed saving the content.
This event will be broadcast when there is a update form within RadioManager of the widget content. This could hadden in the rundown. The first parameter is the new version of the widget content.
If an user drops something from a widget and releases this inside a item in RadioManager, this event will be broadcast with the following parameters:
If an item is clicked in RadioManager, we broadcast this event to all rundown_tab widgets with the following parameters:
This event is broadcast if the user opens the rundown_tab. After initialisation of the widget, either this event or the unfocused will be broadcast.
This event is broadcast if the user leaves the tab, but stays in the rundown. After initialisation of the widget, either this event or the focused will be broadcast.
This event is broadcast if the authorizationKey is renewed.
This event is broadcast if the window of RadioManager has been resized. This will give the width an height you can use for your widget.
| event name | rundown_tab | rundown_item | rundown_live | menu | field | story_content | remote_settings | popup_widget |
|---|---|---|---|---|---|---|---|---|
| initialize | x | x | x | x | x | x | x | x |
| save | x | x | ||||||
| updateWidget | x | x | ||||||
| droppedOnItem | x | |||||||
| selectedItem | x | |||||||
| focused | x | |||||||
| unfocused | x | |||||||
| authorizationKey | x | x | x | x | x | x | x | |
| screenResize | x |
You can add your own Angular modules to our distribution. The following example describes how to do this:
// Defining your own module
angular.module('myModule', []);
// Get rmWidget
var rmWidget = angular.module('rmWidget');
// Add module to rmWidget
rmWidget.requires.push('myModule');The data_key is used to identify the data that belongs to the widget. Widgets can share a data_key and thus their data or multiple keys could be set per user or widget instance. If there is no data_key set, nothing will be saved to RadioManager.
The installer file must have the .json extension
The installer JSON contains information about your application, including icon information as well as colors, routes to the application and information about certain app settings.
Every installer requires one application which is located in the root of the JSON. Every application can contain one or more widgets which will in turn be available to the end user with the information provided in the installer.
The installer has several required components. The root of the application installer consist of the following:
The widget array consists of widget objects with the following information:
Now let's say there is an example field widget hosted at "https://www.example.com/field-widget/" and a story content widget hosted at "https://www.example.com/story-widget/". The instaler.json might look like this:
{
"icon":{
"type":"img_url",
"source":"https://www.example.com/icon.png",
"background_color":"#ffffff",
"foreground_color":"#000000"
},
"name":"Example Application",
"widgets":[
{
"url":"https://www.example.com/field-widget/",
"icon":{
"type":"img_url",
"source":"https://www.example.com/story-widget/icon.png",
"background_color":"#ffffff",
"foreground_color":"#000000"
},
"type":"field",
"title":"Example Field Widget",
"static":false,
"data_key":null,
"settings":{
},
"system_name":"example_field"
},
{
"url":"https://www.example.com/story-widget/",
"icon":{
"type":"img_url",
"source":"https://www.example.com/story-widget/icon.png",
"background_color":"#ffffff",
"foreground_color":"#000000"
},
"type":"story_content",
"title":"Example Story Widget",
"static":false,
"data_key":null,
"settings":{
},
"system_name":"example_story",
"usage_instructions":"# Usage Example\r\n\r\n## How does this work?\r\nYou just make normal markdown and escape it using a converter.\r\n - Thanks for checking out our docs\r\n - It's been a real pleasure!\r\n## Even images\r\n \r\n\r\n"
}
],
"settings":{
},
"settings_url":"http://example.com/story-widget/settings/",
"description":"This is an example description for an example application",
"system_name":"example_application",
"settings_template":{
}
}To open a popup in a widget, use the function popup which returns the popupEmitter class. This popupEmitter class can be used for the communication and control of the popup widget.
| Function name | Parameters | Description |
|---|---|---|
| send | [command:string], [data:any] | Send a message to the popup widget or the widget that owns the popup. |
| on | [command:string], [callback:function] | Listen to commands from the other widgets. |
| close | Close the popup widget. |
Securing your data can be very important. That is why widgets use JWT to be able to authorize requests. JWT is a stateless self-contained token that has been signed. It is an open standard with implementations for many languages.
To validate a request, a number of variables are included in the query string. These variables are:
| query parameter | rundown_tab | rundown_item | rundown_live | menu | field | story_content | remote_settings | popup_widget |
|---|---|---|---|---|---|---|---|---|
| stationId | x | x | x | x | x | x | x | x |
| userId | x | x | x | x | x | x | x | x |
| authorizationKey | x | x | x | x | x | x | x |
The authorizationKey parameter is the JWT hash. You can decrypt this with using submitted jwt_secret to RadioManager (see how to use jwt) and with the hashing algorithm HS512. This hash contains an object with the following information:
After decrypting the JWT hash you identify the user and station using the ids.
It is actually quite simple to use the JWT hash. Two fields should be added to the installer.json. These fields are:
"jwt_key": "{enter here your JWT key}",
"jwt_secret": "{enter here your JWT secret key}"Your installer.json should look like this:
{
"icon": {
"type": "img_url",
"source": "https://www.example.com/icon.png",
"background_color": "#ffffff",
"foreground_color": "#000000"
},
"name": "Example Application",
"widgets": [
{
"url": "https://www.example.com/field-widget/",
"icon": {
"type": "img_url",
"source": "https://www.example.com/story-widget/icon.png",
"background_color": "#ffffff",
"foreground_color": "#000000"
},
"type": "field",
"title": "Example Field Widget",
"static": false,
"data_key": null,
"settings": {
},
"system_name": "example_field"
},
{
"url": "https://www.example.com/story-widget/",
"icon": {
"type": "img_url",
"source": "https://www.example.com/story-widget/icon.png",
"background_color": "#ffffff",
"foreground_color": "#000000"
},
"type": "story_content",
"title": "Example Story Widget",
"static": false,
"data_key": null,
"settings": {
},
"system_name": "example_story",
"usage_instructions": "# Usage Example\r\n\r\n## How does this work?\r\nYou just make normal markdown and escape it using a converter.\r\n - Thanks for checking out our docs\r\n - It's been a real pleasure!\r\n## Even images\r\n \r\n\r\n"
}
],
"settings": {
},
"settings_url": "http://example.com/story-widget/settings/",
"description": "This is an example description for an example application",
"system_name": "example_application",
"settings_template": {
},
"jwt_key": "{enter here your JWT key}",
"jwt_secret": "{enter here your JWT secret key}"
}If jwt_key and jwt_secret are defined in the installer, the authorizationKey key will be sent to the widget in the query string.
To get started with our widget library, please download one of the following and include it in your iFrame:
RadioManager News is a monthly curated publication full of interesting, relevant links. Subscribe below and never miss an issue.
Your email address will only ever be used for RadioManager News and you can easily unsubscribe with a single click at any time.
Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you.