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
