TasGrid Parent App Simulator

Target Environment:

Login to Parent Application

This simulates the parent application authenticating with the shared backend.

Test Deep Linking:

Test Headless SDK (Centralized Logic):

Manual Auth:

Developer Integration Guide

1. Available Routes:

  • /embed/notes: Renders the full notepad/editor.
  • /embed/notes?noteId=XXX: Renders a specific note directly.
  • /embed/quick-add: Renders a standalone task creation form.

2. Programmatic Creation (TasGrid SDK):

The recommended way to create entries is using the tasgrid-sdk.js module. This ensures all TasGrid-specific defaults and date logic (like urgency decay) are handled correctly.

Setup:

import { createTasgridTask, createTasgridNote } from 'https://tasgrid.ccllc.pro/tasgrid-sdk.js';

A. Creating a TASK:

Use this for items that need status, priority, and automated due date calculation.

const task = await createTasgridTask(pb, {
    title: "Urgent Task",
    urgency: 10,   // Automated: 10=Today, 5=Next Week, 1=Six Months
    priority: 8,   // 1-10
    size: 3,       // Default: 3 (1 hour). Range 0-10.
    tags: ["external"],
    owner: "USER_ID" // Optional
});

B. Creating a NOTE:

Use this for long-form content or documentation without a deadline.

const note = await createTasgridNote(pb, {
    title: "Project Brief",
    content: "<p>HTML content here...</p>",
    tags: ["documentation"],
    isPrivate: false,
    tasks: [] // Optional: Array of Task IDs to link
});

3. Authentication Protocol:

The parent application must send a postMessage to the iframe immediately after the iframe loads (or whenever auth state changes). Since iframes reset their internal state on navigation, you should always sync auth on the onload event.

Example using vanilla JS:

// 1. Define sync function
function syncAuth(iframe) {
    iframe.contentWindow.postMessage({
        type: "TASGRID_AUTH",
        token: pb.authStore.token,
        user: pb.authStore.model
    }, "*");
}

// 2. Attach to iframe (either in HTML or via JS)
// <iframe onload="syncAuth(this)" src="..."></iframe>

4. Responsiveness:

Both routes are designed to be fluid. Ensure your iframe container has defined dimensions; the content will expand to fill it.

Notes Embed /embed/notes
Quick Add Embed /embed/quick-add