Skip to content

Using the JSDO component with plain HTML and JavaScript

Jump to bottom
edselg edited this page Oct 14, 2018 · 1 revision

Setup

  • mkdir jsdo-basic
  • cd jsdo-basic
  • npm init -f
  • npm install @progress/jsdo-core

Create files main.html and main.js using the following code. You can open main.html in a web browser to view the app.

Code for main.html

<!DOCTYPE html>
<html>
<head>
    <script src="node_modules/@progress/jsdo-core/lib/progress.core.js"></script>
    <script src="main.js"></script>
</head>

<body>
    <h2>Customers in Hawaii</h2>

    <div>
        <div>
            <button onclick="newRecord()">New</button>
            <button onclick="saveRecord()">Save</button>
            <button onclick="deleteRecord()">Delete</button>
        </div>
        <br />
        <div id="appMessage" style="background-color: lightcoral;"></div>        
        <div style="width: 300px; float: left;">
            <select id="list" size="17" style="height:300px;width: 250px"
                onChange="onSelectChange(this)">
            </select>
        </div>
        <div style="margin-left: 300px;">
            <div style="width: 50%; padding: 10px;">
                <label>CustNum</label>
                <input id="CustNum" disabled="false" />
            </div>
            <div style="width: 50%; padding: 10px;">
                <label>Name</label>
                <input id="Name" />
            </div>
            <div style="width: 50%; padding: 10px;">
                <label>State</label>
                <input id="State" />
            </div>
            <div style="width: 50%; padding: 10px;">
                    <label>Balance</label>
                    <input id="Balance" />
                </div>        
        </div>
        <div style="clear: both;"></div>
    </div>    
</body>
</html>

Code for main.js

/* global progress */
var serviceURI = "https://oemobiledemo.progress.com/OEMobileDemoServices";
var catalogURI = "https://oemobiledemo.progress.com/OEMobileDemoServices/static/SportsService.json";

var CUSTOMER_TEMPLATE = {
    CustNum: '',
    Name: '(new customer)',
    State: 'HI',
    Balance: 0
};

function onAfterFillCustomers(object) {
    var text = "";
    object.jsdo.ttCustomer.foreach(function (customer) {
        if (text) {
            text += '<option value="'
                + customer.data._id + '">' + customer.data.Name + '</option>\n';
        } else {
            text += '<option selected value="'
                + customer.data._id + '">' + customer.data.Name + '</option>\n';
            displayRecord(customer.data._id);
        }
    });
    document.getElementById("list").innerHTML = text;
}

var jsdo;

progress.data.getSession({
    serviceURI: serviceURI,
    catalogURI: catalogURI,
    authenticationModel: "anonymous"
}).then(function (/* object */) {
    jsdo = new progress.data.JSDO({ name: 'Customer' });
    readRecords();
}, function () {
    console.log("Error while creating session.");
});

function readRecords() {
    // jsdo.fill("State = 'HI'")
    jsdo.fill({
        filter: {
            field: "State",
            operator: "eq",
            value: "HI"
        }
    })
        .then(onAfterFillCustomers,
            function (object) {
                document.getElementById("appMessage").innerText = "Error while reading records: " + getErrorMessage(object);
            });
}

function onSelectChange() { // eslint-disable-line no-unused-vars
    var id = document.getElementById("list").value;
    displayRecord(id);
}

function displayRecord(id) {
    var jsrecord = jsdo.findById(id);
    document.getElementById("CustNum").value = jsrecord.data.CustNum;
    document.getElementById("Name").value = jsrecord.data.Name;
    document.getElementById("State").value = jsrecord.data.State;
    document.getElementById("Balance").value = jsrecord.data.Balance;
}

function newRecord() { // eslint-disable-line no-unused-vars    
    document.getElementById("appMessage").innerText = "";

    var jsrecord = jsdo.add(CUSTOMER_TEMPLATE);
    console.log(jsrecord.data);
    var list = document.getElementById("list");
    var option = document.createElement("option");
    option.value = jsrecord.data._id;    
    option.text = jsrecord.data.Name;
    option.selected = true;    
    list.add(option, 0);
    
    displayRecord(jsrecord.data._id);
}

function saveRecord() { // eslint-disable-line no-unused-vars
    var id = document.getElementById("list").value;    
    var jsrecord = jsdo.findById(id);

    document.getElementById("appMessage").innerText = "";

    jsrecord.assign({
        Name: document.getElementById("Name").value,
        State: document.getElementById("State").value,
        Balance: document.getElementById("Balance").value
    });
    jsdo.saveChanges(true).then(function () {
        readRecords();
    }, function (object) {
        document.getElementById("appMessage").innerText = "Error: " + getErrorMessage(object);        
    });
}

function deleteRecord() { // eslint-disable-line no-unused-vars
    var id = document.getElementById("list").value;    
    var jsrecord = jsdo.findById(id);

    document.getElementById("appMessage").innerText = "";

    jsrecord.remove();
    jsdo.saveChanges(true).then(function () {
        readRecords();
    }, function (object) {
        document.getElementById("appMessage").innerText = "Error: " + getErrorMessage(object);
    });
}

function getErrorMessage(object) {
    var message = "";

    if (object.info && object.info.errorObject) {
        message = object.info.errorObject.message;
    }
    object.jsdo.getErrors().forEach(function (error) {
        message += error.error;
    });
    return message;
}

Home

What's New

Preview Release

Getting Started

Documentation

Development

Clone this wiki locally