RAD Server and Sencha CRUD Grid

This post shows how to create a RAD Server REST Endpoint (JSON Web Service ) using the RAD Server Database Endpoints Wizard using a FireDAC Connection, to create REST Endpoints for CRUD functionality. And create a Sencha Web Client Application with a CRUD Grid for our data!

RAD Server Steps
1. Using RAD Studio, Delphi or C++ Builder:
File | New | Other | RAD Server | RAD Server Package | Click OK.

radserverpackage-3

2. On the RAD Server Package Wizard, select Create package with resource:

packageresource

Click Next.
3. Enter a Resource Name (any name). I’m using the name MyData
Select DataModule for the File type.

rs_datamodule

Click Next.

4. On the RAD Server Package Wizard, un-select Sample Endpoints, and un-select API Documentation.
Select Database Endpoints

dataendpoints
Click Next.

5. Select an existing FireDAC connection, and Login to your database.

db_connection

Click OK.

6. Select one or more tables to use for your Sencha CRUD Grid Web application. Here I’m selecting Country, Customer and Employee Tables from my Employee Database:

tables

Click Finish.

7. Your RAD Studio, Delphi or C++ Builder creates your DataModule, with your FireDAC Connection (FDConnection), and FireDAC Query components (qryCountry, qryCustomer, qryEmployee) for your Country, Customer and Employee Tables, and RAD Server (EMS) DataSetResource Components:

datamodule_dsr

The new EMSDataSetResource component allows for greater control of the data retrieved by desktop, multi-device, web and other service-based applications that connect to your RAD Server application. Using this new component RAD Server applications can provide access all of a data set’s data, a specific page of data, updating a data set record, creating a new data set record, and deleting a data set entry.

8. The Database Endpoints wizard we used in step 4, also added TEMSDataSetResource components for each of the tables. Looking in the Object Inspector, we see the Allowed Actions property for these tables: List, Get, Post, Put and Delete, to give us full CRUD functionality!

allowedproperties

9. Save (File | Save Project As) your RAD Server Module in a new folder, with the name: RadServer_Sencha_CRUD:

rs_sencha_crud

10. Build and Run your RAD Server Module. Your RAD Server Log shows you your REST Endpoints to access data from your Tables. For example: GET for the Employee table has this REST endpoint: {“name”:”dsrEMPLOYEE.List”,”method”:”Get”,”path”:”mydata/EMPLOYEE/”
The RESTEndpoint would be: http://localhost:8080/mydata/EMPLOYEE/

rs_running

11. To test this Rest Endpoint, click the Open Browser button on the RAD Server UI. and Enter the REST Endpoint: http://localhost:8080/mydata/EMPLOYEE/
This is your JSON Web Service for your Employee table data.
You should see a JSON Array returned for your Employee Data:

json-2

Great! The RAD Server part is complete.
Next, lets create a Sencha Web Client Application with a CRUD Grid for our data!

Sencha Web Client Application Steps

1. Using Sencha Architect;

sencha_arch

2. New Project | Blank | Classic Project

sencha_new
Click Create.

3. This creates a new Sencha Ext JS Classic Web Application:

sencha_extjs

4. Click the Sencha Data UI Builder icon:  data_ui

5. For the Data Source, select JSON Web Service:

jonwebservice

6. For the Model Name, let’s call it myModel. For the URL of this service, enter: http://localhost:8080/mydata/EMPLOYEE/

url-2

7. Parts to Create.  Select all parts (Model, Store, List View, Details View, Form View, and Controller.

Click Import Fields:

importfields

8. All the columns (fields) from your Employee table get added:

datafields

9. Click Generate generate

10. The Sencha Project Inspector shows your project has been created with your Views, and Model:

projinspect

11. Select your MyModels View. Your Sencha Panel shows your Initial View:, with Add, Edit and Remove functionality buttons for CRUD functions on the data!

webclient

And that’s how easy it is to use RAD Server to create a REST Endpoint (JSON Web Service ) using the RAD Server Database Endpoints Wizard using a FireDAC Connection, to create REST Endpoints for CRUD functionality. And how to create a Sencha Web Client Application with a CRUD Grid for our data!