Can I catch a row update button action and programmatically perform custom validations/mods

pmarks906d

I have embedded a cloudtable onto one page of my squarespace website. On this page when I select a datatable row and hit 'Edit' the update form comes up where I can enter values to update the row. When I hit update, the row is validated and updated to the server when validation passes. Is it possible to catch this update action with a custom javascript code method within which I could further validate and change some of the field values before submission to the server? If so, what does the javascript method look like? Also if so, do I need to maintain a current editor subscription, to keep this javascript function working whenever I add/update a row in the future? Thanks.

rf1234

@pmarks906d
I've seen your other post as well. What you require seems to be requiring custom coding using Data Tables and Editor. My guess would be that standard tools like CloudTables or Airtable won't be flexible enough to do this. Both of your requirements and a lot more can easily be met using Data Tables and Editor.

I wonder what @allan has to say about this

allan

You do actually have access to the Editor events and API in CloudTables, so it is possible to do client-side validation such as is done in this Editor example.

This CloudTable example shows how you can access the Editor API (and also in that way add event listeners).

However, it would be better to do the validation server-side if possible (since client-side validation can always be bypassed). What is the validation that you need to do?

Thanks,
Allan

pmarks906d

In my data table I have 3 columns of interest, which hold an image, a url, and a filename. The user will get the url of the image, and paste it into the URL column, where it must be unique. The filename must become the filename part of the url, which also must be unique. When I hit the submit button I will need to make sure the filename and URL are correct and found to be unique before they are submitted to the server. Thanks

allan

CloudTables has a unique validator that you could use. On the "Data" page, click the data point in question and then in the inspector on the right find the "Validation" section. Click __Add a new validation rule_ and then select Must be unique.

Regards,
Allan

pmarks906d

Actually at present I have the columns set up with some of the server-side validations such as being unique, matching regular expressions, and being a valid url. These validations work great and will be kept, but I just need to do more than the cloudtable validations will give me, since I need to be able to compare/adjust the filename and url columns.

pmarks906d

The "editor=e.editor; ..." code looks like what I need. Do I need to maintain a current editor subscription as long as my website uses these editor features? When I purchase an editor does it apply to my whole site no matter what or how many customers are using the page with the cloudtable?

pmarks906d

From the above referenced example, I think I might be able to use something like the following to fill out the filename field before the update form comes up, and then hit update to submit the form. then if the filename is still unique, the form will submit. and if the filename field is not unique the form will not submit and give me an indication. at the moment when I hit update using a simplified example where the filename is hardcoded to "bill.jpeg" the update hangs and doesn't submit, but i can cancel out. Maybe i need to buy an editor first? Or am i doing something wrong?

document.addEventListener('ct-ready', function(e) {
     var editor = e.editor;
     editor.dependent('urlNameColumn', function (val) {
          let filename = ... // extract file name from val
          editor.field('fileNameColumn').set(filename);
         callback(true);
      });
 });

pmarks906d

note that the link to the page on my website is https://philipmarksart.com/pjonly/

allan

Do I need to maintain a current editor subscription as long as my website uses these editor features?

No. CloudTables makes use of Editor, and exposes the API / events so you can perform exactly this sort of interaction that CloudTables does not offer via the UI.

The reason the dependent() function isn't working at the moment is that it throws an error on callback(true) since callback is not defined.

If you update it to be:

      editor.dependent('dp-15', function (val, data, callback) {
          let filename = "bill.jpg" // extract file name from val
          editor.field('dp-1').set(filename);
          callback({});
      });

Then it should work.

Allan

rf1234

@allan, that's pretty cool. Wasn't aware that you can use the entire Editor api with cloud tables. Makes it a lot more flexible!

allan

Thanks. I wanted to keep it flexible.

The only thing is that it would be so easy to break the automatically generated setup - or if I were to change the generated setup then external code might need to be updated. It's just something to be aware if using the Editor API in CloudTables.

Allan

pmarks906d

This works great thanks Allan