Custom CSS & Javascript: All About Tasks!
Newsletter Q2 2023
August 17, 2023
FAQ – Hidden Features: Part 2
August 29, 2023Never miss a thing!
Did you know that we recently added universal tags to your system specifically for tasks? What better way to eliminate wasted time than to display your employee tasks in commonly seen areas like production and documents?
In this article we will show you a few examples of how to add the code for tasks. Let's get started!
In this article we will show you a few examples of how to add the code for tasks. Let's get started!
Display tasks in production
To display tasks in production, we need to edit our production views to accommodate for the extra data.
Keep in mind that we use the Bootstrap HTML framework for production views and in Bootstrap, a full row (width of 100%) equals twelve columns. In this example, our tasks need five columns of space so be sure to alter your other columns so that that total of all columns is still twelve.
Once you are ready to add in your tasks, simply copy the code below and paste it before the closing div in your production view:
<!--{{#if Tasks}}-->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th colspan="2">Assigned To</th>
<th>Task</th>
<th class="text-right">Due</th>
</tr>
</thead>
<tbody>
<!--{{#each Tasks}}-->
<tr style="{{#if Completed}}opacity:.5;{{/if}}">
<td>
<!--{{#if Completed}}--><i class="fas fa-check-square fa-2x" style="color:green"></i>
<!--{{else}}--><i class="far fa-square fa-2x" style="color:#777"></i>
<!--{{/if}}-->
</td>
<td>
<span class="fa-stack" data-toggle="tooltip" data-placement="top" title="{{{AssignedToEmployee.Name}}}" data-container="body"><i class="fa fa-square fa-stack-2x color-blue1"></i><i class="fa fa-stack-1x fa-inverse">{{AssignedToEmployee.Initials}}</i> </span>
</td>
<td>{{Details}}</td>
<td class="text-right">
<!--{{#if Completed}}-->
<!--{{else}}--><span {{#if (isSameOrAfter (moment Today) DueDate)}} style="color: red;font-weight:bold;" {{/if}}>{{dateFormat DueDate format="DD/MM/YY"}}</span>
<!--{{/if}}-->
</td>
</tr>
<!--{{/each}}-->
</tbody>
</table>
<!--{{/if}}-->
That's all there is to it! The tasks for each item will now show visible on the item when viewed on that production queue.
Only show outstanding tasks
It can be helpful to see which tasks have already been completed but if they are taking up too much of your valuable production space, we can alter the code to only show the tasks yet-to-be-done.
All you need to do is swap out the code with the following:
<!--{{#if Tasks}}-->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th colspan="2">Assigned To</th>
<th>Task</th>
<th class="text-right">Due</th>
</tr>
</thead>
<tbody>
<!--{{#each Tasks}}-->
<!--{{#unless Completed}}-->
<tr style="{{#if Completed}}opacity:.5;{{/if}}">
<td>
<!--{{#if Completed}}--><i class="fas fa-check-square fa-2x" style="color:green"></i>
<!--{{else}}--><i class="far fa-square fa-2x" style="color:#777"></i>
<!--{{/if}}-->
</td>
<td>
<span class="fa-stack" data-toggle="tooltip" data-placement="top" title="{{{AssignedToEmployee.Name}}}" data-container="body"><i class="fa fa-square fa-stack-2x color-blue1"></i><i class="fa fa-stack-1x fa-inverse">{{AssignedToEmployee.Initials}}</i> </span>
</td>
<td>{{Details}}</td>
<td class="text-right">
<!--{{#if Completed}}-->
<!--{{else}}--><span {{#if (isSameOrAfter (moment Today) DueDate)}} style="color: red;font-weight:bold;" {{/if}}>{{dateFormat DueDate format="DD/MM/YY"}}</span>
<!--{{/if}}-->
</td>
</tr>
<!--{{/unless}}-->
<!--{{/each}}-->
</tbody>
</table>
<!--{{/if}}-->
Tasks on workorders
Another great spot to add tasks is on workorders. If you are physically passing a workorder through production, employees can manually check off their tasks as they get completed.
This example shows Tasks added to our workorder document "Work Order - Multiple Items (Detailed)" available on the template library.
To add the tasks to this document, copy the code below and paste them into the document's table for item details. We added it below the rows for department items but you can add it wherever you'd like.
<!--{{#if Tasks}}-->
<tr>
<td class="label dept-items-label" style="width:18% !important;">TASKS:</td>
<td class="label" colspan="2">Details</td>
<td class="label" colspan="2">Assigned To</td>
<td class="label text-right">Due </td>
</tr>
<!--{{#each Tasks}}-->
<tr>
<td class="label" style="width:18% !important;">
<!--{{#if Completed}}--><input type="checkbox" checked>
<!--{{else}}--><input type="checkbox">
<!--{{/if}}-->
</td>
<td class="value" colspan="2">{{Details}}
</td>
<td class="value" colspan="2">{{{AssignedToEmployee.Name}}}</td>
<td class="value text-right">
<!--{{#if Completed}}-->
<!--{{else}}--><span {{#if (isSameOrAfter (moment Today) DueDate)}} style="color: red;font-weight:bold;" {{/if}}>{{dateFormat DueDate format="DD/MM/YY"}}</span>
<!--{{/if}}-->
</td>
</tr>
<!--{{/each}}-->
<!--{{/if}}-->
All done! Now when you generate your workorder documents, any tasks for the item will show.
If you have any ideas for portal customizations you'd like to see us tackle or need help implementing any of this code, email our support team at support@docketmanager.ca
