Skip to content

Commit 28766b7

Browse files
aeberhartaeberhart
committed
add remaining widgets
1 parent c9e16c7 commit 28766b7

File tree

2 files changed

+611
-0
lines changed

2 files changed

+611
-0
lines changed

‎dashjoin-docs/llms/widget.json

Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,30 @@
3232
"widget": "display"
3333
}
3434
},
35+
{
36+
"title": "display widget showing an image",
37+
"description": "if the object has exactly the key 'img' (with optional width and height), the result is displayed as an HTML image with the value of the img field being used as the image src attribute",
38+
"code": {
39+
"display": "{'img': 'https://dashjoin.com/img/fav.png'}",
40+
"widget": "display"
41+
}
42+
},
43+
{
44+
"title": "display widget showing a hyperlink",
45+
"description": "if the object has exactly the key 'href' or the keys 'href' and 'label', the object is displayed as a hyperlink",
46+
"code": {
47+
"display": "{'href':'http://dashjoin.com', 'label':'DJ Homepage'}",
48+
"widget": "display"
49+
}
50+
},
51+
{
52+
"title": "display widget showing a hyperlink",
53+
"description": "absolute or relative links to another page in the app are specified without the 'slash hash' part of the URL - for instance, the href 'Info' or '/page/Info' links to the Info page",
54+
"code": {
55+
"display": "{'href':'/#/page/Home', 'label':'Home'}",
56+
"widget": "display"
57+
}
58+
},
3559
{
3660
"title": "display widget on dashboard page",
3761
"description": "shows how a display widget is added on a dashboard page",
@@ -299,5 +323,311 @@
299323
}
300324
}
301325
}
326+
],
327+
"actionTable": [
328+
{
329+
"title": "action table",
330+
"description": "Visualizes 'expression' as a table. The 'properties' field contains an object where the keys are button labels and the values contain actions to be performed when the button is pressed. The action expression gets the context passed which includes the selected objects in the 'selected' field",
331+
"code": {
332+
"expression": "$all('sqlite', 'REQUESTS')",
333+
"properties": {
334+
"print": "selected.$echo($)"
335+
},
336+
"widget": "actionTable"
337+
}
338+
}
339+
],
340+
"aichat": [
341+
{
342+
"title": "aichat widget",
343+
"description": "chat widget that allows you to react to user inputs and file uploads. this example answers (without AI) by simply repeating what the user asks.",
344+
"code": {
345+
"onChat": "$append(messages, [{'role':'user', 'content': query}, {'role':'assistant', 'content': 'you said: ' & query}])",
346+
"widget": "aichat"
347+
}
348+
},
349+
{
350+
"title": "aichat widget",
351+
"description": "chat widget that allows you to react to user inputs and file uploads. this example chats with OpenAI's gpt-4o-mini model. The API key must be provided using the 'openai' credentials in the function catalog. The onChat callback passes messages (the chat history) and the new user query to the $chat function. The widget is configured using 'expression'. This expression specifies the initial messages - in this case the system message containing the system prompt",
352+
"code": {
353+
"onChat": "$chat('https://api.openai.com/v1/chat/completions', query, messages, [], {'model':'gpt-4o-mini'}, {'Authorization': 'openai', 'dj-timeout-seconds': 60})",
354+
"expression": "{'messages': [{'role': 'system', 'content': 'always answer in a funny way'}]}",
355+
"widget": "aichat"
356+
}
357+
}
358+
],
359+
"analytics": [
360+
{
361+
"title": "analytics widget",
362+
"description": "displays the results of a SQL query as a chart or table. Allows placing filters on the widget that the user can set when viewing the widget. The database, table, columns, and filter fields determine the SQL query: in this case, it is 'select user, count(ID) from REQUESTS where submitted >= ?' on the database 'sqlite'. Possible filter input widgets are: text, slider, switch, date, select, and selectmultiple.",
363+
"code": {
364+
"columns": [
365+
{
366+
"name": "user",
367+
"aggregation": "GROUP_BY"
368+
},
369+
{
370+
"name": "ID",
371+
"aggregation": "COUNT"
372+
}
373+
],
374+
"filter": [
375+
{
376+
"name": "submitted",
377+
"operator": ">=",
378+
"input": "date"
379+
}
380+
],
381+
"database": "sqlite",
382+
"table": "REQUESTS",
383+
"chart": "bar",
384+
"widget": "analytics"
385+
}
386+
}
387+
],
388+
"chart": [
389+
{
390+
"title": "chart widget",
391+
"description": "displays a chart based on a query or expression. the first column is used as labels for the X-axis. The second column holds the Y-Values. This example shows the results of the 'group' query from the query catalog run on the northwind database. The chart is a bar chart.",
392+
"code": {
393+
"database": "northwind",
394+
"query": "group",
395+
"chart": "bar",
396+
"widget": "chart"
397+
}
398+
},
399+
{
400+
"title": "chart widget",
401+
"description": "displays a chart based on a query or expression. the first column is used as labels for the X-axis. The second column holds the Y-Values. This example uses a JSONata expression to compute a table using two columns in order to display it as a line chart.",
402+
"code": {
403+
"chart": "line",
404+
"expression": "[{'name':'joe', 'age':11}, {'name':'jane', 'age': 22}]",
405+
"arguments": "",
406+
"widget": "chart"
407+
}
408+
}
409+
],
410+
"datagrid": [
411+
{
412+
"title": "datagrid widget",
413+
"description": "Displays the result of a JSONata expression as an editable table. We have callbacks ondelete (context 'id' contains the primary key of the row to be deleted), onchange (updatedRow contains the new value of the row), and oncreate (no context is given - in this example, the code computes a new unique primary key by running select max(id) from table)",
414+
"code": {
415+
"widget": "datagrid",
416+
"expression": "$all('northwind', 'EMPLOYEES')",
417+
"onchange": "$update('northwind', 'EMPLOYEES', id, updatedRow)",
418+
"ondelete": "$delete('northwind', 'EMPLOYEES', id)",
419+
"oncreate": "$create('northwind', 'EMPLOYEES', {'EMPLOYEE_ID': $adHocQuery('northwind', 'select max(EMPLOYEE_ID)+1 as X from EMPLOYEES').X, 'LAST_NAME': ' ', 'FIRST_NAME': ' '})",
420+
"idColumn": "EMPLOYEE_ID"
421+
}
422+
}
423+
],
424+
"diagram": [
425+
{
426+
"title": "diagram widget",
427+
"description": "displays a boxes and lines diagram where each box represents a database record. The expression 'nodes' computes the boxes. The fields database, table, and id denote the database record (in the example an EMPLOYEE). Optionally, you can specify the box label (data.label) and the box position (position.x and position.y)",
428+
"code": {
429+
"nodes": "$all('northwind', 'EMPLOYEES').{'database': 'northwind', 'table': 'EMPLOYEES', 'id': EMPLOYEE_ID, 'data': {'label': LAST_NAME}}",
430+
"edges": "$all('northwind', 'EMPLOYEES').{'source': EMPLOYEE_ID, 'target': REPORTS_TO}",
431+
"widget": "diagram"
432+
}
433+
}
434+
],
435+
"editRelated": [
436+
{
437+
"title": "edit related widget",
438+
"description": "Allows editing related records of a database record. In this example, the order instance page allows editing all the order details directly. The link between the tables is established via the 'prop' field, which contains the column ID of the foreign key",
439+
"code": {
440+
"ID": "dj/northwind",
441+
"name": "northwind",
442+
"djClassName": "org.dashjoin.service.SQLDatabase",
443+
"url": "jdbc:h2:mem:northwind",
444+
"tables": {
445+
"ORDERS": {
446+
"instanceLayout": {
447+
"widget": "page",
448+
"children": [
449+
{
450+
"columns": [
451+
"ORDER_ID",
452+
"PRODUCT_ID",
453+
"UNIT_PRICE",
454+
"QUANTITY",
455+
"DISCOUNT"
456+
],
457+
"prop": "dj/northwind/ORDER_DETAILS/ORDER_ID",
458+
"widget": "editRelated"
459+
}
460+
]
461+
}
462+
}
463+
}
464+
}
465+
}
466+
],
467+
"graph": [
468+
{
469+
"title": "graph widget",
470+
"description": "display a directed labelled graph showing the result of an OpenCypher query",
471+
"code": {
472+
"nodes": "$adHocQueryGraph('northwind', 'match p=(x:EMPLOYEES)-[:REPORTS_TO]->(y) return p').p",
473+
"widget": "graph"
474+
}
475+
},
476+
{
477+
"title": "graph widget",
478+
"description": "display a directed labelled graph showing the nodes specified by a JSONata expression. Initially, this graph has no edges",
479+
"code": {
480+
"nodes": "$all('northwind', 'EMPLOYEES').EMPLOYEE_ID.{ 'database': 'northwind', 'table': 'EMPLOYEES', 'pk': [$]}",
481+
"widget": "graph"
482+
}
483+
}
484+
],
485+
"html": [
486+
{
487+
"title": "html widget",
488+
"description": "Allows you to specify HTML. The context expression can be used to inject dynamic content into the HTML via the template ${context}. You can also provide JavaScript functions that can be called from your HTML code (e.g. function 'go')",
489+
"code": {
490+
"title": "HTML Widgets",
491+
"html": "<html lang=\"en\"><style>.card {padding:2em;background:#fff;border-radius:1em;box-shadow:0 4px 12px rgba(0,0,0,.1);text-align:center}</style><body><div class=\"card\"><h1>Hello \uD83D\uDC4B</h1><p><a href='javascript:go()'>${context.x}</a></p></div></body></html>",
492+
"context": "{'x': 'Hello World!'}",
493+
"script": "function go(){alert('Hi')}",
494+
"widget": "html"
495+
}
496+
}
497+
],
498+
"icon": [
499+
{
500+
"title": "icon widget",
501+
"description": "shows a material icon with an optional link (href) and tooltip text",
502+
"code": {
503+
"icon": "verified_user",
504+
"href": "/page/Home",
505+
"tooltip": "tooltip text",
506+
"widget": "icon"
507+
}
508+
}
509+
],
510+
"links": [
511+
{
512+
"title": "links widget",
513+
"description": "on an instance page, shows links to all other related records and the corresponding table page",
514+
"code": {
515+
"widget": "links"
516+
}
517+
}
518+
],
519+
"map": [
520+
{
521+
"title": "map widget showing a list of addresses",
522+
"description": "The address can be as simple as 'jp' for Japan, or it can be a specific street address. The widget chooses the appropriate center and zoom level automatically",
523+
"code": {
524+
"display": "['paris', 'berlin']",
525+
"widget": "map"
526+
}
527+
},
528+
{
529+
"title": "map widget showing a specific address with a popup linking to a record",
530+
"description": "Using the points field, you can specify a popup which display the data like the display widget. In this case, we show a link to a database record",
531+
"code": {
532+
"display": "{'points': [{'address': 'London','popup': {'database': 'northwind','table': 'CUSTOMERS','pk': [ 'AROUT' ]}}]}",
533+
"widget": "map"
534+
}
535+
}
536+
],
537+
"markdown": [
538+
{
539+
"title": "markdown widget",
540+
"description": "shows markdown that can be fed dynamic content via the 'context' JSONata expression",
541+
"code": {
542+
"markdown": "# Hello ${user} ${context}",
543+
"context": "42",
544+
"widget": "markdown"
545+
}
546+
}
547+
],
548+
"mdxeditor": [
549+
{
550+
"title": "mdxeditor widget",
551+
"description": "a WYSIWYG editor that can be extended with custom menus. 'properties' defines the actions, 'expression' defines the menu structure",
552+
"code": {
553+
"markdown": "# Hello ${user} ${context}",
554+
"context": "42",
555+
"properties": {
556+
"alert": "$alert('selection: ' & selection & '. markdown: ' & markdown)",
557+
"log": "$log($)",
558+
"sleep": "($progress({'message': 'working'});$sleep(1000))"
559+
},
560+
"expression": "{'menu': [{'type': 'select','title': 'tooltip','label': 'longer operation','value': 'sleep','items': [{}]},{'type': 'select','title': 'tooltip','label': 'Label','items': [{'label': 'alert popup','value': 'alert'},{'label': 'doc to console','value': 'log'}]}]}",
561+
"widget": "mdxeditor"
562+
}
563+
}
564+
],
565+
"table": [
566+
{
567+
"title": "table widget",
568+
"description": "shows the result of a query. this example uses mode auto which chooses a mobile friendly table layout when viewed on small devices",
569+
"code": {
570+
"mode": "auto",
571+
"database": "northwind",
572+
"query": "group",
573+
"widget": "table"
574+
}
575+
},
576+
{
577+
"title": "table widget",
578+
"description": "shows the result of a JSONata expression as a table",
579+
"code": {
580+
"expression": "[{'x':1}]",
581+
"widget": "table"
582+
}
583+
}
584+
],
585+
"text": [
586+
{
587+
"title": "text widget",
588+
"description": "shows a simple static text",
589+
"code": {
590+
"text": "Hello World!",
591+
"widget": "text"
592+
}
593+
},
594+
{
595+
"title": "text widget",
596+
"description": "shows a hyperlink with an icon in front",
597+
"code": {
598+
"href": "/page/Home",
599+
"text": "Homepage",
600+
"icon": "home",
601+
"widget": "text"
602+
}
603+
}
604+
],
605+
"tree": [
606+
{
607+
"title": "tree widget",
608+
"description": "shows a tree using a recursive query 'orgchart'. The query must have a parameter 'node' and is evaluated every time a node is opened in the tree view",
609+
"code": {
610+
"widget": "tree",
611+
"query": "orgchart",
612+
"database": "northwind"
613+
}
614+
},
615+
{
616+
"title": "tree widget",
617+
"description": "shows a static tree that is suitable for a side navigation. The tree nodes can provide an icon, text, href, and nested child nodes",
618+
"code": {
619+
"expression": "[{'data': {'text': 'Menu','icon': 'person'},'children': [{'text': 'Info', 'icon': 'info', 'href': '/page/Info'}, {'text': 'Home', 'icon': 'home', 'href': '/page/Info'}]}]",
620+
"widget": "tree"
621+
}
622+
}
623+
],
624+
"uploadfile": [
625+
{
626+
"title": "uploadfile widget",
627+
"description": "Allows uploading files to the upload directory. Note that WebDAV must be turned on using the WEBDEV_ENABLED environment variable",
628+
"code": {
629+
"widget": "uploadfile"
630+
}
631+
}
302632
]
303633
}

0 commit comments

Comments
 (0)