Skip to main content

Displaying Tasks

Overview

The following example demonstrates how tasks can be displayed in a custom template

ARRAY ACCESS

This example assumes the tasks array has been supplied to the before rendering template. This example will not work without being used in a custom NotePlan plugin

Custom NotePlan Plugin using Tasks Template

export async function templatingTasks(): Promise<void> {
try {
const custom = {
tasks: [
{ name: 'Item 1', completed: true },
{ name: 'Item 2', completed: false },
{ name: 'Item 3', completed: true },
{ name: 'Item 4', completed: false },
{ name: 'Item 5', completed: true },
],
}

const result = await NPTemplating.renderTemplate('Test (Tasks)', custom)

Editor.insertTextAtCursor(result)
} catch (error) {
console.log('templatingTasks', error)
}
}

Tasks Template

Template Name: Test (Tasks)

All Tasks [<%- tasks.length %>]:
<% tasks.forEach((task) => {
%><%- task.completed ? `- [x] ${task.name}\n` : `- [ ] ${task.name}\n` %><%});%>

Closed Items [<%- tasks.filter(task => {return task.completed}).length %>]:
<% tasks.forEach((task) => {
%><%- task.completed ? `- [x] ${task.name}\n` : '' %><%});%>

Open Items [<%- tasks.filter(task => {return !task.completed}).length %>]:
<% tasks.forEach((task) => {
%><%- task.completed ? '' : `- [ ] ${task.name}\n` %><%});%>

Rendered Output

When rendered, the template will produce the following

All Tasks [5]:
- [x] Item 1
- [ ] Item 2
- [x] Item 3
- [ ] Item 4
- [x] Item 5


Closed Items [3]:
- [x] Item 1
- [x] Item 3
- [x] Item 5


Open Items [2]:
- [ ] Item 2
- [ ] Item 4