Apex Code Development You need to sign in to do that
Don't have an account?
DevAngel 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. Enter an
arbitray, but syntactically correct SOQL<br />
statement, then click Run Query. Try a SOQL that returns a picklist field.
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>
<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
I had to remove: —browser=true
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