Widgets provide configurable client-side capability that would otherwise be inappropriate or clunky to add using Remote Builder's page editor. For instance, stock tickers, news feeds, photo album viewers and social networking interfaces can be easily created using standard HTML/CSS/JavaScript tools and then imported as Widgets, as opposed to being hand-coded using Remote Builder client scripts and XHTML page objects.
A user can add a new Widget in Remote Builder by clicking on the Installation tab in the Menu bar, and then clicking on New Widget. Browse to the location of the Widget file and open it. If a new version of a Widget is available after you have added the Widget, you can easily upgrade by going to the Widget’s settings, clicking on the “Upgrade / Replace” button, then browse to the new file’s location and open it. If the version number is lower than the current version, you will be notified.
On a Page, you can add a Widget much like any other Page object. You can either click on the “Add Widget” button or use the keyboard shortcut Alt+W to add a Widget to a page. It will show a dialog box giving you the option to choose which Widget to add. After adding the Widget, you can view its settings and properties by double clicking on it or by selecting it and clicking on the Properties button. You can read the Remote Builder documentation for more information. Refer to the Widgets section in the Pages section for information about a Widget’s settings and properties. Refer to the main Widgets section for information on creating Widgets.
Sliding Menu
Author: Christian Sirolli
Latest Version: 1.0.20
The Sliding Menu widget adds a menu to a page that slides from the left side of the screen to the right, filling the entire screen. Up to 15 menu entries can be added, each separated with horizontal lines. The styling can be customized very easily.
Usage
It is recommended that an instance of this Widget on page be positioned at “0, 0”. This allows it be off to the side and out of the way, for the most part, of the rest of the page’s design elements.
It is also recommended to set Exit Icon to “true” so users have a visible way of closing the menu. Regardless of this settings value, users can also close the menu by either hitting the Escape key (if they have a keyboard) or by swiping to the left (if they have a device with a touchscreen).
Buttons with client scripts can make the menu slide open using this function like this:
toggleSlidingMenu(1);
The menu can be closed using the following":
toggleSlidingMenu(0);
Or to toggle it currents state, simply use:
toggleSlidingMenu();
Settings
These are following settings and an explanation of their purpose and use:
Background Color: #7ca7BF
Background Image: unset
Bold Current Page: false
Exit Icon: false
Font: Sans-Serif
Font Size: 18
Header and Line Color: #000000
Italicize Current Page: false
Menu Item 01-15: unset
Menu Item Color: #000000
Underline Menu Items: false
The Background Color setting defines the background color of the Sliding Menu. It must be a hexadecimal value, such as
#ffffff, which is white. If you do not have the#prefixing the value, the widget will add it automatically. So be sure that the value is indeed a hexadecimal value, preferably one with a#. If you have Background Image set, this value is disregarded.The Background Image setting defines the background image of the Sliding Menu. It must be the ID of an image that has been added to the Installation through the Add Image tool in Remote Builder. See the Remote Builder documentation for more information.
The Bold Current Page setting defines whether or not the menu item that has a hyperlinking matching the current page’s URL is to be bolded. Expected values are “true” or “false”.
The Exit Icon setting defines whether or nor an X icon is shown at the top right of the sliding menu that a user can use to collapse the sliding menu.
The Font setting defines the font of the text. Expected values are “Sans-Serif”, “Serif”, and “Monospace”.
The Font Size setting defines the font size of the text in pixels. Values are automatically suffixed with
px, so the value is expected to only be a number.The Header and Line Color setting defines the color of the headers and the horizontal lines. It must be a hexadecimal value, such as
#ffffff, which is white. If you do not have the#prefixing the value, the widget will add it automatically. So be sure that the value is indeed a hexadecimal value, preferably one with a#.The Italicize Current Page setting defines whether or not the menu item that has a hyperlinking matching the current page’s URL is to be italicized. Expected values are “true” or “false”.
The Menu Item 01-15 settings defines the menu entries. Values are expected to be text (for headers) or JavaScript arrays (for menu items). For menu items, the array must contain the text and the hyperlink of the menu item. For example, a menu item that has the text “Home“ and points to a page with an ID of 1 would look like this:
['Home', '/page/?id=1']. See Advanced below for more information about this setting.The Menu Item Color setting defines the color of the menu items. It must be a hexadecimal value, such as
#ffffff, which is white. If you do not have the#prefixing the value, the widget will add it automatically. So be sure that the value is indeed a hexadecimal value, preferably one with a#.The Underline Menu Items setting defines whether or not menu items are underlined like normal links are. Expected values are “true” or “false”.
Advanced
Values in the widget settings must not contain unescaped double quotes. You can either escape double quotes by prefixing it with a backwards slash (e.g. \") or use single quotes (') or back-ticks (`). The reason for this is that settings are exposed to the widget as JavaScript variables, but are wrapped with double quotes. Any double quotes in the value will cause issues.
If you need a JavaScript function to be ran when a menu item is clicked, the hyperlink portion of the array must be prefixed with javascript: (notice the colon). For example. a menu item that has the text “Turn on Lights” and runs the function “turnOnAllLights” may look like this:
['Turn on Lights', 'javascript:turnOnAllLights()']
To run multiple functions, you can use an IIFE (Immediately Invoked Function Expression) with an arrow function:
['Turn on Lights', 'javascript:(() => {turnOnAllLights(); alert(`Lights have been turned on!`);})()']
The reason one must prefix the function with javascript: is that the second value in the array becomes the href value of the menu item. As such, functions can be run in links provided they are prefixed with javascript:.
Editable Label
Author: Christian Sirolli
Version: 1.0.40
The Editable Label widget adds a Label object that a user can edit by pressing and holding for half a second. The settings and properties available to normal Label object are also available to the Editable Label. The Editable Label widget works by saving the Label’s text on the server as a Global Value (see the Script API for more information), with the name being a combination of the page’s ID and the widget’s ID. If no Script ID has been assigned to the widget or page, then the server-generated ID is used. Otherwise, the Script ID is used. If the Script ID is assigned or changed after the widget has been added and used, the stored value will be lost, and the text set in the widget’s settings will be used instead.
When the Label is being edited, a Save icon will be shown on the left side of the Label. When you are done editing the text, click the Save icon to save your edits. You can also press the Enter key to save your edits as well.
Settings
Background Color: transparent
Background Image: (unset)
Bold: false
Font: Sans-Serif
Font Size: 18
Italic: false
Text: Label
Text Color: #000000 (black)
Text Position: m
The Background Color setting defines the background color of the Editable Label. It must be a hexadecimal value, such as
#ffffff, which is white. If you do not have the#prefixing the value, the widget will add it automatically. So be sure that the value is indeed a hexadecimal value, preferably one with a#. If you have Background Image set, this value is disregarded.The Background Image setting defines the background image of the Editable Label. It must be the ID of an image that has been added to the Installation through the Add Image tool in Remote Builder. See the Remote Builder documentation for more information.
The Bold setting defines whether or not the text will be bolded. Expected values are “true” or “false”.
The Font setting defines the font of the text. Expected values are “Sans-Serif”, “Serif”, and “Monospace”.
The Font Size setting defines the font size of the text in pixels. Values are automatically suffixed with
px, so the value is expected to only be a number.The Italic setting defines whether or not the text will be italicized. Expected values are “true” or “false”.
The Text setting defines the initial text of the Editable Label. If the widget cannot find the saved text from the Global Value, it will fall back to this value.
The Text Color setting defines the color of the text. It must be a hexadecimal value, such as
#000000, which is black. If you do not have the#prefixing the value, the widget will add it automatically. So be sure that the value is indeed a hexadecimal value, preferably one with a#.The Text Position setting defines the text’s position in the widget. Expected values are “m” (middle), “n” (north or top), “e” (east or right), “s” (south or bottom), “w” (west or left), “ne”, “nw”, “se”, or “sw”.
Sonos
Author: Robert M. DeLuca
Version: 1.2.1
The Sonos widget is an interface to the Sonos module. See the Remote Builder documentation for more information about the Sonos module.
Settings
Instance ID: 1
The Instance ID setting defines which Sonos module instance the widget should control. Instance ID is the value appearing after the slash of the “URI” setting of the Sonos module settings.