Create a DemoScript with steps and registration for the Datagrok demo application
Help the user create a demo script that demonstrates step-by-step functionality in the Datagrok demo application.
/write-demo-script [script-name] [--package <package-name>]
The package must depend on @datagrok-libraries/tutorials:
npm install @datagrok-libraries/tutorials
Create a TypeScript file (e.g., src/demo-app/demo-script.ts) with a function that initializes and runs the demo:
import {DemoScript} from '@datagrok-libraries/tutorials';
export function demo() {
const demoScript = new DemoScript(
'Script Name', // name (required)
'Script description', // description (required)
true, // isAutomatic: true = auto-advance, false = manual
{
autoStartFirstStep: true, // optional: auto-start first step in manual mode
path: 'Category/Demo' // optional: breadcrumb path in the view
}
);
demoScript
.step('Step 1', async () => {
grok.shell.addTableView(grok.data.demo.demog());
}, {description: 'Opens the demographics dataset.', delay: 2000})
.step('Step 2', async () => {
grok.shell.addTableView(grok.data.testData('biosensor'));
}, {description: 'Opens the biosensor dataset.', delay: 2000})
.step('Final step', async () => console.log('Finished'));
return demoScript.start();
}
Each .step() call takes:
name (string, required): step display namefunc (async function, required): the action to performdescription (string): text shown to the user during this stepdelay (number): milliseconds to wait before advancing (for automatic scripts)Add a function with the required metadata annotations to package.ts:
import {demo} from './demo-app/demo-script';
//name: Demo script
//description: Illustrates the work of the demo script
//meta.demoPath: Category | Subcategory | Script Name
//meta.isDemoScript: True
export function demoScript() {
return new demo();
}
| Annotation | Description |
|---|---|
meta.demoPath | Path in the demo app, separated by |. Without this, the script will NOT appear in the demo application. |
meta.isDemoScript | Must be True. Without this, the script won't render as a demo script with a dedicated view. |
| Annotation | Description |
|---|---|
description | Tooltip text shown in the demo application UI |
webpack
grok publish dev
package.ts with the correct meta.demoPath and meta.isDemoScript annotations.| in meta.demoPath (e.g., Viewers | Charts | My Demo).@datagrok-libraries/tutorials dependency is present in package.json.