Templates are helpful in displaying your data. But if your template requires rules to be applied to specific CSS selectors, using Conditional Display is the best approach for this.
There are many applications for this method. To maintain brevity & simplicity, we will only cover three useful examples.
1 - Display element B if element A is empty
In this example, we have a table view displaying student information. Some have grades, and some don't. We would like to display "No grades yet" when necessary.
HTML template:
<h2>{{Name}}</h2>
|
CSS Style:
.grades_container{
|
2 - Display element B if element A's attribute is empty
In this example, we have a table view of team members. Some of them have profile photos while some don't. We need to customize the template so that it won't display a broken image when someone's {{photo}} column is empty - and instead display a generic avatar.
HTML template:
<img class="profilePicture" src='{{Picture}}'>
|
CSS Style:
.noProfilePicture{
|
With this code, we keep a default image hidden with display:none; and we hide this image and display the default one if the src of profilePicture is empty.
3 - Display and style elements depending on their value
This tip was shared by our user, Randolph Abelardo, in this post.
In this example, we will create a conditional template that will display a different content depending on the referenced-value of a {{marker}}. We are going to create a simple to do list: the task can either have 'done', 'postponed' or 'to do' as its status. Tasks that are done will also display a completion date.
HTML template:
<div class="taskContainer">
|
CSS Style:
.status[data-status="postponed"]:after {
|
Comments
17 comments
I have setup "3 - Display and style elements depending on their value" for a table, and it works great to style whether a value is "Satisfactory" (green) or not (red), but when the user exports the to CSV, this column is blank, anyway to fix this?
Hi Michael Pietschmann,
Would it be possible for you to share your Awesome Table view and your spreadsheet at
"[email protected]"? Make sure you give us access to your spreadsheet. If you have sensitive data, you can make a copy with similar data.
Thank you.
Thomas
Can this be used in a table format as well? I'm using this sheet and only want information for each row in the "Link" column to display if there is an actual link in the Tweet. I'd like the cell to be blank or contain "N/A" when the message "http://ifttt.com/missing_link?1518163033" is displayed due to the tweet not containing an external link.
Thanks
Ryan
Hi Ryan Harwood,
Indeed, it is definitively possible to do that with conditional display in Awesome Table. You can use conditional display with any type of view.
Kind regards,
Thomas
Hi Awesome Table.
I am pretty new at this so far but I am learning as I go on. I have a Google Form which has questions dependant on previous answers which means that depending on the answer there can be non relevant fields depending on the category selected. So I would like certain columns to be hidden depending on the category selected on a certain column. is this at all possible?
Thanks
Charlie
Hi Charlie Debley,
It would be great if you could share your Awesome Table view and your spreadsheet at "[email protected]". Make sure you give us access to your data.
If you have sensitive data, you can make a copy with similar data. In this way, I will be able to know if your request is possible.
Thanks in advance.
Thomas
Hi Ryan Harwood,
how did you do? I can not do it.
I have also seen the example on the documentation but it does not work well.
tk
Hi Raffaele Paparella,
What you can do is share your spreadsheet and your Awesome Table view at "[email protected]" and explain in details what you want to achieve.
If you have sensitive data, you can make a copy with similar data. Just make sure to give us access to your data.
Thanks in advance.
Thomas
Thank you Thomas for answering me.
This is my problem.
I would like "Display element B if element A is not empty!
In the example: if "Document ID" is present (Col. S), display "Document Link" (Col. R).
Link sheet: https://docs.google.com/spreadsheets/d/1VpSih2NQcVVfFWCYoga9ZgIOA4Cj9K0kS_6g6fS0_Wo/edit#gid=0
Thank you very much for your help
Hi Raffaele Paparella,
Could you also share your Awesome Table view? But please share them with us at "[email protected]". It's easier to communicate with the email support.
Thanks in advance.
Thomas
Done. Thanks, Thomas
Hi Thomas,
I want to clarify that what I do has no commercial purposes but only social, culturale (NO PROFIT).
Thank You
Hi Raffaele Paparella,
No problem!The email support is for everyone.
It doesn't matter if you have a paid use or not.
Kind regards,
Thomas
Great Thomas,
I would like to publicly thank Thomas for his professionalism and willingness to solve my problem.
I could not find the solution.
The solution is clean and works as I wanted.
Thank you for all the time you have dedicated to me.
I learned something new
raffaele
Hi Raffaele Paparella,
Thank you for your kind message!
I'm glad you resolved your issue and you like our product. It's a satisfaction for us!
And we are also very happy that you are satisfied with Awesome Table support.
Kind regards,
Thomas
Can I display information if the user enters an exact ID (number)? I'm asking this because every time my students type their ID, when they are typing the fourth number, if it matches the same as another student, it shows that student's grade, until he/she continues to the fifth number.
I'm looking for a a way in which just after they have typed (7 digits) can only the results be displayed.
https://sites.google.com/view/germanbobadilla/advanced-1/sha-101-01
Hi Germán Bobadilla,
Unfortunately, it is not possible yet to display the results only if you are typing 7 numbers in the filter. It's the default behavior of the StringFilter.
Kind regards,
Thomas