Html

A html widget is used to provide html code to create an application. For example, to add a drop-down list box to an application, instead of using a dropdown widget, you can use html code, along with css code, to crate the drop-down list box with customized look and feel.
Note: The interaction of the html code can change based on how the responsive design works for some elements.

Html Settings

When you use a html widget, in addition to the default settings of a widget, the following settings are available.
SettingDescription
Add FieldSelect this button to add an entity field for which you want to use html code. Using these fields, you can connect data to components that you create using the html widget.
Tip: You can select Add All Fields to add all the entity fields at once.
Edit CodeSelect this button to access a code editor for html, css, and javascript codes. You can enter the custom code in the code editor.
Tip: The javascript code editor contains instructions on how to use the javascript API.
Scoped css?Indicates whether the css code must be applied only to the html widget or globally.
  • If you want the css code to be applied only to the elements in the html widget, select this check box.
  • If you want the css code to be applied globally, clear this check box.

Using a Html widget

Suppose you want to stream videos from YouTube based on values selected in a drop-down list box. To do so, perform the following steps:
  1. Using page designer, add the html and dropdown widgets to the page.
  2. Provide values in the Dropdown Properties section as specified in the following table.
    BoxDescription
    LabelEnter Select an option.
    IdEnter ytID.
    Global DataSelect the check box.
  3. Provide values in the HTML Properties section as described in the following table.
    BoxDescription
    DataSelect the check box, and then select the variable that stores the drop-down list box values.

    The

  4. Specify the name of the dropdown widget as ytID, and set it to global so that the html widget can access options in the drop-down list box.

    A relationship is created between the dropdown and html widgets as shown in the following image.

Suppose you want to create an application with the following pages:
  • Compass: Displays a compass with the needle indicating the angle that an application user enters.
  • Stylish Header: Displays text in a header with special effects.
  • Tiles: Displays tiles of various colors.
  • Marquee: Displays text that moves from one end to the other of the page.
To do so, perform the following steps:
  1. In the page designer for the Compass page:
    1. Add a text widget, and provide values as shown in the following image.

    2. Add a html widget below the text widget, add a field, and provide values as shown in the following image.

    3. In the Html section, enter the lines of code shown in the following image.

    4. In the Css section, enter the following lines of code:
      compass {

 width: 150px;
 height: 150px;
 font-size: 10px;
 background-color: transparent;
 border-radius: 100%;
 position: relative;
 margin: 0 auto;
 font-family: 'Lobster Two', Comic Sans MS;
 color: #2d2d2d;
} .compass-inner {

 width: 85%;
 height: 85%;
 background-color: transparent;
 border-radius: 100%;
 position: relative;
 left: 6.9%; 
 top: 6.9%;
 border: 2px solid #2d2d2d;
} .main-arrow {

 height: 100%;
 width: 7.5%;   
 left: 46%;
 position: relative;
 padding-top: 3%;
 box-sizing:border-box;
 -webkit-transform: rotate(50deg);
 -moz-transform : rotate(50deg);
 -o-transform: rotate(50deg);
 -ms-transform: rotate(50deg);
 transform: rotate(50deg);
} .arrow-up, .arrow-down {

 width: 0; 
 height: 0;
 border-bottom: 57px solid red;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 position: relative;
} .arrow-down {

 border-bottom-color: #2d2d2d;
 -webkit-transform: rotate(180deg);
 -moz-transform : rotate(180deg); 
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
} .north {

 position: absolute;
 left: 45%;
 top: 2.5%;
} .east { position: absolute;

 left: 88%;
 top: 44%;
} .west {

 position: absolute;
 left: 7%;
 top: 44%;
} .south {

 position: absolute;
 left: 45%;
 top: 82%;
} @media (max-width: 600px) {

 .compass {
   width: 150px;
   height: 150px;
   font-size: 11px;
 }
.arrow-up, .arrow-down {

 border-bottom: 57px solid red;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
} .arrow-down {

 border-bottom-color: #2d2d2d;
} } @media (max-width: 769px) {

 .compass {
   width: 150px;
   height: 150px;
   font-size: 11px;
 }
.arrow-up, .arrow-down {

 border-bottom: 57px solid red;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
} .arrow-down {

 border-bottom-color: #2d2d2d;
} } @media (max-width: 400px) {

 .compass {
   width: 100px;
   height: 100px;
   font-size: 11px;
 }
.arrow-up, .arrow-down {

 border-bottom: 38px solid red;
 border-left: 3px solid transparent;
 border-right: 3px solid transparent;
} .arrow-down {

 border-bottom-color: #2d2d2d;
} }
    5. In the Javascript section, enter the lines of code as shown in the following image.

  2. In the page designer for the Stylish Header page:
    1. In the Html section, enter the following lines of code: 
      <h1>3d text effect</h1>
    2. In the Css section, enter the following lines of code:
      body{
  text-align:center;
  background:#dfdfdf;
}
h1{
  text-transform:uppercase;
  font-size:72px;
  font-family:'Verdana';
  padding:30px;
}
    3. In the Javascript section, enter the following lines of code: 
      jQuery(document).ready(function(){
   $('h1').mousemove(function(e){
     var rXP = (e.pageX - this.offsetLeft-$(this).width()/2);
     var rYP = (e.pageY - this.offsetTop-$(this).height()/2);
     $('h1').css('text-shadow', +rYP/10+'px '+rXP/80+'px rgba(227,6,19,.8), '+rYP/8+'px '+rXP/60+'px rgba(255,237,0,1), '+rXP/70+'px '+rYP/12+'px rgba(0,159,227,.7)');
   });
});
  3. In the page designer for the Tiles page:
    1. Add a html widget.
    2. In the Html section, enter the following lines of code:
       <div class="tile"></div>
    3. In the Css section, enter the lines of code as shown in the following image.

  4. In the page designer for the Marquee page:
    1. Add a html widget.
    2. In the Html section, enter the lines of code as shown in the following image.

    3. In the Css section, enter the lines of code as shown in the following image.

  5. Save the application, and preview it.

    The application contains the four pages.