This function creates a new base widget from scratch.  The implementation of the widget will require advanced JavaScript coding.

Parameter:

Configuration Options:

Example:

The following code creates a "google maps" base widget.

pui.widgets.add({
  name: "google maps",
  newId: "Map",
  menuName: "Google Maps Widget",

 // Scripts that are loaded only when this widget is first used.
  dependencies: ["/myproject/custom.css", "/myproject/custom.js",

    // A script that is loaded conditionally, only when the width property's value is 400px.
    {"script": "/myproject/custom2.js",
     "condition": function (properties, boundData, isDesigner){
        // The property is hard-coded in Designer or a Genie screen:
        if (typeof properties["width"] != "object") return properties["width"] == "400px";
        // The property is bound to an RPG field in a Rich Display File.
        else if (properties["width"] != null && typeof properties["width"]["fieldName"] == "string"){
          var value = boundData[ properties["width"]["fieldName"].toUpperCase() ];
          return value == "400px";
        }
        else if (isDesigner) return true; //Always load when in Visual Designer.
        return false;
      }
    }],

 // default properties for the widget
  defaults: {
    "width": "400px",
    "height": "300px",
    "z index": "25",
    "background color": "#FFFFFF"
  },

  // property setter functions
  propertySetters: {

    // this will fire when the field type property is set to "google maps"
    // all initialization code for the element goes here
    "field type": function(parms) {
      if (parms.design) {
        // all design mode content creation code goes here
        // add preview image
        var img = document.createElement("img");
        img.src = "/profoundui/proddata/images/GoogleMaps.jpg";
        img.style.position = "absolute";
        img.style.left = "0px";
        img.style.top = "0px";
        img.style.width = parms.dom.style.width;
        img.style.height = parms.dom.style.height;
        parms.dom.appendChild(img);
        parms.dom.style.overflow = "hidden";
      }
      else {
        // runtime content creation code goes here
        // clear
        parms.dom.innerHTML = "";
        // get url property - evalProperty will evaluate any js expressions that may have been used to build the property
        address = parms.evalProperty("google maps address");
        // populate the widget's dom element
        if (address == null || address == "") {
          parms.dom.innerHTML = "Google Maps Address property not specified.";
        }
        else {
          // here, we build an iframe element and put it into the dom
          var widthHeight = "";
          var width = parseInt(parms.properties["width"]);
          var height = parseInt(parms.properties["height"]);
          if (width > 0) widthHeight += " width=" + width;
          if (height > 0) widthHeight += " height=" + height;
          var url = "http://maps.google.com/maps?hl=enl&q=" + encodeURIComponent(address) + "&ie=UTF8&hq=&hnear=" + encodeURIComponent(address) + "&output=embed";
          var html = "<iframe src=\"" + url;
          html += '" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"';
          html += '"' + widthHeight + '>';
          parms.dom.innerHTML = html;
        }
      }
    },

    // this will fire when the width property of the element changes
    "width": function(parms) {
      if (parms.design) {
        // adjust preview image width
        parms.dom.firstChild.style.width = parms.value;
      }
    },

    // this will fire when the height property of the element changes
    "height": function(parms) {
      if (parms.design) {
        // adjust preview image height
        parms.dom.firstChild.style.height = parms.value;
      }
    }

  }

});