Building Chemistry/Biology Form with JSDraw

JSDraw is not only a Cheminformatics and Bioinformatics algorithm library to draw, display and process chemical and biological structures but also a web application development framework to make it easy to develop Chemsitry/Biology web application. Below please find some examples on building web forms with JSDraw.

• JSDraw API
• JSDraw Demo Pages
• Download JSDraw

Dialog Form

			<button onclick="showDialog()">Show Dialog</button>
			<script type="text/javascript">
			function showDialog() {
			var columns = {
			structure: { label: "Structure", type: "jsdraw", width: 800 },
			name: { label: "Compound Name", type: "input", width: 800 },
			vendor: { label: "Vendor", type: "select", options: ["Company A", "Company B"], width: 300 },
			amount: { label: "Amount", type: "number", unit: "g", width: 200 }
			};

			var dlg = scil.Form.createDlgForm("JSDraw Form", columns, { label: "OK", onclick: function () {
			var data = dlg.form.getData();
			scil.Utils.alert("Compound Name = " + data.name);
			}
			});
			}
			</script>
		

Inline Form

			<div id='Div1'></div>
			<script type="text/javascript">
			scil.ready(function () {
			var columns = {
			structure: { label: "Structure", type: "jsdraw", required: true, width: 800 },
			name: { label: "Compound Name", type: "input", required: true, width: 800 },
			vendor: { label: "Vendor", type: "select", options: ["Company A", "Company B"], width: 300 },
			amount: { label: "Amount", type: "number", unit: "g", width: 200 }
			};
			var form = new scil.Form();
			form.render(scil.byId("Div1"), columns, { immediately: true });
			});
			</script>
		

Biological Sequence Form

			<div id='Div2'></div>
			<script type="text/javascript">
			scil.ready(function () {
			var columns = {
			sequence: { label: "Sequence", type: "jsdraw.se", width: 800, height: 200 },
			expiration: { label: "Expiration", type: "date", width: 200 }
			};
			new scil.Form().render(scil.byId("Div2"), columns, { immediately: true });
			});
			</script>
		

Table

			<div id='Div3'></div>
			<script type="text/javascript">
			scil.ready(function () {
			var columns = {
			user: { label: "User", type: "input", width: 300 },
			role: { label: "Role", type: "select", options: ["", "Member", "Manager"], width: 300 }
			};
			var table = new scil.Table(false, true);
			table.render("Div3", columns);
			table.setData([{ user: "Tony", role: "Member" }, { user: "Jack", role: "Manager"}]);
			});
			</script>
		

Table in Form

			<div id='Div4'></div>
			<script type="text/javascript">
			scil.ready(function () {
			var columns = {
			name: { label: "Compound Name", type: "input", width: 800 },
			vendor: { label: "Vendor", type: "select", options: ["Company A", "Company B"], width: 300 },
			amount: { label: "Amount", type: "number", unit: "g", width: 200 },
			table: { label: "Table", type: "table", columns: {
			user: { label: "User", type: "input", width: 300 },
			role: { label: "Role", type: "select", options: ["", "Member", "Manager"], width: 300 }
			}
			}
			};
			var form = new scil.Form();
			form.render(scil.byId("Div4"), columns, { immediately: true });
			});
			</script>
		

JSdraw.Table in Form

			<div id='Div5'></div>
			<script type="text/javascript">
			scil.ready(function () {
			var columns = {
			name: { label: "Compound Name", type: "input", width: 800 },
			vendor: { label: "Vendor", type: "select", options: ["Company A", "Company B"], width: 300 },
			amount: { label: "Amount", type: "number", unit: "g", width: 200 },
			table: { label: "Table", type: "jsdraw.table", options: { columns: {
			stucture: { label: "Structure", type: "structure", width: 300 },
			user: { label: "User", type: "input", width: 200 },
			role: { label: "Role", type: "select", options: ["", "Member", "Manager"], width: 200 }
			}
			}
			}
			};
			var form = new scil.Form();
			form.render(scil.byId("Div5"), columns, { immediately: true });
			});
			</script>
		

Progress Dialog

			<button onclick='showprogress()'>Show Progress Dialog</button><br />
			<script type="text/javascript">
			var timer = null;
			function showprogress() {
			scilligence.Progress.show("Running", function () { alert("cancelled"); });
			scilligence.Progress.update(0, "Value ")
			var count = 0;
			clearInterval(timer);
			timer = setInterval(function () { scilligence.Progress.update(++count, "Value " + count); }, 500);
			}
			</script>
		

Upload File

			<button onclick='uploadefile()'>Upload File</button><br />
			<script type="text/javascript">
			function uploadefile() {
			var callback = function (ret) { alert(ret.message); };
			scilligence.Utils.uploadFile("Uploade File", "Please upload attachments", "Service.aspx", callback, { project: "HIV" }, null, true);
			}
			</script>
		

Picture in Form

			<div id='Div6'></div>
			<script type="text/javascript">
			scil.ready(function () {
			var columns = {
			name: { label: "Compound Name", type: "input", width: 800 },
			pic: { label: "Picture", type: "image", width: 400, options: {} },
			vendor: { label: "Vendor", type: "select", options: ["Company A", "Company B"], width: 300 },
			amount: { label: "Amount", type: "number", unit: "g", width: 200 }
			};
			var form = new scil.Form();
			form.render(scil.byId("Div6"), columns, { immediately: true });
			});
			</script>
		

File in Form

			<div id='Div7'></div>
			<script type="text/javascript">
			scil.ready(function () {
			var columns = {
			name: { label: "Compound Name", type: "input", width: 800 },
			file: { label: "Attachment", type: "file", width: 200, options: {} },
			table: { label: "Table", type: "table", columns: {
			assay: { label: "Assay", type: "input", width: 300 },
			ic50: { label: "IC50", type: "number", width: 100 },
			curve: { label: "Curve", type: "file", width: 200 }
			}
			}
			};
			var form = new scil.Form();
			form.render(scil.byId("Div7"), columns, { immediately: true });
			});
			</script>
		

• Free for education (Download)
• Please contact us for commercial licenses