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.


Dialog Form


Source Code:
<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


Source Code:
<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


Source Code:
<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


Source Code:
<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


Source Code:
<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


Source Code:
<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



Source Code:
<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



Source Code:
<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


Source Code:
<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


Source Code:
<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>




Copyright 2016, Scilligence (http://www.scilligence.com/)

License: