Templates help display 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 app displaying student information. Some have grades, and some don't. We want to show "No grades yet" when necessary.
HTML template:
<h2>{{Name}}</h2>
<p> {{Job}}</p>
<div class="grades_container">
<p>Grades : </p>
<p class="grades">{{Grades}}</p>
<p class="no_grades">No grades yet</p>
</div>
CSS Style:
.grades_container{
background:lightgrey
}
.no_grades{
display:none
}
.grades:empty + .no_grades{
display:block
}
2. Display element B if element A's attribute is empty
In this example, we have a table app 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}}'>
<img class="noProfilePicture" src="yourDefaultLinkPicture">
<p>{{Name}} - {{Job}}</p>
CSS Style:
.noProfilePicture{
display:none
}
.profilePicture[src=""] {
display: none;
}
.profilePicture[src=""]:empty + .noProfilePicture{
display: block;
}
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
In this example, we will create a conditional template that will display different content depending on the referenced-value of a {{marker}}. We will 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">
<strong>{{Task}}</strong>
<p data-status="{{Status}}" class="status"></p>
<p class="date">Done the : {{Done the}}</p>
</div>
CSS Style:
.status[data-status="postponed"]:after {
content : "This task was postponed.";
color : orange
}
.status[data-status="to do"]:after {
content : "This task still has to be done.";
color : blue
}
.status[data-status="done"]:after {
content : "This task is done ! ";
color : green
}
.date {
display : none
}
.status[data-status="done"] + .date {
display : block
}
Comments
14 comments
How would this code look if I want to change formatting using the table formatting. For example, if I wanted to change the value in column B red depending on the corresponding value in column A.
Thanks!
Charlie
Hello Charles,
If you have two columns, "Content" and "Color". You could set up a template on the "Content" column that would look like that:
<p data-color="{{Color}}" class="content">{{Content}}</p>If you need any further assistance, please create a ticket so I can give you more help.
Nicolas
^ Charle's comment. On the Template tab of the spreadsheet, what would the column header be for the code?
I'm trying to make everything in the Content column be bold in the Awesome Table but only certain rows be a color based on the color column and I can not get it to work.
Hi, All the examples here are form the = (equal) condition.
How do I change the color of a cell if the value is less than 0, is this possible?
I need to change color to red if a value in the column "AMOUNT" is less than 0.
Thanks.
Hello Eric,
You would need 3 columns:
In your template sheet create a column with "Template" as the header and the following as the second row:
<p data-color="{{Color}}" class="content">{{Content}}</p>What to keep in mind:
Please let me know if you need further help.
Nicolas
Hello PADC,
This is unfortunately not possible with Awesome Table.
Nicolas
Thanks Nicolas Gauvin.
I found a workaround using:
div[data-content^="-"]{
Thank you.
Hello, a bit of a rookie question but i am not that familiar to CSS coding at all :P
I would like to have a google form with many paths, thus leaving some empty columns (and hiding them from the awesome table) due to each path having other pre-requisites.
-------------
Sheet Example:
- Column A: Has value >> Display
- Column B: Empty >> Do not display
- Column C: Has Value >> Display
Preview Example:
- A: {{column A}}
- C: {{column C}}
-------------
Probably it will have something to do with an IF variable, but i don't have any idea how to implement this. Any help would be appreciated!
Nikolas
Hello Nikolas Voniatis,
I suggest you follow this method using queries.
Just need to consult the #Task 13 and import the method with the relevant column.
Kind regards.
Thomas
This is great. One more question on this. What if I want to change formatting based on date and time? For example, I would make the status change based on if it has passed a specific time?
Thank you.
Hi Creative,
Complexity of settings for this goal would vary on the goal itself.
To give you something to start with, you can have a column with =IF formula that compares a column with dates to your current date (shown on screenshot) and displays cell values based on this comparison. Then this value is being displayed and formatted with help of CSS.
On this screenshot you can see that B3 contains formula IF that checks date from C3 to current date (today). If it is earlier than today, it will display text late. Otherwise, it will display upcoming.
Afterwards, we are making sure that those values are being picked up by our CSS template:
Making sure that those values from the formula are recognised (late, upcoming) and certain color + text being displayed based on what is the value in the cell.
This should give you an idea how to have a simple start with this goal, and if you want more advanced and more statuses for instance, you could use more IF formulas inside of another IF formula.
Hope this helps.
Thanks
AT Team
Thank you. I am testing, but I don't see that it works. Do your tables have AJAX so they would update without needing to be refreshed from the user-side? If I evaluate a cell based on time, I would like that to update my cells automatically. Is this possible? Thank you.
Hi Creative,
At the moment this is not a native feature.
Thanks
Hi - I need to use very simple conditional logic and am having trouble figuring out the best way to do it based on these examples. I have 4 columns in my output google sheet which have the data "yes" or "no" in each cell. I want to show "yes" in red so that it is easy for a user looking at a report to find.
My column headers are quite long because in my google form, I am asking questions such as:
Have you had a temperature of 100.4 or higher in the past 24 hours?
The user is answer the question, "yes" or "no"
If you could help me show all the "yes" answers In red, that would be so helpful. Here is the output of my awesome table: https://awesome-table.com/-MEdYzCv9c8-0iUazYVF/view
Please sign in to leave a comment.