Contact us
Getting started
Using Awesome Table
Use your template
Insert in your website
To go further
Our add-ons
Troubleshooting
Data Security & Policy

Conditional display

Avatar
Awesome Table
Updated
Follow

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> 
<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 
}

 

 

Copy this template

 

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}}'> 
<img class="noProfilePicture" src="yourDefaultLinkPicture"> 
<p>{{Name}} - {{Job}}</p>

CSS Style:

  
.noProfilePicture{ 
display:none 
} 
.profilePicture[src=""] { 
display: none; 
} 
.profilePicture[src=""]:empty + .noProfilePicture{ 
display: block; 
}
 

Copy this template

 

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 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">
  <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
}

 

 

Copy this template

 

Comments

17 comments

Sort by Date Votes
  • Avatar
    Michael Pietschmann

    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?

    1
    Permalink
  • Avatar
    Awesome Table

    Hi Michael Pietschmann,

    Would it be possible for you to share your Awesome Table view and your spreadsheet at

    "support@awesome-table.com"? 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

    0
    Permalink
  • Avatar
    Ryan Harwood

    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

    0
    Permalink
  • Avatar
    Awesome Table

    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

    0
    Permalink
  • Avatar
    Charlie Debley

    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

    0
    Permalink
  • Avatar
    Awesome Table

    Hi Charlie Debley,

    It would be great if you could share your Awesome Table view and your spreadsheet at "support@awesome-table.com". 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

    0
    Permalink
  • Avatar
    Raffaele Paparella

    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

     

    0
    Permalink
  • Avatar
    Awesome Table

    Hi Raffaele Paparella,

    What you can do is share your spreadsheet and your Awesome Table view at "support@awesome-table.com" 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

    0
    Permalink
  • Avatar
    Raffaele Paparella (Edited )

    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

    0
    Permalink
  • Avatar
    Awesome Table

    Hi Raffaele Paparella,

    Could you also share your Awesome Table view? But please share them with us at "support@awesome-table.com". It's easier to communicate with the email support.

    Thanks in advance.

    Thomas

    0
    Permalink
  • Avatar
    Raffaele Paparella

    Done. Thanks, Thomas

    0
    Permalink
  • Avatar
    Raffaele Paparella

    Hi Thomas,

    I want to clarify that what I do has no commercial purposes but only social, culturale (NO PROFIT).

    Thank You

    0
    Permalink
  • Avatar
    Awesome Table (Edited )

    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

    1
    Permalink
  • Avatar
    Raffaele Paparella

    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

    0
    Permalink
  • Avatar
    Awesome Table (Edited )

    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

    1
    Permalink
  • Avatar
    Germán Bobadilla

    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

    0
    Permalink
  • Avatar
    Awesome Table

    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

    0
    Permalink

Please sign in to leave a comment.

Articles in this section

Help us improve this documentation! Was this article helpful?
12 out of 13 found this helpful