Published 2014-10-28 | (Compatible with SDK 2.5,3.5,4.5,5.0,5.1 and 2011,2012,2013,2014 models)

Instructions for using Label visual component.

** This class will not be supported in 2015.

   All functionalities of AppsFramework are more improved, integrating with CAPH. Therefore Appsframework is not supported since 2015 Smart TV. To use functionalities of Appsframework, refer to here.

Label component is used to display text on the screen.

Figure. Label component.

Syntax $.fn.sfLabel = function (options)
Parameter options

text - String - label text


$('#label').sfLabel({ text: 'This is Label!'});
  • ID - Component ID
  • Caption - Label text
  • Margins Left and Top - Component position on the scene
  • Margins Width - Component size
  • Font - The text font size
  • Color - The text color

The property panel allows changing the color and size of font. This is not visible under the Visual Mode. However, the changes made are reflected in the Emulator when running the application.

Figure. Label properties box

Figure. Label

If the text is longer than the width of the label, the text is truncated with an ellipsis ”...”.

Even a CSS sample:

#SceneScene1 #svecLabel_BFLG {
    position: absolute;
    font-size: 10pt;
    color: #000;
    left: 300px;
    top: 260px;
    width: 130px;

To change the color using the CSS file, use the hex-value for the color in the Color picker.