+ Start a Discussion
DevAngelDevAngel 

Sample DOJO/TurboWidget SControl

This is a sample scontrol that takes the query results and renders in a grid widget. This sample uses a grid widget from TurboWidgets. The widget is essentially a dojo widget. With a little more effort, the grid could be editable as the grid supports this.

Cheers and good luck!

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TurboWidgets, presented by TurboAjax Group</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="https://www.salesforce.com/services/lib/ajax/beta3.3/sforceclient.js—browser=true"></script>
<!--<script language="JavaScript" type="text/javascript" src="../turbowidgets_beta_1.0.9/turbo/turbo.js"></script>-->
<script language="JavaScript" type="text/javascript" src="http://turboajax.com/turbo/turbo.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
 pre, code {
  margin: 8px 0 12px 0;
  padding: 6px 0 6px 0;
  background-color: #F6F6F6;
 }
 pre {
  font-family: "Courier New", Courier, mono;
  font-size: 11px;
  border-top: 1px solid blue;
  border-bottom: 1px solid blue;
 }
 code {
  display: block;
  white-space: nowrap;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
 }
 .module-body {
  font-size: 12px;
  padding-left: 16px;
  padding-right: 16px;
 }
 .panel
 {
  background-color: #EEE;
  border: 1px dotted silver;
  padding: 2px;
 }
 .panel .turbo-splitter-h {
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
 }
 .panel .turbo-splitter-v {
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
 }
 #highlightbox ul {
  margin-bottom: 6px;
  margin-left: 0px;
  padding-left: 26px;
  margin-top: 6px;
  font-size: 11px;
 }
</style>
<script>
 turbo.debug('-- starting TurboWidgets example viewer ---');
</script>
<script>
    var gridController;
    var dataStore;
    
    function initPage() {
        sforceClient.useCookies = true;
        sforceClient.init("{!API_Session_ID}", "{!API_Partner_Server_URL_70}", true);
    }
    function setup() {
        var soql = document.getElementById("txtSOQL").value;
        sforceClient.query(soql, loadData);
    }
    function loadData(qr){
        data = new Array();
        for (var i=0;i<qr.records.length;i++) {
            data.push(qr.records[i].getData());
        }
        fields = new Array();
        fields = qr.records[0].getFields(); 

        columns = qr.records[0].getColumns(); 
        dataStore = new turbo.data.store();
        dataStore.setData(data, fields);
     gridController = new turbo.grid.controller("grid", dataStore, columns);
    }

    Sforce.Dynabean.prototype.getData = function() { 
     this.data = new Array();
     this.fields = new Array();
     this.columns = new Array();
     for (key in this.getKeys()) { 
      var prop = this.getItem(key); 
      if (prop && prop.className != undefined && prop.className == "Property") { 
       var fldDef = this.definition.fieldMap.getItem(prop.name.toLowerCase());
       if (fldDef != null) { 
           var fieldName = fldDef.name;
           var fieldLabel = fldDef.label;
           var value = this.get(fieldName.toLowerCase());
           
           
           var c = typeToColumnType(fldDef)
           
           this.columns.push(c);
           this.fields.push({name: fieldName});
           this.data.push(value);
           
       } 
      } 
     }
     
     return this.data; 
     
     function typeToColumnType(fldDef) {
         var c = {};
         switch (fldDef.type) {
       case "boolean": 
        c = [ turbo.grid.columns.bool, {name: fldDef.label, width: 58, align: 'center' } ];
        break;
       case "int":
        c = [ turbo.grid.columns.integer, {name: fldDef.label } ];
        break;
       case "currency":
                    c = [ turbo.grid.columns.money, { name: fldDef.label, width: 60, digits: 3} ];
           break;
       case "double":
       case "percent":
        c = [ turbo.grid.columns.decimal, { name: fldDef.label }];
        break;
       case "date":
       case "datetime":
        var ret = [ turbo.grid.columns.date ];
        ret[1] = {};
        ret[1].name = fldDef.label;
        ret[1].width = 150;
        c = ret;
        break;
       case "picklist":
       case "multiselectpicklist":
       case "combobox":
        var plv = fldDef.picklistValues;
        var optionsArray = new Array();
        var valuesArray = new Array();
                 for (var i=0;i<plv.length;i++) {
                  if (plv[i].label != null && plv[i].label != "") {
                   optionsArray.push(plv[i].label);
                   valuesArray.push(plv[i].value);
                  } else {
                   optionsArray.push(plv[i].value);
                   valuesArray.push(plv[i].value);
                  }
                 }
           var ret = [ turbo.grid.columns.enumerated ];
           ret[1] = {};
           ret[1].width = 80;
           ret[1].options = optionsArray;
           ret[1].values = valuesArray; //, { width: 80, options: optionsArray, values: valuesArray } ],
           c = ret;
           break;
       default:
           var ret = [ turbo.grid.columns.basic ];
           ret[1] = {};
        ret[1].name = fldDef.label;
        ret[1].width = 78; // = { name: fldDef.label, width: 78 }, 
        c = ret;
        c = ret;
        break;
      }
      return c;
     }
    };
    Sforce.Dynabean.prototype.getFields = function() { 
        return this.fields;
    }
    Sforce.Dynabean.prototype.getColumns = function() { 
        return this.columns;
    }


    var data;
    var fields;
    var columns;

 selectTheme = function() {
  grid.setTheme(turbo.$("themeselect").value);
 }
function btnRun_onclick() {
    setup();
}

</script>
</head>
<body>

<div class="banner"></div>
<div class="page">
<div class="text bigText outline">If you need a high-level grid with tons of features, here it is. &nbsp; Enter an
    arbitray, but syntactically correct SOQL<br />
    statement, then click Run Query.&nbsp; Try a SOQL that returns a picklist field.&nbsp;
    Although the grid is editable, the<br />
    code for persisting edits back to salesforce.com has not been implemented (any changes
    to the values won't<br />
    permanently change your data).<br />
    <br />
    <textarea id="txtSOQL" style="width: 587px; height: 56px">Select Id, FirstName, LastName From Contact</textarea>&nbsp;
    <input id="btnRun" style="width: 86px" type="button" value="Run Query" onclick="return btnRun_onclick()" /><br />
 <!-- Grid must have a dimensioned container for IE6 -->
 <div style="width: 702px; height: 323px; overflow: hidden; border: 1px solid silver;">
  <div id="grid" autosize="true" dojoType="TurboGrid" oninit="initPage"></div>
 </div>
</div>

</body>

</html>
 
 
Cheers and good luck!
 

Message Edited by DevAngel on 03-24-2006 05:07 PM

MarkMMarkM
Dave,

I had to remove:  —browser=true
 
from the first script tag to get it working for me....
 
-- Mark
sfunstonsfunston
Greetings.

I was wondering someone could update this example so that it can be used with the current winter '07 release.  I have tried to do so myself, but I have had a lot of trouble doing so.

Thanks