I want to set up a way for small number of users (I have data for 10 and I doubt it will ever exceed 100) to upload information about old houses they are restoring. It is currently a Google Form which links to Google Sheets.
Currently the sheet only has one record/row, but I have data to enter another 9 rows. I'm just trying find a plugin that can help me display the data from a row "vertically" down a page in WordPress. There are 30 columns in the sheet - most users will be leaving some fields empty and these should not display.
I then want to be able to bring in the data to Wordpress such that all I have to do is "call" the first two columns on any row (the uploader's name, or it could be done from the row number?) and the plugin will use this information as a title, then it will find every other completed field and display its column title (which is the information requested) followed by the field for that row in that column, then on to the next column title?
So only data from one row/one user is displayed on each page.
The data displayed is the column title and field contents for that user.
Then a new line is started on the page for the next column title and field contents. And so on.
(Each user gets a separate page on the website.)
However, some of the fields are photos that the users upload which are stored in GDrive. I'm not sure this will work/what I need to do? Or will the result be very slow to load?
I will do my best to try to advise you on all these points of the use-case, it is just that I am not sure if we fully understood how everything should come together.
First point, we don't have any native integration with the Google Forms - but we have the built in feature to link tables with Google Sheets. So, if I make a copy of this Google Sheet you made, and publish it to web, then set 'share' to 'anyone with the link can view' - Now I can make a new linked Table on our Demo Site; And it works - It will load all the columns. Since there is a large number of columns - I set a horizontal scroll, to be able to see all of them and scroll through :
Or, we can 'Limit table width to Page width" in the table display settings and get 'word wrap' optionally. If we activate this table width limit, it would ugly, as there are 30 columns. There can be ways to only show a few columns - and initially hide others, then you can reveal other fields when a user selects a specific row, more on that later on.
2. Now, this part is where we are struggling to visualise everything you described :
I then want to be able to bring in the data to Wordpress such that all I have to do is "call" the first two columns on any row (the uploader's name, or it could be done from the row number?) and the plugin will use this information as a title, then it will find every other completed field and display its column title (which is the information requested) followed by the field for that row in that column, then on to the next column title?
If you wish to have a table linked from the Google Sheet and show a custom layout like that in the table itself, we don't have any built-in way to achieve it exactly like that.
Alternate ways could be :
If you wish to try our Responsiveness feature and set it for Desktops. This way, you can have the initial two columns showing - then a user has to click into the row or on the + icon to expand more details about the row.
Then, the columns you choose, which are initially hidden - are going to expand and it vertically shows like this :
Column header name 1 : cell value Header 2 : Value Header 3 :Value etc...
Here is how you can enable Responsiveness on Desktop view :
You can enable Responsiveness in the table, and choose which columns will be hidden from the front-end on tablet devices.
Then, you can go to wpDataTables settings, and change the tablet's width to a bigger value (2000 for example).
When you do this, the plugin will consider all screens below 2000px as tablets, and hide the selected columns which would be available on click.
A "+" sign will appear in the first column, so when you click on it the data hidden will be displayed.
You can optionally change the 'action' on which the rows expand, if you wish it to be on the + icon, or on cell or on row.
-Another way how you can make large tables look nice - when you have a large number of columns is our Master-Details add-on.
It can be used if you wish to first present an initial table with less data/ less columns;
then if a user makes an action you set up, it can load "more details" only for the selected row
(1. If the “Row click” is selected, users will be able to access details for a row by clicking on it.
2. If the “Button click” is selected, a new column will be added to the table, where each row would get a button opening the details for it.)
You an also set up in which way you wish the details to load;
1. It can be as a Pop Up to reveal more columns of that row
2. A template Post with placeholders
3. Or a template custom Wordpress Page with placeholders to load data for more columns of that row.
You can test Master Detail Add-on features on this sandbox site before purchase.
Let me know how that seems,or if you need something different entirely for your use-case.
3. Rendering images in table cells : - If I try to visit any link for an image - It does not load, since the images are stored on Google Drive and they have restricted access. For example, this image at link https://drive.google.com/open?id=1ka8emobcLxMcuEvY7UQri8ClZPOBITnw
Do you need our table to load that kind of data as an actual image? If so - It can not work like that. Our Plugin can only render HTML images.
There can be two ways to render images in our Plugin : 1. If you use an Image column type, then it needs to contain the direct URL path to an image, ending with the image file type extension such as "https:www.someSite/someFolder/yourImage.bmp"
“Image” link columns are used to render images in the table, either in full size, or as a link from a thumbnail to a full size image.
Rendering rules: If the content of the cells contains a combination of “two sticks” – || – everything to the left of this combination is used as a link to the thumbnail, and everything to the right as a link to the full image size: http://domain.com/thumb.png||http://domain.com/fullsize.png If the “||” combination is not found in the content, the entire content will be used as a link to a full-size image.
Sorting rules: alphabetical.
Applicable filter types: text.
Editor input type: One-line edit, Attachment
Issues to note:
Sometimes some issues may appear when you’re sorting on image columns, since it’s done alphabetically, and alphabetic sorting of HTML typically doesn’t make sense.
Please note that the plugin does not create thumbnails (at least for the moment), so you will need to take care of this yourself.
If you would like to open full-size images in lightbox, you can use a plugin for that, e.g. WP Lightbox 2 (please note that this is available for tables that aren’t editable)
2. Or, if you use a String column type, in this case you would need to write the full HTML with image tag wrapped around your image URL in each cell. Or you can use our Transform Value - if you store one column with just the image URL - then you can add the custom HTML img tag as custom dynamic link.
I hope this helps as an introduction to some of our main capabilities which are relevant to your use-case.
And I just wanted to point out that you can try out the full features of the premium wpDataTables
on our sandbox Demo sites ( you can find links for the main plugin Demo,
as well as add-on Demos, in my signature),
and there is a 15-day money-back guarantee period,
so if you purchase the plugin, you can safely fully test it out, and if it doesn't fit your needs you can request and receive a refund in that period. ( same goes for all plugins and add-ons)
Perhaps the word I should have used to make it clearer is "transpose".
So we have a google sheets row which is one record.
I want to turn that record into a web page that's like a column but which also includes the column names. Maybe this is what you mean when you mention "string column type"?
So if we have for example in the sheets link I sent, for row 1, let's say I'd like to display columns C,D,H,I,J
That would be (in the web page, with the column headings)
=======
Townland where house located: Reagrove
County where house located: Cork
Brief description and current usage: Two-storey, seven-room farmhouse, inhabited
What year (roughly) do you think it was built?: 1820
Type of house: Detached
======
.... and so on.
Then for the next row of data, a different web page
Is that basic task possible with WPDataTables please?
I want to set up a way for small number of users (I have data for 10 and I doubt it will ever exceed 100) to upload information about old houses they are restoring. It is currently a Google Form which links to Google Sheets.
Currently the sheet only has one record/row, but I have data to enter another 9 rows. I'm just trying find a plugin that can help me display the data from a row "vertically" down a page in WordPress. There are 30 columns in the sheet - most users will be leaving some fields empty and these should not display.
I then want to be able to bring in the data to Wordpress such that all I have to do is "call" the first two columns on any row (the uploader's name, or it could be done from the row number?) and the plugin will use this information as a title, then it will find every other completed field and display its column title (which is the information requested) followed by the field for that row in that column, then on to the next column title?
So only data from one row/one user is displayed on each page.
The data displayed is the column title and field contents for that user.
Then a new line is started on the page for the next column title and field contents. And so on.
(Each user gets a separate page on the website.)
However, some of the fields are photos that the users upload which are stored in GDrive. I'm not sure this will work/what I need to do? Or will the result be very slow to load?
So I'm attaching a screenshot from the "photos" part of the Google sheet and here is a link to the sheet: https://docs.google.com/spreadsheets/d/15pTzUtVHp9ceInjLoKIpcVSE9wb2s2PYzfmVYlr6OBM/edit?usp=sharing
It may have some more data rows by the time you get to this ticket...
Thank you for your advice.
Imogen
Hi Imogen,
I will do my best to try to advise you on all these points of the use-case, it is just that I am not sure if we fully understood how everything should come together.
So, if I make a copy of this Google Sheet you made, and publish it to web, then set 'share' to 'anyone with the link can view' - Now I can make a new linked Table on our Demo Site;
And it works - It will load all the columns.
Since there is a large number of columns - I set a horizontal scroll, to be able to see all of them and scroll through :
Or, we can 'Limit table width to Page width" in the table display settings and get 'word wrap' optionally.
If we activate this table width limit, it would ugly, as there are 30 columns.
There can be ways to only show a few columns - and initially hide others, then you can reveal other fields when a user selects a specific row, more on that later on.
2. Now, this part is where we are struggling to visualise everything you described :
I then want to be able to bring in the data to Wordpress such that all I have to do is "call" the first two columns on any row (the uploader's name, or it could be done from the row number?) and the plugin will use this information as a title, then it will find every other completed field and display its column title (which is the information requested) followed by the field for that row in that column, then on to the next column title?
If you wish to have a table linked from the Google Sheet and show a custom layout like that in the table itself, we don't have any built-in way to achieve it exactly like that.
Alternate ways could be :
If you wish to try our Responsiveness feature and set it for Desktops.
This way, you can have the initial two columns showing - then a user has to click into the row or on the + icon to expand more details about the row.
Then, the columns you choose, which are initially hidden - are going to expand and it vertically shows like this :
Column header name 1 : cell value
Header 2 : Value
Header 3 :Value
etc...
Here is how you can enable Responsiveness on Desktop view :
You can enable Responsiveness in the table, and choose which columns will be hidden from the front-end on tablet devices.
Then, you can go to wpDataTables settings, and change the tablet's width to a bigger value (2000 for example).
When you do this, the plugin will consider all screens below 2000px as tablets, and hide the selected columns which would be available on click.
A "+" sign will appear in the first column, so when you click on it the data hidden will be displayed.
You can optionally change the 'action' on which the rows expand, if you wish it to be on the + icon, or on cell or on row.
-Another way how you can make large tables look nice - when you have a large number of columns is our Master-Details add-on.
It can be used if you wish to first present an initial table with less data/ less columns;
then if a user makes an action you set up, it can load "more details" only for the selected row
(1. If the “Row click” is selected, users will be able to access details for a row by clicking on it.
2. If the “Button click” is selected, a new column will be added to the table, where each row would get a button opening the details for it.)
You an also set up in which way you wish the details to load;
1. It can be as a Pop Up to reveal more columns of that row
2. A template Post with placeholders
3. Or a template custom Wordpress Page with placeholders to load data for more columns of that row.
Please check more about Master Details here, with an example.
You can test Master Detail Add-on features on this sandbox site before purchase.
Let me know how that seems,or if you need something different entirely for your use-case.
3. Rendering images in table cells :
- If I try to visit any link for an image - It does not load, since the images are stored on Google Drive and they have restricted access.
For example, this image at link https://drive.google.com/open?id=1ka8emobcLxMcuEvY7UQri8ClZPOBITnw
Do you need our table to load that kind of data as an actual image?
If so - It can not work like that. Our Plugin can only render HTML images.
There can be two ways to render images in our Plugin :
1. If you use an Image column type, then it needs to contain the direct URL path to an image, ending with the image file type extension such as "https:www.someSite/someFolder/yourImage.bmp"
As per this Documentation :
“Image” link columns are used to render images in the table, either in full size, or as a link from a thumbnail to a full size image.
http://domain.com/thumb.png||http://domain.com/fullsize.png
If the “||” combination is not found in the content, the entire content will be used as a link to a full-size image.
2. Or, if you use a String column type, in this case you would need to write the full HTML with image tag wrapped around your image URL in each cell.
Or you can use our Transform Value - if you store one column with just the image URL - then you can add the custom HTML img tag as custom dynamic link.
I hope this helps as an introduction to some of our main capabilities which are relevant to your use-case.
And I just wanted to point out that you can try out the full features of the premium wpDataTables
on our sandbox Demo sites ( you can find links for the main plugin Demo,
as well as add-on Demos, in my signature),
and there is a 15-day money-back guarantee period,
so if you purchase the plugin, you can safely fully test it out, and if it doesn't fit your needs you can request and receive a refund in that period. ( same goes for all plugins and add-ons)
Let me know if you have any additional questions.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Perhaps the word I should have used to make it clearer is "transpose".
So we have a google sheets row which is one record.
I want to turn that record into a web page that's like a column but which also includes the column names. Maybe this is what you mean when you mention "string column type"?
So if we have for example in the sheets link I sent, for row 1, let's say I'd like to display columns C,D,H,I,J
That would be (in the web page, with the column headings)
=======
Townland where house located: Reagrove
County where house located: Cork
Brief description and current usage: Two-storey, seven-room farmhouse, inhabited
What year (roughly) do you think it was built?: 1820
Type of house: Detached
======
.... and so on.
Then for the next row of data, a different web page
Is that basic task possible with WPDataTables please?