Skip to content

Commit e0b7dd7

Browse files
hcourdenthcourdent
authored
Doc group components, cleaned app editor documentation & created template of components pages (windmill-labs#303)
1 parent 6dfe9b3 commit e0b7dd7

29 files changed

+202
-100
lines changed

‎docs/apps/0_app_editor/index.mdx

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import DocCard from '@site/src/components/DocCard';
22

33
# App Editor
44

5-
The app editor is where you build an app with components, create interactions with runnables, and configure the app settings.
5+
The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings.
66

77
<div class="grid grid-cols-2 gap-6 mb-4">
88
<DocCard
@@ -33,17 +33,7 @@ The app editor is composed of 5 main sections:
3333

3434
## Toolbar
3535

36-
In the topbar, you have several options to configure your app:
37-
38-
- **Change App Summary**: Modify the summary of your app.
39-
- **Undo/Redo**: Perform undo or redo actions.
40-
- **Toggle Layout**: Switch between Mobile and Desktop layout.
41-
- **Toggle Width**: Switch between full and max width.
42-
- **Export as JSON**: Export your app as a JSON or [Hub](https://hub.windmill.dev/) compatible file.
43-
- **Debugging**: Open the debugging panel.
44-
- **Editor/Preview Mode**: Toggle between the Editor and Preview modes.
45-
- **Save as Draft**: Save your app as a [draft](../../core_concepts/0_draft_and_deploy/index.mdx#draft).
46-
- **Deploy**: [Deploy](../../core_concepts/0_draft_and_deploy/index.mdx#deployed-version) your app.
36+
The topbar helps you in your app editing.
4737

4838
![App Menu](../../assets/apps/1_app_toolbar/app-toolbar.png.webp)
4939

@@ -56,18 +46,6 @@ In the topbar, you have several options to configure your app:
5646
description="Discover all the features of the toolbar."
5747
href="/docs/apps/toolbar"
5848
/>
59-
<DocCard
60-
color="orange"
61-
title="Debugging"
62-
description="Learn how to debug your app."
63-
href="/docs/apps/app_debugging"
64-
/>
65-
<DocCard
66-
color="orange"
67-
title="Deployment"
68-
description="Save as draft or deploy your app."
69-
href="/docs/apps/app_deployment"
70-
/>
7149
</div>
7250

7351
## Canvas
@@ -108,7 +86,7 @@ On the left panel of the editor, you can see the list of outputs of the app. The
10886
- **Component Outputs**: These outputs correspond to the outputs of the individual components.
10987
- **Background Runnables**: These outputs represent the outputs of the background runnables.
11088

111-
![App Outputs](../../assets/apps/0_app_editor/app-outputs.png.webp)
89+
![App Outputs](../../assets/apps/0_app_editor/app-outputs.png)
11290

11391
You can perform the following actions with the outputs:
11492

@@ -138,7 +116,7 @@ You can perform the following actions with the outputs:
138116

139117
On the bottom panel of the editor, you can see the list of runnables of the app. The runnables are the scripts or flows that are linked to components, or ran in the background. They are used to perform actions when a component is clicked, to fetch data, etc. They make all the interactions of the app.
140118

141-
![App Runnables panel](../../assets/apps/0_app_editor/app-runnable-panel.png.webp)
119+
![App Runnables panel](../../assets/apps/0_app_editor/app-runnable-panel.png)
142120

143121
#### Learn more
144122

@@ -155,7 +133,9 @@ On the bottom panel of the editor, you can see the list of runnables of the app.
155133

156134
Finally, on the right panel of the editor, you can insert a new component, configure a component or edit the component styles.
157135

158-
![App Runnables panel](../../assets/apps/0_app_editor/app-components-settings.png.webp)
136+
![App Components Library](../../assets/apps/0_app_editor/app_components_add.png "App Components Library")
137+
138+
![App Components Configuration](../../assets/apps/0_app_editor/app_components_configuration.png "App Components Configuration")
159139

160140
#### Learn more
161141

@@ -173,10 +153,10 @@ Finally, on the right panel of the editor, you can insert a new component, confi
173153
href="/docs/apps/app_configuration-settings/app_runnable_triggers"
174154
/>
175155
<DocCard
156+
title="Group of Components"
157+
description="Components can be grouped within containers."
158+
href="/docs/apps/app_configuration-settings/components_groups"
176159
color="orange"
177-
title="Component Configuration"
178-
description="Learn how to configure a component."
179-
href="/docs/apps/app_configuration-settings/app_component_configuration"
180160
/>
181161
<DocCard
182162
color="orange"

‎docs/apps/0_toolbar.mdx renamed to ‎docs/apps/0_toolbar.md

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,19 @@ The app toolbar is located at the top of the app editor. It enables you to adjus
44

55
![App Menu](../assets/apps/1_app_toolbar/app-toolbar.png.webp)
66

7+
- [App Summary](#app-summary): The summary is the name that will be displayed for your app.
8+
- [Undo/Redo](#app-summary): Perform undo or redo actions.
9+
- [Desktop/Mobile Mode](#desktopmobile-mode): Switch between Mobile and Desktop layout.
10+
- [Width](#width): Switch between full and max width.
11+
- [Deployement history](#deployement-history): View the deployment history of the app.
12+
- [JSON](#json): Export your app as a JSON or [Hub](https://hub.windmill.dev/) compatible file.
13+
- [Hub compatible JSON](#hub-compatible-json): View the JSON representation of the app in a format that is compatible with the [Windmill Hub](https://hub.windmill.dev/).
14+
- [App Inputs Configuration](#app-inputs-configuration): the app inputs menu displays a list of all the inputs of each component.
15+
- [Debugging](#debug-runs): Open the debugging panel.
16+
- [Editor/Preview Mode](#preview-mode): Toggle between the Editor and Preview modes.
17+
- [Save as Draft](#save-as-draft): Save your app as a [draft](../core_concepts/0_draft_and_deploy/index.mdx#draft).
18+
- [Deploy](#deploy): [Deploy](../core_concepts/0_draft_and_deploy/index.mdx#deployed-version) your app.
19+
720
## App Summary
821

922
The app summary can be modified on the left side of the toolbar. It serves to describe the app and is displayed in the app list. By default, the summary is the app's name.
@@ -12,61 +25,59 @@ The app summary can be modified on the left side of the toolbar. It serves to de
1225

1326
The undo/redo buttons facilitate undoing or redoing the most recent action.
1427

15-
## Preview Mode
28+
## Desktop/Mobile Mode
1629

17-
The app editor mode can be toggled between `Editor` and `Preview` modes. The preview mode allows you to see the app in action.
30+
You can switch the canvas' mode to `Mobile` or `Desktop` layout from the toolbar. This enables you to manually set the position and size of the components in both modes.
1831

19-
## Desktop/Mobile Mode
32+
## Width
2033

21-
You can switch the canvas mode to `Mobile` or `Desktop` layout from the toolbar. This enables you to manually set the position and size of the components in both modes.
34+
You can set the canvas' width to:
35+
- Limited width: The max width is 1168px and the content stay centered instead of taking the full page width.
36+
- Max width: The width is of the app if the full width of its container.
2237

2338
## Menu `⋮`
2439

2540
The `⋮` menu provides access to the following options:
2641

27-
- JSON: View the JSON representation of the app.
28-
- Publish to Hub: Publish the app to the Windmill Hub.
29-
- Hub Compatible JSON: View the JSON representation of the app in a format that is compatible with the [Windmill Hub](https://hub.windmill.dev/).
42+
### Deployement history
3043

31-
![App Menu](../assets/apps/1_app_toolbar/app-menu.png.webp)
32-
33-
## App Inputs Configuration
44+
In the menu, you can view the deployment history of the app. It displays the date and time of the deployment, the user who deployed the app, and the version of the app.
3445

35-
The app inputs menu displays a list of all the inputs of each component. A toggle allows you to display only resources inputs, enabling you to easily configure your third-party resources for an app imported from the Hub, for example:
46+
You can:
3647

37-
![App Inputs Configuration](../assets/apps/1_app_toolbar/app-inputs-configuration.png.webp)
48+
- View the app at a specific version.
49+
- Restore a fork
50+
- Restore here
3851

39-
## Debug Runs
52+
![Deployement history](../assets/apps/1_app_toolbar/deployement-history.png.webp)
4053

41-
The app builder enables you to examine recent runs to identify potential bugs.
54+
### JSON
4255

43-
![App Debug Runs](../assets/apps/1_app_toolbar/app-debug-runs.png.webp)
56+
View the JSON representation of the app.
4457

45-
## Save as draft
58+
### Hub compatible JSON
4659

47-
You can [save](../core_concepts/0_draft_and_deploy/index.mdx) the app. The first time you save the app, you'll be asked to select the owner of the app. You can choose either a user or a [folder](../core_concepts/8_groups_and_folders/index.mdx#folders).
60+
Hub Compatible JSON: View the JSON representation of the app in a format that is compatible with the [Windmill Hub](https://hub.windmill.dev/).
4861

49-
### Owner: User
62+
### App Inputs Configuration
5063

51-
![App Publish](../assets/apps/1_app_toolbar/app-save-user.png.webp)
64+
The app inputs menu displays a list of all the inputs of each component. A toggle allows you to display only resources inputs, enabling you to easily configure your third-party resources for an app imported from the Hub, for example:
5265

53-
### Owner: Folder
66+
![App Inputs Configuration](../assets/apps/1_app_toolbar/app-inputs-configuration.png.webp)
5467

55-
Read and write permissions are granted to groups and users at the folder level and are shared by all items inside the folder.
68+
## Debug Runs
5669

57-
![App Publish](../assets/apps/1_app_toolbar/app-save-folder.png.webp)
70+
The app builder enables you to examine recent runs to identify potential bugs.
5871

59-
## Deployement history
72+
![App Debug Runs](../assets/apps/1_app_toolbar/app-debug-runs.png.webp)
6073

61-
In the menu, you can view the deployment history of the app. It displays the date and time of the deployment, the user who deployed the app, and the version of the app.
74+
## Preview Mode
6275

63-
You can:
76+
The app editor mode can be toggled between `Editor` and `Preview` modes. The preview mode allows you to see the app in action.
6477

65-
- View the app at a specific version.
66-
- Restore a fork
67-
- Restore here
78+
## Save as draft
6879

69-
![Deployement history](../assets/apps/1_app_toolbar/deployement-history.png.webp)
80+
You can [save](../core_concepts/0_draft_and_deploy/index.mdx) the app. The first time you save the app, you'll be asked to select the owner of the app. You can choose either a user or a [folder](../core_concepts/8_groups_and_folders/index.mdx#folders).
7081

7182
## Deploy
7283

@@ -75,4 +86,4 @@ You can [deploy](../core_concepts/0_draft_and_deploy/index.mdx#deployed-version)
7586
- Read-Access Required: The app can be accessed by anyone who has read access to the app.
7687
- Publish Publicly: The app can be accessed by anyone who knows the secret URL. If set to `Publish Publicly`, the secret URL will be displayed here.
7788

78-
![App Publish](../assets/apps/1_app_toolbar/app-publish.png.webp)
89+
![App Publish](../assets/apps/1_app_toolbar/app-publish.png.webp)

‎docs/apps/1_canvas.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ The header has the following elements:
2222

2323
### Component selection
2424

25-
[Components](./4_app_configuration-settings/1_app_component_library.md) can be selected by clicking on them. The selected component will be highlighted with a indigo border.
25+
[Components](./4_app_configuration-settings/1_app_component_library.mdx) can be selected by clicking on them. The selected component will be highlighted with a indigo border.
2626
When hovering a component, a blue border will be displayed around the component.
2727

2828
You can also select multiple components by clicking on the `Shift` key and clicking on the components you want to select.

‎docs/apps/2_outputs.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ Each component has its own outputs. The outputs are displayed in a tree structur
3434

3535
![App outputs](../assets/apps/2_app_outputs/app-output-collapsed.png.webp)
3636

37-
For example, the [Table component](./4_app_configuration-settings/1_app_component_library.md#table-1) has the following outputs:
37+
For example, the [Table component](./4_app_configuration-settings/1_app_component_library.mdx#table-1) has the following outputs:
3838

3939
- selectedRow: the selected row as an object
4040
- loading: the loading state of the table

‎docs/apps/3_app-runnable-panel.mdx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Windmill Apps can be powered by code, with scripts linked to components, backgro
88

99
On the bottom of the app editor, you can find the runnable editor. It allows you to create, edit, or manage the scripts or flows linked to components (runnables) and background runnables.
1010

11-
![App Runnables panel](../assets/apps/0_app_editor/app-runnable-panel.png.webp)
11+
![App Runnables panel](../assets/apps/0_app_editor/app-runnable-panel.png)
1212

1313
The panel is structured as follows:
1414

@@ -268,20 +268,20 @@ Note that it's a bad idea to mix dynamic default value and setValue together.
268268

269269
`setValue` supports the following components:
270270

271-
- [Display](./4_app_configuration-settings/1_app_component_library.md#display)
272-
- [Date Input](./4_app_configuration-settings/1_app_component_library.md#date-input)
273-
- [Number Input](./4_app_configuration-settings/1_app_component_library.md#number-input)
274-
- [Currency Input](./4_app_configuration-settings/1_app_component_library.md#currency-input)
275-
- [Schema Form](./4_app_configuration-settings/1_app_component_library.md#schema-form)
276-
- [Checkbox](./4_app_configuration-settings/1_app_component_library.md#checkbox)
277-
- [Standalone Tab](./4_app_configuration-settings/1_app_component_library.md#select-tab)
278-
- [Standalone step](./4_app_configuration-settings/1_app_component_library.md#select-step)
279-
- [Range](./4_app_configuration-settings/1_app_component_library.md#range)
280-
- [Multi Select](./4_app_configuration-settings/1_app_component_library.md#multi-select)
281-
- [Text Input](./4_app_configuration-settings/1_app_component_library.md#text-input)
282-
- [Slider](./4_app_configuration-settings/1_app_component_library.md#slider)
283-
- [Select](./4_app_configuration-settings/1_app_component_library.md#select)
284-
- [Text](./4_app_configuration-settings/1_app_component_library.md#text)
271+
- [Display](./4_app_configuration-settings/1_app_component_library.mdx#display)
272+
- [Date Input](./4_app_configuration-settings/1_app_component_library.mdx#date-input)
273+
- [Number Input](./4_app_configuration-settings/1_app_component_library.mdx#number-input)
274+
- [Currency Input](./4_app_configuration-settings/1_app_component_library.mdx#currency-input)
275+
- [Schema Form](./4_app_configuration-settings/1_app_component_library.mdx#schema-form)
276+
- [Checkbox](./4_app_configuration-settings/1_app_component_library.mdx#checkbox)
277+
- [Standalone Tab](./4_app_configuration-settings/1_app_component_library.mdx#select-tab)
278+
- [Standalone step](./4_app_configuration-settings/1_app_component_library.mdx#select-step)
279+
- [Range](./4_app_configuration-settings/1_app_component_library.mdx#range)
280+
- [Multi Select](./4_app_configuration-settings/1_app_component_library.mdx#multi-select)
281+
- [Text Input](./4_app_configuration-settings/1_app_component_library.mdx#text-input)
282+
- [Slider](./4_app_configuration-settings/1_app_component_library.mdx#slider)
283+
- [Select](./4_app_configuration-settings/1_app_component_library.mdx#select)
284+
- [Text](./4_app_configuration-settings/1_app_component_library.mdx#text)
285285

286286
#### Parameters
287287

‎docs/apps/4_app_configuration-settings/1_app_component_library.md renamed to ‎docs/apps/4_app_configuration-settings/1_app_component_library.mdx

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import DocCard from '@site/src/components/DocCard';
2+
13
# Component Library
24

35
The app components library is located on the right-hand side of the app editor. It displays the app components and allows you to configure them.
@@ -123,7 +125,6 @@ Containers allow you to host other components in a box. Moving a container means
123125
<video
124126
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
125127
autoPlay
126-
loop
127128
controls
128129
src="/videos/container.mp4"
129130
alt="container component"
@@ -134,7 +135,29 @@ To add a component to a container, you can either click on `Insert` while you se
134135

135136
#### Container configuration
136137

137-
The container component has no configuration.
138+
A container can be turned into a group of components by enabling "Container is a component group".
139+
140+
<video
141+
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
142+
autoPlay
143+
controls
144+
id="main-video"
145+
src="/videos/group_of_components.mp4"
146+
/>
147+
148+
<br/>
149+
150+
More details on Group of Components:
151+
152+
<div class="grid grid-cols-2 gap-2 my-4">
153+
<DocCard
154+
title="Group of Components"
155+
description="Components can be grouped within containers."
156+
href="/docs/apps/app_configuration-settings/components_groups"
157+
color="orange"
158+
/>
159+
</div>
160+
138161

139162
#### Outputs
140163

@@ -242,7 +265,6 @@ The drawer is container called by a button. Once you click on the button, a side
242265
<video
243266
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
244267
autoPlay
245-
loop
246268
controls
247269
src="/videos/drawer.mp4"
248270
alt="drawer component"
@@ -270,7 +292,6 @@ Container split in x number of panes vertically.
270292
<video
271293
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
272294
autoPlay
273-
loop
274295
controls
275296
src="/videos/vertical_split.mp4"
276297
alt="vertical split panes"
@@ -292,7 +313,6 @@ Container split in x number of panes horizontally.
292313
<video
293314
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
294315
autoPlay
295-
loop
296316
controls
297317
src="/videos/horizontal_split.mp4"
298318
alt="horizontal split panes"
@@ -314,7 +334,6 @@ The modal is container called by a button. Once you click on the button, a modal
314334
<video
315335
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
316336
autoPlay
317-
loop
318337
controls
319338
id="modal-layout"
320339
src="/videos/modal-layout.mp4"
@@ -339,7 +358,6 @@ The stepper component helps you lay out multi-step apps, with an optional valida
339358
<video
340359
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
341360
autoPlay
342-
loop
343361
controls
344362
id="modal-layout"
345363
src="/videos/stepper.mp4"
@@ -375,7 +393,6 @@ Tabs have three display modes:
375393
<video
376394
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
377395
autoPlay
378-
loop
379396
controls
380397
src="/videos/tabs.mp4"
381398
alt="tabs component"
@@ -397,7 +414,6 @@ Conditional tabs are tabs that are displayed only if a condition is met. The con
397414
<video
398415
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
399416
autoPlay
400-
loop
401417
controls
402418
id="conditional-tabs-video"
403419
src="/videos/conditional-tabs.mp4"
@@ -1018,7 +1034,6 @@ The AgGrid table component allows you to display an agnostic grid table.
10181034
<video
10191035
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
10201036
autoPlay
1021-
loop
10221037
controls
10231038
src="/videos/aggrid_table.mp4"
10241039
alt="aggrid table"
@@ -1086,7 +1101,6 @@ You can directly edit the text by click the `Pen` icon on the app editor. You ca
10861101
<video
10871102
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
10881103
autoPlay
1089-
loop
10901104
controls
10911105
src="/videos/text_editor.mp4"
10921106
/>
@@ -1401,10 +1415,9 @@ The ChartJs component allows you to display a ChartJs using the [Chart.js](https
14011415
<video
14021416
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
14031417
autoPlay
1404-
loop
14051418
controls
14061419
src="/videos/chartjs.mp4"
1407-
alt="horizontal split panes"
1420+
alt="ChartJS"
14081421
/>
14091422
<br/>
14101423

0 commit comments

Comments
 (0)