cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

How to create a mashup widget  to view excel sheet

sanjanabalaji
11-Garnet

How to create a mashup widget  to view excel sheet

How to create a mashup widget  to view excel sheet.My question is where to add the excel view code in IDE and Runtime file.Sample IDE and Runtime is attached below

 

IDE File

TW.IDE.Widgets.vvvvfb = function () {

this.widgetIconUrl = function() {
return "'../Common/extensions/testttt/ui/vvvvfb/default_widget_icon.ide.png'";
};

this.widgetProperties = function () {
return {
'name': 'vvvvfb',
'description': '',
'category': ['Common'],
'properties': {
'vvvvfb Property': {
'baseType': 'STRING',
'defaultValue': 'vvvvfb Property default value',
'isBindingTarget': true
},
'Name1': {
'baseType': 'STRING',
'defaultValue': 'This is a value',
'isBindingTarget': false
}

}
}
};

this.afterSetProperty = function (name, value) {
var thisWidget = this;
var refreshHtml = false;
switch (name) {
case 'Style':
case 'vvvvfb Property':
thisWidget.jqElement.find('.vvvvfb-property').text(value);
case 'Name1':
thisWidget.jqElement.find('.vvvvfb-name1').text(value);
case 'Alignment':
refreshHtml = true;
break;
default:
break;
}
return refreshHtml;
};

this.renderHtml = function () {
// return any HTML you want rendered for your widget
// If you want it to change depending on properties that the user
// has set, you can use this.getProperty(propertyName).
return '<div class="widget-content widget-vvvvfb">' +
'<span class="vvvvfb-property" style= "background-color: red">' + this.getProperty('vvvvfb Property') + '</span>' +
'</br>'+
'<span class="vvvvfb-name1" style= "background-color: blue">' + this.getProperty('Name1') + '</span>' +
'</div>';
};

this.afterRender = function () {
// NOTE: this.jqElement is the jquery reference to your html dom element
// that was returned in renderHtml()

// get a reference to the value element
valueElem1 = this.jqElement.find('.vvvvfb-property');
// update that DOM element based on the property value that the user set
// in the mashup builder
valueElem1.text(this.getProperty('vvvvfb Property'));

valueElem2 = this.jqElement.find('.vvvvfb-name1');
// update that DOM element based on the property value that the user set
// in the mashup builder
valueElem2.text(this.getProperty('Name1'));
};

};

 

 

 

RUNTIME File

TW.Runtime.Widgets.vvvvfb= function () {
var valueElem1;
var valueElem2;
this.renderHtml = function () {
// return any HTML you want rendered for your widget
// If you want it to change depending on properties that the user
// has set, you can use this.getProperty(propertyName). In
// this example, we'll just return static HTML
return '<div class="widget-content widget-vvvvfb">' +
'<span class="vvvvfb-property" style= "background-color: red">' + this.getProperty('vvvvfb Property') + '</span>' +
'<span class="vvvvfb-name1" style= "background-color: blue">' + this.getProperty('Name1') + '</span>' +
'</div>';
};

this.afterRender = function () {
// NOTE: this.jqElement is the jquery reference to your html dom element
// that was returned in renderHtml()

// get a reference to the value element
valueElem1 = this.jqElement.find('.vvvvfb-property');
// update that DOM element based on the property value that the user set
// in the mashup builder
valueElem1.text(this.getProperty('vvvvfb Property'));

valueElem2 = this.jqElement.find('.vvvvfb-name1');
// update that DOM element based on the property value that the user set
// in the mashup builder
valueElem2.text(this.getProperty('Name1'));
};

// this is called on your widget anytime bound data changes
this.updateProperty = function (updatePropertyInfo) {
// TargetProperty tells you which of your bound properties changed
if (updatePropertyInfo.TargetProperty === 'vvvvfb Property') {
valueElem1.text(updatePropertyInfo.SinglePropertyValue);
this.setProperty('vvvvfb Property', updatePropertyInfo.SinglePropertyValue);
}

if (updatePropertyInfo.TargetProperty === 'Name1') {
valueElem2.text(updatePropertyInfo.SinglePropertyValue);
this.setProperty('Name1', updatePropertyInfo.SinglePropertyValue);
}
};
};

 

Please say where the code for excel part should be added in javacsript

3 REPLIES 3

What PTC's software do you work with?

Thingworx 8.4

@sanjanabalaji, It looks like you are trying to create an Extension for ThingWorx. 

When you are constructing an Extension it is done in a ZIP file which is then imported. 

So in general you have a zip file: ExcelFileView_Extension.zip (for example)

In this file you would have a file "metadata.xml". This file describes the Extension.

You would also have a directory "ui" which would contain a directory which in this case is the name of the widget  "excelfileview".

In that directory you would have files like:

  • excelfileview.ide.css
  • excelfileview.ide.js
  • excelfileview.runtime.css
  • excelfileview.runtime.js

There could also be an "images" directory and "ext"

The images directory would contain the png files referenced from the css files and the metadata.xml to display in the ThingWorx Composer GUI. The directory "ext" could contain other javascript files which are referenced from the excelfileview.runtime.js.

 

This is just an outline and does not cover all possible options.

 

Generally I create a directory which contains all the files. I then take the contents of the directory and paste them into the zip file which can then be imported into ThingWorx.

 

Hope this helps.

Top Tags