Module ui-builder

This means you don't need to know or deal with the XML syntax for UI extensions.

An extension (ui panel, action button or web app) is typically constructed by creating a tree of nodes. A node can be a panel, a page, a row, a slider etc. A node has attributes (type, name, color, text, ...), and most nodes types can also have child nodes.

The library will validate the attributes (a slider cannot have a name) and the children type (eg a row can only be added to a page, not a panel).

Each node type has, for convenience, a method that creates this node. Eg this is how we construct a page with two empty rows:

const { Page, Row } = require('./ui-builder');
const attributes = { name: 'My page', pageId: 'mypage' };
const children = [Row(), Row()];
const page = Page(attributes, children);

// or for short:
const page = Page({ name: 'My page', pageId: 'mypage' }, [Row(), Row()]);

To save an extension to the video device, a panel / action button / web app must also be wrapped in a Config object. Here are 3 full examples:

The 3 extensions supported: Action button, panel and web app

Example - Create an action button:

const ui = require('./ui');
const { Config, ActionButton } = require('./ui-builder');

// Create an action button for calling helpdesk
const actionButton = Config({}, [
  ActionButton({
   name: 'HelpDesk', panelId: 'helpdesk', icon: 'Helpdesk', color: '#003399',
  })
]);
ui.panelSave('helpdesk', actionButton);

If you do not want to use the ui lib (just the ui-builder), you can replace the last line with:

const xml = actionButton.toString();
xapi.Command.UserInterfae.Extensions.Panel.Save({ PanelId: 'helpdesk' }, xml);

Example - Create a panel:

const ui = require('./ui');
const {
  Config, Panel, Page, Row, ToggleButton, Slider, GroupButton
} = require('./ui-builder');

// Create a panel for controlling lights in the room
const panel = Config({}, [
  Panel({ name: 'Lights', icon: 'Lightbulb', color: 'orange' }, [
    Page({ name: 'Lights' }, [
      Row({ text: 'Main lights' }, [
        Slider({ widgetId: 'lights-toggle' }),
        ToggleButton({ widgetId: 'lights-slider' }),
     ]),
     Row({ text: 'Color' }, [
       GroupButton({
         widgetId: 'lights-colors',
         buttons: { warm: 'Warm', medium: 'Medium', cold: 'Cold' },
       })
     ])
   ]),
 ])
]);

 ui.panelSave('lights', panel);

// The node structure:
// Config
//   Panel
//     Page
//       Row
//         Slider
//         ToggleButton
//       Row
//         GroupButton

Result of running the code above

Example - create a web app:

const ui = require('./ui');
const { Config, WebApp } = require('./ui-builder');

// Create a web app link to YouTube
const webApp = Config({}, WebApp({ name: 'YouTube', url: 'https://youtube.com' }));
ui.panelSave('youtube', webApp);