Using the JSDO and DataSource with an existing NativeScript app

Using the JSDO and DataSource components with an existing NativeScript app

The following steps assume that you have an existing NativeScript app.

• If you do not have an existing app, you can create a new one using the blank template:
  tns create testapp --template tns-template-blank-ng

• From the project folder, install the npm package @progress/jsdo-nativescript:
  npm install @progress/jsdo-nativescript

• Build app and launch the emulator:
  tns run android

• Import @progress/jsdo-core and @progress/jsdo-nativescript from home.component.ts.

• Add code to create a JSDOSession and DataSource instance.

• Add code to access the data from home.component.html.

Sample code for home.component.ts

import { progress } from "@progress/jsdo-core";
import { DataSource, DataSourceOptions } from "@progress/jsdo-nativescript";

import { Component, OnInit } from "@angular/core";
import { progress } from "@progress/jsdo-core";
import { DataSource, DataSourceOptions } from "@progress/jsdo-nativescript";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    items: Array<object> = [];

    constructor() {
        this.readCustomers((data) => {
            this.items = data;
        });
    }

    ngOnInit(): void {
        // Empty
    }

    readCustomers(callback) {
        const serviceURI = "https://oemobiledemo.progress.com/OEMobileDemoServices";

        progress.data.getSession({
            serviceURI,
            catalogURI: serviceURI + "/static/SportsService.json",
            authenticationModel: "anonymous"
        }).then((object) => {
            const dataSource = new DataSource({
                jsdo: new progress.data.JSDO({ name: "Customer" })
            });

            return dataSource.read({
                filter: "CustNum < 11"
            }).subscribe((data) => {
                callback(data);
            }, () => {
                console.log("Error reading records.");
            });
        }, (object) => {
            console.log("Error accessing data.");
        });
    }
}

Sample code for home.component.html

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout class="page">
    <ListView [items]="items" class="list-group">
        <ng-template let-item="item">
            <Label [text]="item.Name" class="list-group-item"></Label>
        </ng-template>
    </ListView>
</GridLayout>