Using CloudTables

Inside the application, the next step is to create a Data set. To do this, click on the "Create new" button in the menu on the left-hand side of this page.

Congratulations you've just made a database table!

Now let's add some columns to it. In CloudTables we call columns data points (since they don't need to be used in a table column). Click the "Create new data point" button at the top-right of the data set's page. You'll be asked to select what type of data that data point will contain - choose "Text" if you aren't sure as it's the most versatile type.

That's your first data point created. The data set can contain many data points, so create as many as you like.

To see the table that you have configured click, the "Preview" tab at the top-right of the page - CloudTables will render the table exactly as it will appear when embedded onto your web page. You can use the "New", "Edit" and "Delete" buttons at the top-left of the table to create and edit data in your table.

One feature you might particularly like in CloudTables is its ability to support multi-row editing for rapid data updates. To use this, create multiple rows, and then click / shift-click / ctrl-click to select the rows you want to edit. Then click the "Edit" button - data points which share the same value will be shown as editable, while data points with different values need a click on them to edit (otherwise their unique values will be retained when submitting).

Table controls

Now we've created a data set with data points and seen how data can be created and edited in CloudTables, let's look at how you can customize the client interface to suit your needs and application.

Click the "Table" tab at the top of the data set page - an interactive wire-frame will be shown that represents your table. Here you can:

  • Select which data points from the data set you would like to appear in the table by using the checkboxes in the Table Inspector. You could hide some data points if you only want them to appear in the editing form, or if you only want them accessible via the API.
  • Alter the order of the columns in the table by dragging and dropping them.
  • Change and customize the table controls around the table.
    • To create a new control click and drag it from the Table Inspector. Note that you can have multiple copies of the same control if you wish (e.g. table information at the top and bottom of the table) and CloudTables will keep them all in sync.
    • To change an existing control's location click and drag it - as you drag it around the table, new locations for the control will appear.
    • To delete a control, first click on it to show its Inspector. At the bottom of the Inspector is the delete button.

To demonstrate some of the customizations you can make, click on the default Buttons control at the top-left of the table. The Inspector will update to show the Buttons Inspector. In the "Add new Button" panel, click the "Duplicate" button and it will appear in the wire-frame. The button order can be changed by dragging and dropping the buttons in the Buttons order panel.

Click the Preview tab at the top of the page and you'll see your new "Duplicate" button is there. Select a row in the table and then click the "Duplicate" button and either alter the data that is populated in the form, or just confirm it as is. A new row will appear in the table. Multiple records can be duplicated by shift selecting them.

Form editing

Very similar to the Table tab, the Editing tab shows a wire-frame of the editing form and provides customization options. Here you can:

  • Select which data points you would like shown in the form. If a data point is not selected, it will automatically take the default value of the field (or the data point if one is not specified for the field).
  • Alter the text of the form for create, edit and delete actions. For example you might wish the form title to say "New stock item" if you are building a stock table.
  • Show messages on the form, such as general information that will let your clients know what the form is for and what data is expected.
  • Alter the order of the fields in the form - to do this, click and drag the field you'd like to change.

Each field also can be customized by clicking on it to show the Field Inspector. Depending on the data type of the data point, different options will be available. For example with a text input you can select to have a "WYSIWYG" input control instead of a simple single inline text input box. To demonstrate this, select the "WYSIWYG" formatting type from the drop down and click the Embed tab once again. Now create a new entry, or edit an existing one to see the new input controls.

Data validation

Data validation is vitally important in any application - you need to be sure that your clients are entering the data you expect into your database and anything that is unexpected is rejected. For example consider a simple e-mail address field - you wouldn't want someone entering a URL!

Data validation in CloudTables is done on a per data point basis. Click the Data tab for the data set and then select a data point. In the Data point Inspector you will see a Validation pane. By default there are no validation rules, but to add one, simply click on the "Add new validation rule" button and select the rule you want. Some validation rules require an input and multiple validation rules can be applied (e.g. min and max length can be combined together) to a single data point. The list of rules available will depend on the data type of the data point selected.

Note that it is possible to add a validation rule which would invalidate existing data. The rules are only applied when data is created or edited by clients - it is not applied retrospectively to existing data.

Next steps

Now that you have a good understanding of what CloudTables is and how to use it to create customized editing interfaces for your clients, let's look at some more advanced topics: