TWebMyCloudDbClientDataset Component
Introduction
The myCloudData.net service is an instantly available, secure and worry-free cloud data storage service. The component TWebmyCloudDbClientDataset
makes it easy for a Delphi TMS Web Application to use database tables on myCloudData.net service by a familiar syntax of using ClientDataSet
. It also allows a seamless integration of the myCloudData.net data tables with data-aware components like TWebDBGrid. All the database operations can be done in the standard Delphi way through the TWebmyCloudDbClientDataset
component. All you need to do is specify the myCloudData properties and add the field definitions either in design more or in code in a standard Delphi syntax. Then connect a DataSource and Data components to it and make the dataset active.
Your first web application using TWebmyCloudDbClientDataset
Set up your myCloudData project in the myCloudData console
Follow these steps:
- Navigate to https://www.myclouddata.net/ and sign up for myCloudData if not already done
- Go to My Account → Control Panel
- Create a new Table and add the required Fields
- Note the Table name. This will be used for the TableName property later. Go to My Account → API Key
- Enter your myCloudData password and click “Get your App Key”
- Note the App Key and App Callback URI values. These will be our
properties
AppKey
andAppCallbackURL
to be used later later. Note theApp Secret
value. This will be our propertyAppSecret
to be used later. Note that theAppCallbackURL
should be set to the URL of your web application. This can be different in debugging (typically something like http://localhost:8000/Project1/Project1.html) as from a deployed application. You might as such need to adapt the callbackURL
for deployment!
Create a TMS Web Application
Create a standard TMS Web Application in the Delphi IDE by choosing File, New, Other, TMS Web Application. A new web form is created.
Set up the TWebmyCloudDbClientDataset component
Go to the Tool Palette
and select the TWebmyCloudDbClientDataset
component from the “TMS Data Access” section and drop it on the web form.
Specify the Component Properties
Set up the properties either in code or in the Object Inspector by right-clicking on the “Fields Editor”:
- AppKey: from the “My Account → API Key” section of myCloudData.net
- AppCallbackURL: from the “My Account → API Key” section of myCloudData.net
- TableName: from the “My Account → Control Panel” section of myCloudData.net
Create the Fields or Properties of each object in the Object Store
The DataSet
field definitions need to be set up either in Object Inspector
by rightclicking on the “Fields Editor” or in the WebFormCreate
event code.
Select the fields in the Object Inspector
Follow these steps:
1. Right-click the TWebmyCloudDBClientDataset
and select “Fetch Fields”
2. Enter the Client ID (AppKey)
, Client Secret (AppSecret)
and CallbackURL (A local
URLis required here, for example: [http://127.0.0.1:8888/](http://127.0.0.1:8888/)) values. Note that the TableName is retrieved automatically from the TableName property.
3. Click the “Fetch” button and follow the authentication instructions. If the process is successfull, a dialog with the list of available fields is displayed.
4. Right-click the
TWebmyCloudDBClientDataset` and select “Fields Editor”
5. Select the required fields
Create the Fields in code
Here is an example of adding the field definitions in code in the OnCreate
event. In the
Object Inspector
, double-click on OnCreate
event of the Web Form
. This creates an
event handler procedure WebFormCreate
. The following code in it sets up the field
definitions. What fields you add are based on how you defined them for the Table in
myCloudData.net. Note that _ID field must be defined as data type ftString.
myCloudClientDataSet.FieldDefs.Clear;
2. myCloudClientDataSet.FieldDefs.Add('_ID', ftString);
3. myCloudClientDataSet.FieldDefs.Add('note',ftString);
4. myCloudClientDataSet.FieldDefs.Add('date',ftDate);
5. myCloudClientDataSet.Active := True
Add Data Components that connect to the DataSet
Now select and drop a TWebDataSource
, TWebDBGrid
and TWebDBNavigator
component on the Web Form.
Set up the DataSource and Data components
Set the DataSource’s
DataSet
property to WebMyCloudDbClientDataset1
. Then set the DataSource
property of the grid and navigator to point to TWebDataSource1
.
Set up the Columns of the DBGrid
Do that by clicking on the Columns property of the DBGrid
.
Set up a New Record event
Since we will be adding New Records with the DB Navigator, we need to set up the default
values of the record. For this, we set up an OnNewRecord
event procedure for the myCloudDb
Client Data
Set in the Object Inspector
and type the following code in it.
procedure TForm1...NewRecord(DataSet: TDataSet);
begin
DataSet.FieldByName('note').AsString := 'New Note';
DataSet.FieldByName('date').AsDateTime := Date; // set to today
end;
Run the Web Application
Now you can build and run the application. When you run it for the first time, the component automatically asks you to login by using your credentials for myCloudData.net. The DB Grid will appear empty as there are no records. Try adding new records with the Navigator
and see how it works.
Todo List Demo
Please find this demo in the folder Demos. This Demo connects the component to a Tasks
table to show you the Tasks
with their status, description and dates.
Additional features in this Demo
Add
, Update
, Delete
through separate data aware controls and buttons
The Demo allows you to perform add, update, delete operations through datbase field editor
controls and buttons instead of through the Navigator.
Sorting on columns
We want to be able to sort on any column of the DB Grid by clicking on the header of the
column. So we need to be able to read all the records in the order of that field. For this, we need
to add a Sort Field Definition
specifying the field to be sorted on. This is done in the event
procedure GridTasksFixedCellClick
.
myCloudClientDataSet.ClearSortFieldDefs;
2. myCloudClientDataSet.AddSortFieldDef(LIndex, gridTasks.Columns[ACol].SortIndicator = si
Ascending);
3.
4. myCloudClientDataSet.Refresh;
The first parameter to AddSortFieldDef
call is the field name and the second parameter is a boolean flag that is true for ascending order and false for descending order. The Demo uses its own logic to pass this information and then Refreshes (reloads) the data in the desired order.
Updating, inserting and deleting data
This Demo also shows an example of connecting Data components like CheckBox
or a Memo to the database so that those fields can be edited in the current record. After editing, a call to Update from the update button takes care of committing the changes to the cloud database. Similary, the Demo has examples of Inserting a new record and Deleting the current record by respective calls.
Troubleshooting
Exceptions are displayed in a red alert message at the bottom of the web page. You can also look at the Browser Console for error messages. If you start getting authentication errors when the application was working earlier, it’s most probably a changed IP address. In any case, the first thing you can try is clear the Local Storage which is under Applications in Chrome Developer tools.
Reference Section
TWebMyCloudDbClientDataset
Below is a list of the most important properties and methods of TWebIndexedDbClientDataSet
component.
Properties of TWebmyCloudDbClientDataSet
Property | Description |
---|---|
Active | Set this to True to activate the DataSet . Field definitions must be present along with other properties described below. |
AppKey | Get from the “API Key” section of myCloudData.net. |
AppCallbackURL | Get from the “API Key” section of myCloudData.net. |
TableName | Specify a table name to connect to from the “Control Panel” section of myCloudData.net. |
OnError | This is an event property that notifies the application of any errors from myCloudData.net. The event can be set up at design time in Object Inspector by double-clicking on it. If the Application does not subscribe to this event, an Exception is raised on such errors. If subscribed, the application can then decide what to do. For example, show error, raise exception or take some corrective action. Note that hard errors (Delphi Exceptions) are not passed in this event. Rather, they cause an Exception that appears in a red alert. But in any case, all errors are always logged to the browser console. |
Methods of TWebmyCloudDbClientDataset
Only the methods specific to myCloudData are listed below. Other methods from the base DataSet classes are used in the standard way.
Method | Description |
---|---|
Refresh | procedure Refresh(Force: Boolean=False); Refresh reloads all the objects from the database. If AddSortFieldDef has been used to set up sorting definitions, the objects are loaded in the order specified. In addition, the current record pointer is restored after the Reload which is convenient for the user interface of the web application. Refresh is internally postponed till all the pending updates started asynchronously are finished. The Force parameter ignores the pending updates and forces a reload. |
AddSortFieldDef and ClearSortFieldDefs | Use AddSortFieldDef to add one or more sort definitions for loading the data. Before using a series of these calls, you must clear all sort definitions by calling ClearSortFieldDefs .procedure AddSortFieldDef(aField: String; isAscending: Boolean)); Where - aField - the field name for the sorting order - isAscending - Set True for ascending order. |
ClearTokens | After a successful authentication & authorization, the TWebmyCloudDbClientDataset will store the obtained access tokens in the local storage so that a next time, this does not need to be obtained again. If for some reason this needs to be removed, call procedure ClearTokens; |