Widget Examples on Timill Platform Documentation

Widget - Simple Item List

Mon, 01 Jan 0001 00:00:00 +0000

Basic item list with filtering by item type.

Example Code#

<div class="bg-white rounded-lg shadow">
 {{$items := queryItems (printf "type='%s'" .itemType)}}
 <h3 class="text-lg font-semibold p-4 border-b">{{.title}} ({{len $items}})</h3>
 
 <div class="divide-y">
 {{range $items}}
 <div class="p-3 hover:bg-gray-50">
 <div class="flex items-center justify-between">
 <span class="font-medium">{{.Title.Get}}</span>
 <span class="text-sm {{statusColor .Status.Get}}">{{.Status.Get}}</span>
 </div>
 </div>
 {{else}}
 <p class="p-4 text-gray-500">No items found</p>
 {{end}}
 </div>
</div>

Parameters#

Parameter	Type	Default	Description
`itemType`	string	`"task"`	Item type to filter by
`title`	string	`"Items"`	Widget title

Customization#

Change the item type:

Widget - Status Dashboard

Mon, 01 Jan 0001 00:00:00 +0000

Count items by status and display in a grid.

Example Code#

<div class="grid grid-cols-4 gap-4">
 {{$items := queryItems "type = 'task'"}}
 {{$open := filter $items "status = 'open'"}}
 {{$progress := filter $items "status = 'in-progress'"}}
 {{$review := filter $items "status = 'review'"}}
 {{$done := filter $items "status = 'done'"}}
 
 <div class="bg-blue-100 p-4 rounded text-center">
 <div class="text-2xl font-bold">{{len $open}}</div>
 <div class="text-sm">Open</div>
 </div>
 
 <div class="bg-yellow-100 p-4 rounded text-center">
 <div class="text-2xl font-bold">{{len $progress}}</div>
 <div class="text-sm">In Progress</div>
 </div>
 
 <div class="bg-purple-100 p-4 rounded text-center">
 <div class="text-2xl font-bold">{{len $review}}</div>
 <div class="text-sm">Review</div>
 </div>
 
 <div class="bg-green-100 p-4 rounded text-center">
 <div class="text-2xl font-bold">{{len $done}}</div>
 <div class="text-sm">Done</div>
 </div>
</div>

Customization#

Add more status columns:

Widget - Recent Activity

Mon, 01 Jan 0001 00:00:00 +0000

Display the 5 most recently updated items.

Example Code#

<div class="bg-white rounded-lg shadow">
 {{$items := queryItems "type = 'task'"}}
 {{$recent := sort $items "updatedAt" "desc" | first 5}}
 
 <h3 class="text-lg font-semibold p-4 border-b">Recent Activity</h3>
 
 <div class="divide-y">
 {{range $recent}}
 <div class="p-3">
 <div class="flex items-center space-x-2">
 <span class="font-medium">{{.Title.Get}}</span>
 <span class="text-xs text-gray-500">{{.UpdatedAt.Get | formatDate}}</span>
 </div>
 <div class="text-sm text-gray-600">{{.Description.GetHTML | truncate 100}}</div>
 </div>
 {{else}}
 <p class="p-4 text-gray-500">No recent activity</p>
 {{end}}
 </div>
</div>

Customization#

Change the number of items:

Widget Source Files

Mon, 01 Jan 0001 00:00:00 +0000

This directory contains example Go templates for creating custom Scripted Widgets.

Overview#

Scripted Widgets allow you to create custom HTML widgets using Go’s html/template syntax. Templates have access to a powerful API for querying items, transforming data, and rendering HTML with automatic escaping for security.

Examples#

1. Simple Item List (`01_simple_item_list.html`)#

Displays a list of open items with their status badges.

Widget Examples on Timill Platform Documentation

Widget - Simple Item List

Example Code#

Parameters#

Customization#

Widget - Status Dashboard

Example Code#

Customization#

Widget - Recent Activity

Example Code#

Customization#

Widget Source Files

Overview#

Examples#

1. Simple Item List (01_simple_item_list.html)#

1. Simple Item List (`01_simple_item_list.html`)#