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

Custom widget "Hello, World!" Issue

CHASEONHO
18-Opal

Custom widget "Hello, World!" Issue

hi, i'm practice custom widget

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

  this.widgetIconUrl = function() {

      return  "../Common/extensions/HelloWorld_ExtensionPackage/ui/helloWorld/helloWorld.ide.png";

  };

 

  this.widgetProperties = function () {

    return {

      "name": "Hello, World!",

      "description": "An example widget.",

      "category": ['Common'],

      "properties": {

      "Salutation": {

          "baseType": "STRING",

          "defaultValue": "Hello, World!",

          "isBindingTarget": true

        },

       

        "TextSize":{

        "baseType":"NUMBER",

        "defaultValue":22,

        "isBindingTarget":true    

        }     

        }

    };

  };

 

  this.renderHtml = function () {

    return "<div class=\"widget-content widget-helloWorld\">" +

             "<span style=font-size: "+ this.getProperty("TextSize") +"px;>" + this.getProperty("Salutation") + "</span>" +

           "</div>";

  };

 

  this.afterSetProperty = function (name, value) {

    return true;

  };

  this.widgetEvents = function () {

      return {

          'Updated': {}

      }

  };

};

Hello, World We tried to construct a user widget that adjusts the font size by moving the slider using the example.(29 line)

However, the font size does not change.

The content inside is also unchanged.

How do I show the values that are bound in the widget?

6 REPLIES 6
dupatel
19-Tanzanite
(To:CHASEONHO)

seonho Cha​: Please confirm if this issue is still open and need suggestions.

-Durgesh

Hi, Durgesh Patel

I am trying to create reactive text.

We're still trying it now.

thank

qngo
4-Participant
(To:CHASEONHO)

Hello, could you make it works in IDE (Composer) ?

origin hello word extension working

modified hello word extension working but, text size can't change

.salutation {

  font-family: Impact, monospace;

  font-size: text-size // <- it defined properties in ide.js

  text-transform: uppercase;

}

I am weak in both span, style, and css.

After creating the responsive text, I want to create a thermometer widget.

I have a thermometer picture in the background and I plan to make it by adding Thingworx's vertical slider, but it's not possible at this time (because I do not know everything about span, style, css, value binding,

Is there any material that will help us to get direction in this situation?

thank

qngo
4-Participant
(To:qngo)

You can try with pure html to be sure that the css works.

Then in ThingWorx, on run time, can you see the css set in source code ?

ide and rue time have the same css.

  1. .salutation { 
  2.   font-family: Impact, monospace; 
  3.   font-size: text-size // <- it defined properties in ide.js 
  4.   text-transform: uppercase; 
Announcements