Skip to content

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:

  1. Navigate to https://www.myclouddata.net/ and sign up for myCloudData if not already done
  2. Go to My Account → Control Panel
  3. Create a new Table and add the required Fields
  4. Note the Table name. This will be used for the TableName property later. Go to My Account → API Key
  5. Enter your myCloudData password and click “Get your App Key”
  6. Note the App Key and App Callback URI values. These will be our properties AppKey and AppCallbackURL to be used later later. Note the App Secret value. This will be our property AppSecret to be used later. Note that the AppCallbackURL 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 callback URL 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 localURLis 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 theTWebmyCloudDBClientDataset` 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;