To-Do List

<script type="text/javascript">jQuery('#to-do-list').tablesorter();</script>

WordPress Page Content:

View Settings

Use Entries from Form: Demo: To-do List - Add an Item
View Format: Both (Dynamic)
Detail Link: Parameter Name: todo — Parameter Value: id

Before Content:

<style type="text/css">.red_x a {color:red;} .red_x {color:green;} .green_check a {color:green;} .green_check {color:red;}</style>
<div style="margin:20px 0;"><a href="/demos/to-do-list/add-an-item/" class="button slim" rel="nofollow">Add an Item</a></div>
<table id="to-do-list" style="width:100%; text-align:left;border-collapse:collapse;">
<thead>
<tr style="border-bottom: solid 1px #E3E3E3;text-transform:uppercase;">
<th style="padding:9px 10px 9px 0px;line-height: 1.5625;">Status</th>
<th>Item Name</th>
<th>Due Date</th>
<th>Priority</th>
<th>Details</th>
</tr>
</thead>
<tbody>

Content:

<tr style="border-bottom: solid 1px #E3E3E3">
<td style="padding:9px 10px 9px 0px;">[if to-do-status equals="Pending"]<div class="red_x">[frm-entry-update-field id=[id] field_id=to-do-status value="Complete" label="✗" message="✔"]</div>[/if to-do-status]
[if to-do-status equals="Complete"]<div class="green_check">[frm-entry-update-field id=[id] field_id=to-do-status value="Pending" label="✔" message="✗"]</div>[/if to-do-status]</td>
<td>[to-do-name]</td>
<td>[to-do-date][if to-do-date less_than="NOW"][if to-do-status equals="Pending"]<span style="margin-left:8px;"><img src="https://png-5.findicons.com/files/icons/2141/web_design_creatives/128/wall_clock.png" style="width:20px;"/></span>[/if to-do-status][/if to-do-date]</td>
<td>[to-do-priority]</td>
<td>[if to-do-notes]<a href="[detaillink]/" rel="nofollow">Item Details</a>[/if to-do-notes]</td>
</tr>

After Content:

</tbody></table>
<script type="text/javascript" src="/wp-content/themes/formidablepro-gen2/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript">jQuery('#to-do-list').tablesorter();</script>

Dynamic Content:

<h3>[to-do-name]</h3>
[to-do-priority show="field_label"]: [to-do-priority]
[to-do-date show="field_label"]: [to-do-date]
[to-do-status show="field_label"]: [to-do-status][if to-do-status equals="Pending"][frm-entry-update-field id=[id] field_id=to-do-status value="Complete" label=" - Mark as Complete"][/if to-do-status]

<h3>[to-do-notes show="field_label"]</h3>[to-do-notes]


<div style="margin-top:20px;float:left;"><a class="button-primary" href="/demos/to-do-list/">Back to All Orders</a></div>

<div style="margin:20px 0;float:right;"><a href="/demos/to-do-list/add-an-item/" class="button-primary">Add a To-Do Item</a></div>

Order: Due Date — descending
Page Size: 10