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

Highlighted

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?

Tags (1)
6 REPLIES 6
Highlighted

Re: Custom widget "Hello, World!" Issue

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

-Durgesh

Highlighted

Re: Custom widget "Hello, World!" Issue

Hi, Durgesh Patel

I am trying to create reactive text.

We're still trying it now.

thank

Highlighted

Re: Custom widget "Hello, World!" Issue

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

Highlighted

Re: Custom widget "Hello, World!" Issue

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

Highlighted

Re: Custom widget "Hello, World!" Issue

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 ?

Highlighted

Re: Custom widget "Hello, World!" Issue

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

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum!