Custom Component using PHP to read CSV?

[logrunner (Jon)]

I have just put together a small elements webpage that has a custom component that uses PHP to read entries from a CSV file and output it into an HTML table. This is based on code partially generated by Cursor.

I can get it work when I publish it to local website running under MAMP, because I can put the CSV in the website root.

When I preview the site, how do I put a file into the preview website root? Is this possible?

I don’t want to put the CSV file in Resources as I want it to be separate from the Elements publishing.

[logrunner (Jon)]

Here is a link to my Elements Project that I thought I would share, that demonstrates accessing data from a CSV file to populate an HTML Custom Component table: Test_7_Seven_PHP_CSV

It only works as a published website. I am using MAMP PRO to test it as it won’t work correctly in preview (as previously mentioned). In addition, because it is using PHP, the WYSIWYG editor can’t display the output although you do get a view of what the Custom HTML Component property options alter:

You can configure the formatting of the table cell entries and any error message. The most important property is the CSV filename in order to select the csv data to display.

This is the folder structure of the locally published project:

You need to create one or more data files that you place in a data directory (see folder structure above). I created empty name_1.csv and name_2.csv files, in order to test a csv file with no content. I then created two more files to contain a list of names as follows, to use on the two web pages:

names_1.csv

John,Smith
Emma,Johnson
Michael,Williams
Sophia,Brown
David,Jones
Olivia,Garcia
James,Miller
Ava,Davis
Robert,Rodriguez
Isabella,Martinez

names_2.csv

Liam,Wilson
Sophia,Clark
Noah,Walker
Olivia,Hall
Ethan,Young
Ava,Allen
Mason,King
Isabella,Wright
William,Scott
Charlotte,Green
James,Baker
Amelia,Nelson
Benjamin,Carter
Mia,Mitchell
Elijah,Perez
Harper,Roberts
Lucas,Turner
Evelyn,Phillips
Henry,Campbell
Abigail,Parker

You can preview the project but you will get a missing file error.

It is fairly basic but gives an idea how you can access CSV data by using a combination of Elements and PHP.

The ouput should look like this:

[dan (Dan C.)]

That is awesome and an excellent proof of concept for others to work from. Love it!

[logrunner (Jon)]

OK, here is the latest now generalised version!

You can download it here: CSV TABLE EXAMPLE

It can work on csv files external to Elements or using csv files stored in Resources of which examples are included. The advantage of using Resources (at least initially) is that you can test in Preview.

The Custom Element is named csvTable.

I have extended the Properties so that you can configure the Separator (default is a comma), Enclosure (default is double quotes) and Escape (default is backslash) for the CSV file.

Additional Properties are available to set options (Text color, Background Color, Border Color, Alignment and Padding) independantly for the Table Header, Table Cells and Error messages (e.g. missing file) for the whole table.

Additionally, you can add items to the alignments Collection to override the alignment for specific columns. In the Mac Models example Price has been overridden to be right aligned.

Note: To change the colours of any of the Properties, you have to select a colour from a different theme colour band and then Elements will take note of it the colour you select.

[logrunner (Jon)]

Here is a preview of the example created Table using Beta 12:

[dan (Dan C.)]

That looks awesome!

I’ve not dug into the project file (yet), but a quick Look at it gave me an error in the Editor and didn’t show the table in preview

[logrunner (Jon)]

Oops

Looks like uploaded it with the filename in the Properties missing an e in mac_models.csv.

Correct that and it should work in preview?

[dan (Dan C.)]

Thanks, that did the trick! Not sure how I didn’t notice the error

And here’s the working table in Preview…