6. Make it data-driven with PHP

Description 

This example takes the previous sample and makes it data driven and adds a way for the user to define new DataSource types. It will also be extended to define a new DataSource and change the user interface to allow the user to switch between the two DataSources, we don't need add any method, because when the DataSource is changed by user, the php enging will load the DataSource automatically.

Prerequisites

As this sample builds on the previous one, in order to be able to run it, please esnure you have the latest build of SmartClient (at least version 8.3p). This can be downloaded from here.

Adding a new DataSource

To test this new code,  define a new DataSource instance for employee and later allow the user to switch between them. Firslyt, the definition of the DataSource itself:

isc.RestDataSource.create({
    ID: "employees",
    fields: [
        {name: "Name", title: "Name", type: "text", length: "128" },
        {name: "EmployeeId", title: "Employee ID", type: "integer", primaryKey: "true", required: "true" },
        {name: "ReportsTo", title: "Manager", type: "integer", required: "true", foreignKey: "employees.EmployeeId", rootValue: "1", detail: "true" },
        { name: "Job", title: "Title", type: "text", length: "128" },
        { name: "Email", title: "Email", type: "text", length: "128" },
        { name: "EmployeeType", title: "Employee Type",type: "text", length: "40" },
        { name: "EmployeeStatus", title: "Status", type: "text", length: "40" },
        { name: "Salary", title: "Salary", type: "float" },
        { name: "OrgUnit", title: "Org Unit", type:"text", length:"128" },
        { name: "Gender", title: "Gender", type:"text", length:"7",
            valueMap: ["male", "female"]
        },
        { name: "MaritalStatus", title: "Marital Status", type: "text", length: "10",
            valueMap: ["married", "single"]
        }
    ],
    dataFormat: "json",    
    operationBindings: [
            { operationType: "fetch", dataProtocol: "postMessage", dataURL: "process.php" },
            { operationType: "add", dataProtocol: "postMessage", dataURL: "process.php" },
            { operationType: "update", dataProtocol: "postMessage", dataURL: "process.php" },
            { operationType: "remove", dataProtocol: "postMessage", dataURL: "process.php" }
        ]
});

fields: [
        {name: "Name", title: "Name", type: "text", length: "128" },
        {name: "EmployeeId", title: "Employee ID", type: "integer", primaryKey: "true", required: "true" },
    ]

....

]

Create the database table for this DataSource. For this, open the Database Explorer, select the connection to the database and right click 'Tables'. In the popup menu select 'Add new table'. Using the table editor, enter the fields for the table as follows:

Save the table with the name "employee", then open the table data and add a couple of sample rows, so the table has data.

Finally,  load this newly defined DataSource into the browser. For this edit the index.php and add the following code:

<SCRIPT SRC="ds/employees.js"></SCRIPT>

UI changes

On the user interface, a change is required to allow users to switch the current DataSource. Add a form with a drop-down with the DataSources to switch and place it in front of the grids below the ListGrid. This requires putting the form in the HStack layout used for the buttons: 

isc.HStack.create({
    membersMargin: 10,
    ID: "gridButtons",
    members: [
        isc.DynamicForm.create({
            values: { dataSource: "Change DataSource" },
            items: [
                { name: "dataSource", showTitle: false, editorType: "select",
                    valueMap: ["supplyItem", "employees"],
                    change: function (form, item, value, oldValue) {
                        if (!this.valueMap.contains(value)) return false;
                        else {
                            supplyItemGrid.setDataSource(value);
                            advancedFilter.setDataSource(value);
                            supplyItemGrid.filterData(advancedFilter.getCriteria());
                        }
                    }
                }
            ]
        }),
        isc.IButton.create({
            top: 250,
            title: "Edit New",
            click: "supplyItemGrid.startEditingNew()"
        }),
 
        isc.IButton.create({
            top: 250,
            left: 100,
            title: "Save all",
            click: "supplyItemGrid.saveAllEdits()"
        }),
    ]
});

Notice that when the user changes the DataSource,  the selected DataSource is set, both for the supplyItemGrid and for the advancedFilter FilterBuilder. Then filterData() is called on the grid to refresh the content.

This example now shows a data-driven DataSource that allows users to add/remove/update two DataSources with two different entity DataSource, and also apply various filter criteria built with the Filter Builder.

The complete code for this sample project can be downloaded from here.