Colorpicker Extension User Guide Version 1.0

ColorPicker Extension User Guide Version 1.0

ColorPicker Extension User Guide

Software Change Log ...... 2 Introduction and Installation ...... 2 About the ColorPicker Widget ...... 2 Installing the ColorPicker Widget Extension ...... 2 ColorPicker Widget ...... 3 Configuration ...... 3 Usage ...... 5 Compatibility ...... 6 Document Revision History ...... 6

ColorPicker Extension User Guide

Software Change Log

Version Release Date Changes 1.0 12/16/2015 Initial Release

Introduction and Installation Extensibility is a core aspect of the architecture and design of ThingWorx. Partners, third parties, and ThingWorx users can easily add new functionality into the system in a seamless manner. Extensions can be Service (function/method) libraries, Connector Templates, Widgets, and more. This document provides installation and usage instructions for the ColorPicker Widget Extension.

About the ColorPicker Widget The ColorPicker Widget uses the dhtmlXColorPicker API. Information about the API can be found on http://docs.dhtmlx.com/api refs dhtmlxcolorpicker.html. ColorPicker Widget handles RGB, HSL, and hex formats, and provides an easy solution for adding visual color selection to ThingWorx mashups. The component displays a color selection box with a luminosity bar and text fields for entering RGB and HSL values. The widget enables you to change background colors and text colors for one or more of the widgets from the mashup. In addition, it lets you keep the selected color after you refresh the mashup.

Installing the ColorPicker Widget Extension

1. From a web browser, launch ThingWorx. 2. Log in to ThingWorx as an administrator.

3. Go to Import/Export > Import.

ColorPicker Extension User Guide

4. Click Choose File and select ColorPicker_ExtensionPackage.zip. 5. Click Import.

Note: If an Import Successful message

does not appear, contact your ThingWorx System Administrator.

6. Click Yes to refresh Composer after importing the final extension.

7. If the import was successful, you should be able to see the “dhtmlxColorPicker” widget in the list of widgets.

ColorPicker Widget To use the dhtmlxColorPicker Widget, you must first add it to a mashup. By default, the widget creates the DefaultColorPickerStyle and adds it as the default value of the Style property. Configuration The dhtmlxColorPicker Widget’s properties allow you to customize the widget for your mashup. These properties have default values that you can change for your mashup. For example, you can change the set of widgets to which the ColorPicker can apply background color.

ColorPicker Extension User Guide

The following widget properties are available:

• Label: The text that appears on the color picker button.

• IconAlignment: Location to align the icon for the color picker button with the text (to the left or the right).

• SelectedColorCode: This property can be bound as a target or as a source. To use the capability that keeps the selected color when the page is refreshed, this property must be bound to a thing property. (refer to the Usage section).

• TargetWidgets: List of available widget IDs, separated by commas. ColorPicker will modify the CSS Property (background-color) for these widgets. The ColorPicker is compatible with labels, check boxes, field sets, blogs, gauges, images, links, lists, sliders, text areas, text boxes, and HtmlTextAreas.

• ElementCollectionForTargetWidget: Collection of elements from the DOM (Document Object Model) that are suitable for the widget element that the ColorPicker will modify. For example, if you enter .widget-button-text, the selected color will be set on the DOM element that has the widget-button- text class.

• KeepPickedColorsOnTargetWidgets: Whether to keep the picked colors on target widgets after you refresh the mashup. To keep the picked color, save the SelectedColorCode on the server (bind the SelectedColorCode to a thing property).

• CSSProperty: CSS property that is modified by the ColorPicker widget. The default property is background-color.

The widget triggers the SelectedColorChanged event when you click the Select button of the widget.

ColorPicker Extension User Guide

Usage

The figure below shows an example of the bindings between the colorPicker widget and the ColorPicker_Thing that was created in order to store the value of the selected color. You can see how you can bind the selected color code to a thing property, update the thing property when the selected color changes and get the thing property value when you refresh the page.

The above figure depicts the color picker widget. The Hexadecimal value (color code) of the color is highlighted.

ColorPicker Extension User Guide

Compatibility This extension has been tested for compatibility with the following ThingWorx platforms and Java JRE versions:

ThingWorx Platform Version ThingWorx 6.5.2

Java JRE Version Java version 8, update 65

Document Revision History

Revision Date Version Description of Change December 16, 2015 1.0 Initial Release