Create a basic table editor

I'm a bit confused about all the different display elements available in CFv6. I'd like to be able to create a simple form that lists all the rows in a table and permits editing of specific fields in each row, plus one blank row to add new data.

So, I can get the data with a db multi record loader, and I can choose the specific fields. That's easy enough.

What's the best way to then display that data in rows of input boxes, permitting editing of any of the fields? There would be around 20 rows, and 3 columns.

How do I add a blank row at the end to permit adding a new row to the table?

Is it the repeater area or the grid element that does this? Or do I need to create all the input boxes using php and html?

I tried with the repeater area, then added the input boxes in the body section, but could not work out how to get the field values in there from the model.

Is there any documentation on how to use the repeater area (or whatever element I need for this)?

Thanks

Brian

Hi Brian,

The simplest way to show a listing like this is to use ChronoConnectivity which is designed as a lister and includes methods to add editable fields or to load data into a form for editing.

You can do it with ChronoForms using a Custom Code element to build the main table.

Bob

Thanks Bob :-)

However that makes it difficult (tedious) to code the validation on the input boxes. Surely the point of all the drag and drop stuff is for ease of use, but the lack of details on how to actually use some of it makes its use limited.

My DB read data element is called read_data3, and although I created a model in there called classes, I did find out that I need to code the data source in the Repeater Area like this:

{var:read_data3} rather than {classes} (although I tried {var:classes} and various other combinations.

It then loops round all the rows and shows input boxes for each row. However, I don't know how to reference the row data to fill it in the value parameter of the text boxes. Also, all the text boxes in all the rows have the same ID, so there must be a trick to giving them an ID that includes the row number.

My Repeater Area is called area_repeater2

I have database fields in each row that is read from the database. Let us just call them field1, field2 etc for now. I know they are read correctly by use of the debug.

So would I code the value of the input box like: {var:area_repeater2:field1} etc, or {var:area_repeater2:classes.field1} since the model in my Read Data thing is called classes? I've tried all the combinations I can think of and still can't get the data to appear in those text boxes. I don't also know how to reference the row number.

If there's any sample code / tutorial on the Repeater Area that would help greatly. :-)

I will also revisit Chronoconnectivity if time permits, but I found scant documentation on it as regards referencing database rows and fields returned from the DB loader.

I may simply be confused about the required syntax of the {var:} thingy.

Thanks

Brian

Hi Brian,

Inside a repeater you can get the current row using {var:repeater_name.row} and the key using {var:repeater_name.key}

So if the data provider is set to the results of a "data read" action then you need a syntax like the following to get the value of one of the fields:

{var:repeater_name.row.Model_name.field_name}

Best regards,
Max

Thanks Max, that's working nicely now for displaying the values.

When it comes to saving the data (updating the table)... taking into account the repeater is in place, what do I put in the Save Data form?
Specifically : Model name and Data Provider ?

I have "save to database" turned on in the fields and "Auto save" turned on in the Save Data form.

I tried leaving the model blank and using {data:} for the data provider, but just got an error:

An error has occurred
0

And in the webserver logs :

PHP Notice:  Undefined index: name in libraries/cegcore2/admin/extensions/chronofc/functions/save_data/save_data_output.php on line 111

Thanks!
Brian

Hi Brian,

No, the auto save feature will not work for this kind of fields array, you should turn this off in the "save data" action, then drag a "Loop event" function from the Logic section, then drag the "save data" inside the body event of that loop.

Now the loop should run the "Save data" for all the fields array, but your fields should be properly named, what are the names you have setup for your fields ?

Best regards,
Max

Ah ok :-)

I have 3 fields in the repeater. In the Name box in the fields:

class_name{var:area_repeater2.key}

class_year_from{var:area_repeater2.key}

class_year_to{var:area_repeater2.key}

In this case, the key runs from 0 to 22, but I guess area_repeater2 has a field that says how many rows there are?

Or the data loader knows how many rows.

Thanks,

Brian

Hi Brian,

You will need to alter the fields names a bit:

class[{var:area_repeater2.key}][name]

And do the same for the other fields, now set the "data provider" of the loop event to this:

class

The save data should be inside the loop, and the data provider should be set to this; {var:loop_name.row}

Best regards,
Max

Thanks. I don't understand how to make this relate to my data field names. Is [name] the bit I change to my database field name?

For example:

class[{var:area_repeater2.key}][class_name]

class[{var:area_repeater2.key}][class_year_from]

class[{var:area_repeater2.key}][class_year_to]

The actual database field names are class_name, class_year_from and class_year_to

Thanks :-)

Brian

Hi Brian,

Yes, exactly, the goal is to have some field name like this: Model[#][field_name]

Best regards,
Max

In the first repeater field, I added the first entry:

class[{var:area_repeater2.key}][class_name]

And hit Apply. It gave me an error: 1060 Duplicate column name 'class_name'

Hi Brian,

Please disable the auto manage table setting under the "save data" action, you have dynamic fields names here and this may not work as expected.

Best regards,
Max

Thanks. I got past that error. But, now In the submit section, the loop doesn't enter. I think I've set up the loop correctly. The debugger looks like the class array should be working in the loop.

I've attached screenshots. Have I done something wrong? :-)

Thanks

Brian

Hi Brian,

The data provider should be the request data of the class which is {data:class}

Best regards,
Max

When I try
{data:class}

When I click the submit button on my form, I get:

Error: 0
An error has occurred:
0

There is nothing in the server error log. Enabling the Joomla debug showed me this was in the save data php code.

However, I wondered if maybe "class" was something like a reserved word. So I changed it to classData everywhere and that fixed that problem.

I also had to add a hidden field "cf_id" so that the save data had a key to refer to (without that it just added copies of all the rows).

Also, I had manually inserted a first row with a cf_id of 0 in phpmyadmin and so when I saved my table data, it always added a new row at the end of the table which was a copy of the row with cf_id=0, so I had to renumber my table rows so that they started with a cf_id=1. However, now I know how to add a new row! :-)

Thanks for all your help, and maybe this post will help others. :-)