Skip to main content

Monitor Activities

Use this Task Flow​

Before continuing, make sure you have followed the instructions to install the strudel-cli.

From the root of your app, run the following on the command line:

strudel add-taskflow my-taskflow --template monitor-activities

Generated Files​

my-taskflow
├── _config
│  ├── taskflow.config.ts
│  └── taskflow.types.ts
├── _layout.tsx
├── calendar.tsx
├── detail.tsx
└── index.tsx

Pages​

index.tsx​

URL Route: /
First page of the Monitor Activities Task Flow. Displays a list of records that a user can drill into.

detail.tsx​

URL Route: /detail
Detail page of the Monitor Activities Task Flow. When a user drills into a record, this page displays a more data about that particular activity.

calendar.tsx​

URL Route: /calendar
(Work in progress) Calendar page of the Monitor Activities Task Flow. Displays all activities by date in a calendar visualization.

Configuration​

This Task Flow can be configured from the taskflow.config.ts file in the _config directory of the generated template files.

taskflow.config.ts
import { MonitorActivitiesConfig } from "./taskflow.types";

export const taskflow: MonitorActivitiesConfig = {
  data: {
    items: {
      /**
       * Source of the data for the initial list of items. 
       */
      source: "default/monitor-activities/experiments.json",
      /**
       * Field name for the unique ID in the data source.
       */
      idField: "id"
    },
    detail: {
      /**
       * Source of the data for the detail view of a single item. 
       */
      source: "default/monitor-activities/experiment_detail.json",
      /**
       * Field name for the unique ID in the data source.
       */
      idField: "id"
    }
  },
}