Smart Grid Widget Extension. Version 1.0.0

Transcription

1 Smart Grid Widget Extension Version 1.0.0

2 Introduction and Installation... 3 About the EXTENSION... 3 Installing the EXTENSION Extension... 3 Configuration and Usage... 4 Configuration... 4 Usage... 6 [Known Limitations and] Compatibility... 7 Document Revision History

3 Introduction and Installation Extensibility is a core aspect of the architecture and design of ThingWorx. Partners, third parties, and users, as well as ThingWorx 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 Smart Grid Widget Extension. About the EXTENSION Smart Grid Widget Extension allows you to define a more flexible table grid widget. You can alter at runtime the list of rows by adding, deleting entire rows or by editing the contents of cells. Also it provides the possibility to model virtually any type of data (text, selection, checkbox, datetime, etc). It is based on the appendgrid jquery plugin. For the complete documentation please visit: Installing the EXTENSION Extension 1. From a web browser, launch ThingWorx. 2. Log into ThingWorx as an administrator. 3. Go to Import/Export > Import. 3

4 4. Click Choose File and select SmartWidget_ExtensionPackage.zip 5. Click Import. Note: If an Import Successful message does not display, contact your ThingWorx System Administrator. Note: 6. Click Yes to refresh Composer after importing the final extension. 7. Now that all of the extensions have been imported, you can find the widget in the Mashup Builder named SmartGridWidget. Configuration and Usage Configuration Once the Smart Grid Extension has been imported, in the Mashup Builder Composer you must configure the Widget by setting the property TableDefinition with a JSON one line string that looks like this (for other configurations see the appendgrid documentation ): {"initrows":1,"columns":[{"name":"album","display":"album","type" :"url","ctrlattr":{"maxlength":100"ctrlcss":{"width":"160px"}{"name ":"Artist","display":"Artist","type":"text","ctrlAttr":{"maxlength":100 "ctrlcss":{"width":"100px"}{"name":"year","display":"year","type":" 4

5 text","ctrlattr":{"maxlength":4"ctrlcss":{"width":"40px"}{"name":"o rigin","display":"origin","type":"select","ctrloptions":{"hong Kong":"Hong Kong","Taiwan":"Taiwan","Japan":"Japan","Korea":"Korea","US":"US","Othe rs":"others"}{"name":"poster","display":"with Poster?","type":"checkbox"{"name":"Price","display":"Price","type":"t ext","ctrlattr":{"maxlength":10,"readonly":"readonly""ctrlcss":{"widt h":"50px","textalign":"right""value":0{"name":"recordid","type":"hidden","value":0 }],"hidebuttons":{"remove":"true","append":"true","removelast":"true"," insert":"true","moveup":"true","movedown":"true"}} Alternatively, you can populate the TableDefinition property in a more friendly way by clicking the Smart Grid Definition action on the widget and providing the definition as a formatted JSON. The TableDefinition property can also be binded with the result of a service (which must be of type STRING, but in a JSON format). The TableDefinition property value takes precedence over the binding if they both exist. For the HiperLink type, configure in the definition JSON a column with the Custom type (please see the documentation) and it can look like this: { name: 'Link', display: 'Link', type: 'custom', value: ' custombuilder: function (parent, idprefix, name, uniqueindex) { // Prepare the control ID/name by using idprefix, column name and uniqueindex var ctrlid = idprefix + '_' + name + '_' + uniqueindex; // Create a span as a container var ctrl = document.createelement('a'); // Set the ID and name to container and append it to parent control which is a table cell $(ctrl).attr({ id: ctrlid, name: ctrlid, href: ' return ctrl; 5

6 customgetter: function (idprefix, name, uniqueindex) { // Prepare the control ID/name by using idprefix, column name and uniqueindex var ctrlid = idprefix + '_' + name + '_' + uniqueindex; // Get the value of spinners var value = $('#' + ctrlid).attr('href'); // Return the formatted duration return value; customsetter: function (idprefix, name, uniqueindex, value) { // Prepare the control ID/name by using idprefix, column name and uniqueindex var ctrlid = idprefix + '_' + name + '_' + uniqueindex; // Check the input value and split it to array if valid } } // Set the value to different spinners $('#' + ctrlid).attr('href', value); $('#' + ctrlid).text('view'); To hide all the buttons, add these kind of property in the definition JSON "hidebuttons":{"remove":"true","append":"true","removelast":"true","insert":"true","moveup" :"true","movedown":"true"} To make a cell not editable just add the read-only property { "name": "Price", "display": "Price", "type": "text", "ctrlattr": { "maxlength": 10, "readonly": "readonly" "ctrlcss": { "width": "50px", "text-align": "right" "value": 0 Usage The widget offers the Data property which will display the data (infotable) from a service at runtime. It also has an EditedTable property that represents the edited data in infotable style. 6

7 Most important thing is that you have to take care to use the same fields in the TableDefinition property as you do in the DataShape for the infotable that feeds the Data property of the Widget. [Known Limitations and] Compatibility This guide has been tested for compatibility with the DEVICE and the following ThingWorx platform and operating system: ThingWorx Platform Version ThingWorx OS Windows 7, Service Pack 1 Document Revision History Revision Date Version Description of Change June First version 7

8 8