Highlighting entries about to expire "today"

GravityKit released a new add-on called Gravity Forms Entry Tags that helps you achieve the same as what is described in this article but in a very easy way. Read more about this new add-on.

Occasionally, you want to add a visual indicator to your View results to bring attention to an entry where the action is needed or its expiration time is due "today".

Here's how to achieve that using the [gvlogic] shortcode and a Custom Content field.

In this tutorial, we will use a very simple form containing just two fields: a Task Description field which is a Single Line Text, and a Task Due Date which is a Date type field. 

This is what our initial View looks like:

Screenshot showing the To Do View

Let's add a Custom Content field to our View and write three [gvlogic] shortcode statements inside:

Screenshot showing the Custom Content field with the gvlogic statements inside

Here's the code:

[gvlogic if="{Task Due Date:3:mdy}" less_than="{date_mdy}"]

<span class="gk-task gk-task-expired">Expired</span>


[gvlogic if="{Task Due Date:3:mdy}" is="{date_mdy}"]

<span class="gk-task gk-task-expiring-soon">Expiring Soon</span>


[gvlogic if="{Task Due Date:3:mdy}" greater_than="{date_mdy}"]

<span class="gk-task gk-task-on-time">On Time</span>


Notice that we added one logic for each of three possible task statuses: Expired, Expiring Soon, and On Time.

The date field Merge Tag {Task Due Date:3} is using the :mdy modifier to modify this date to the MM/DD/YYYY format so it can properly compare against the {date_mdy} Merge Tag, which pulls the current date (today).

It's also possible to compare any date field using GravityView's :timestamp modifier against Gravity Forms' {today:timestamp} Merge Tag.

Example: [gvlogic if="{Task Due Date:3:timestamp}" greater_than="{today:timestamp}"]

The [gvlogic] shortcode does not support relative dates; however, field conditional logic does.

We also used some CSS classes to style each status according to their urgency:


color: white;

padding: 5px 15px;



background-color: red;



background-color: yellow;

color: black;



background-color: green;


Here's our View:

Screenshot of the View with the new Status column

Amazing, right?!

We can also enhance our View by showing Dashicons instead of texts for each status. We just need to replace the CSS classes used and remove the texts:

[gvlogic if="{Task Due Date:3:mdy}" less_than="{date_mdy}"]

<span class="dashicons dashicons-no"></span>


[gvlogic if="{Task Due Date:3:mdy}" is="{date_mdy}"]

<span class="dashicons dashicons-flag"></span>


[gvlogic if="{Task Due Date:3:mdy}" greater_than="{date_mdy}"]

<span class="dashicons dashicons-yes"></span>


And here's the resulting View:

Screenshot showing the View now with Dashicons on the Status column

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us