You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit f87b582
Browse filesBrowse the repository at this point in the historyBrowse files
The Saltcorn copilot can generate react-views. Only views where all the code is stored within the view are possible, an action to change the main bundle does not exist yet. When the chat only gives you the code without a button to apply it, try to be more explicit (for example, it could be that the model still needs to know the min_role).
442
+
443
+
## Setup
444
+
445
+
To make the **Generate React View** tool available in the Saltcorn Copilot:
446
+
447
+
1. Make sure **Agents** is installed.
448
+
2. Go to **Actions** and create a new Trigger with the **Agent** action.
449
+
3. In the configuration, add **Generate React View** to the skill list.
450
+
4. Open the **Saltcorn Copilot** trigger configuration, click the add button and select your **Generate React View** trigger.
"Error removing old directory: "+err.message||"Unknown error",
89
+
"Error removing old directory: "+err.message||"Unknown error"
89
90
);
90
91
}
91
92
};
92
93
94
+
constreactViewSystemPrompt=`Use the generate_react_view tool to generate a react view. Here is an example of a
95
+
valid generated react code:
96
+
97
+
\`\`\`import React from "react";
98
+
99
+
export default function App({}) {
100
+
return <h1>Hello world</h1>;
101
+
}
102
+
\`\`\`
103
+
104
+
The generated code must include the react import at the top, and your generated code should export default the component.
105
+
106
+
A react view can be tableless or table-based. A tableless react view could for example show the current time, a table based view could show the data of one or multiple persons.
107
+
108
+
When a react view is tabless, it gets this properties:
109
+
\`\`\`import React from "react";
110
+
export default function App({viewName, query}) {...}
111
+
\`\`\`
112
+
When a react view is table based, it gets this properties:
113
+
\`\`\`import React from "react";
114
+
export default function App({viewName, query, tableName, rows, state}) {...}
115
+
\`\`\`
116
+
- viewName: the name of the view
117
+
- query: the query parameters of the view
118
+
- tableName: the name of the Saltcorn table
119
+
- rows: the rows of the table, this is an array of objects, each object is a row of the table
120
+
- state: the state of the view, this is an object with the state of the view
121
+
122
+
A react-view has access to bootstrap 5 styles. react-bootstrap is not available please use the normal bootstrap classes.
123
+
124
+
A react-view can use the function set_state_field(key, value, e) to change the current query of the browser window.
125
+
By changing the query you can act as a filter. For example if you show a list of persons, you can filter by name, age, etc.
126
+
Key is the name of the field, value is the value you want to set, and e is the event that triggered the change.
127
+
A react-filter-view can exist independent of other views, it only has to call set_state_field.
128
+
129
+
A react-view hast accees to the react-lib npm package. This is a module with hooks and functions to interact with the Saltcorn system. You can import it like this:
130
+
\`\`\`
131
+
import { useFetchOneRow, useFetchRows } from "@saltcorn/react-lib/hooks";
132
+
import { fetchOneRow, fetchRows, insertRow, updateRow, deleteRow } from "@saltcorn/react-lib/api";
133
+
\`\`\`
134
+
Please note that hooks are in the hooks submodule and functions are in the api submodule.
135
+
136
+
useFetchOneRow and useFetchRows are hooks to fetch rows from a Saltcorn table. Table-based views receive the initial rows in the rows property,
137
+
useFetchOneRow and useFetchRows can load data at runtime. This can be useful when the initial data changes,
138
+
or for loading data from another table than the table of the view, or for tableless views.
139
+
140
+
Parameters of useFetchOneRow:
141
+
- tableName: the name of the table
142
+
- query: the query to fetch the row as an object
143
+
- dependencies: an array of dependencies, when one of the dependencies changes, useFetchOneRow will fetch the row again
144
+
Returns an object with:
145
+
- isLoading: boolean indicating if the data is loading
146
+
- error: string describing the error or null
147
+
- row: an object with the data of the row
148
+
149
+
useFetchRows has the same signature, but returns an array of rows instead of a single row.
150
+
151
+
Example of useFetchRows:
152
+
\`\`\`
153
+
import React, { useState } from "react";
154
+
import { useFetchRows } from "@saltcorn/react-lib/hooks";
0 commit comments