diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 5e33c7ff00..1fbede3d24 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -125,7 +125,7 @@ module.exports = { docs: { sidebarPath: require.resolve('./sidebars.js'), // Please change this to your repo. - editUrl: 'https://github.com/ToolJet/Tooljet/blob/main/docs/', + editUrl: 'https://github.com/ToolJet/Tooljet/blob/develop/docs/', includeCurrentVersion: false, lastVersion: '2.0.0-beta', versions: { diff --git a/docs/static/img/datasource-reference/overview/ls.png b/docs/static/img/datasource-reference/overview/ls.png new file mode 100644 index 0000000000..d0b3d065fa Binary files /dev/null and b/docs/static/img/datasource-reference/overview/ls.png differ diff --git a/docs/static/img/datasource-reference/overview/overview.png b/docs/static/img/datasource-reference/overview/overview.png new file mode 100644 index 0000000000..ffe9f9d1a7 Binary files /dev/null and b/docs/static/img/datasource-reference/overview/overview.png differ diff --git a/docs/static/img/datasource-reference/overview/qp.png b/docs/static/img/datasource-reference/overview/qp.png new file mode 100644 index 0000000000..6f29d4855c Binary files /dev/null and b/docs/static/img/datasource-reference/overview/qp.png differ diff --git a/docs/static/img/v2-beta/app-builder/builder.png b/docs/static/img/v2-beta/app-builder/builder.png new file mode 100644 index 0000000000..d79b792cc0 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/builder.png differ diff --git a/docs/static/img/v2-beta/app-builder/canvas/arrange.png b/docs/static/img/v2-beta/app-builder/canvas/arrange.png new file mode 100644 index 0000000000..1ee930631d Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/canvas/arrange.png differ diff --git a/docs/static/img/v2-beta/app-builder/canvas/canvas.png b/docs/static/img/v2-beta/app-builder/canvas/canvas.png new file mode 100644 index 0000000000..23eb53fefd Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/canvas/canvas.png differ diff --git a/docs/static/img/v2-beta/app-builder/canvas/hide.gif b/docs/static/img/v2-beta/app-builder/canvas/hide.gif new file mode 100644 index 0000000000..72792f1d61 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/canvas/hide.gif differ diff --git a/docs/static/img/v2-beta/app-builder/canvas/resize.gif b/docs/static/img/v2-beta/app-builder/canvas/resize.gif new file mode 100644 index 0000000000..1e1f792e97 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/canvas/resize.gif differ diff --git a/docs/static/img/v2-beta/app-builder/leftsidebar/datasources.png b/docs/static/img/v2-beta/app-builder/leftsidebar/datasources.png new file mode 100644 index 0000000000..1272b6b671 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/leftsidebar/datasources.png differ diff --git a/docs/static/img/v2-beta/app-builder/leftsidebar/debugger.png b/docs/static/img/v2-beta/app-builder/leftsidebar/debugger.png new file mode 100644 index 0000000000..65a4bb9e70 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/leftsidebar/debugger.png differ diff --git a/docs/static/img/v2-beta/app-builder/leftsidebar/inspector.png b/docs/static/img/v2-beta/app-builder/leftsidebar/inspector.png new file mode 100644 index 0000000000..01b6077a9d Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/leftsidebar/inspector.png differ diff --git a/docs/static/img/v2-beta/app-builder/leftsidebar/leftsidebar.png b/docs/static/img/v2-beta/app-builder/leftsidebar/leftsidebar.png new file mode 100644 index 0000000000..9fa1518f26 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/leftsidebar/leftsidebar.png differ diff --git a/docs/static/img/v2-beta/app-builder/leftsidebar/pages.png b/docs/static/img/v2-beta/app-builder/leftsidebar/pages.png new file mode 100644 index 0000000000..af769e614a Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/leftsidebar/pages.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/add.png b/docs/static/img/v2-beta/app-builder/querypanel/add.png new file mode 100644 index 0000000000..abcc78bf5d Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/add.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/advanced.png b/docs/static/img/v2-beta/app-builder/querypanel/advanced.png new file mode 100644 index 0000000000..5565a14e4e Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/advanced.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/delete.png b/docs/static/img/v2-beta/app-builder/querypanel/delete.png new file mode 100644 index 0000000000..c7ea299fe9 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/delete.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/edit.png b/docs/static/img/v2-beta/app-builder/querypanel/edit.png new file mode 100644 index 0000000000..8eef0ac198 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/edit.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/editor.png b/docs/static/img/v2-beta/app-builder/querypanel/editor.png new file mode 100644 index 0000000000..2085a59c27 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/editor.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/json.png b/docs/static/img/v2-beta/app-builder/querypanel/json.png new file mode 100644 index 0000000000..33afe43752 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/json.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/nameedit.png b/docs/static/img/v2-beta/app-builder/querypanel/nameedit.png new file mode 100644 index 0000000000..7a89e9ee62 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/nameedit.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/params.png b/docs/static/img/v2-beta/app-builder/querypanel/params.png new file mode 100644 index 0000000000..c9b09e511f Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/params.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/querypanel.png b/docs/static/img/v2-beta/app-builder/querypanel/querypanel.png new file mode 100644 index 0000000000..cf05400cc0 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/querypanel.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/raw.png b/docs/static/img/v2-beta/app-builder/querypanel/raw.png new file mode 100644 index 0000000000..fbeffdbdf8 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/raw.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/run.png b/docs/static/img/v2-beta/app-builder/querypanel/run.png new file mode 100644 index 0000000000..db2bd6efa6 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/run.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/save.png b/docs/static/img/v2-beta/app-builder/querypanel/save.png new file mode 100644 index 0000000000..808a87d167 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/save.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/search.png b/docs/static/img/v2-beta/app-builder/querypanel/search.png new file mode 100644 index 0000000000..d2db5f1518 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/search.png differ diff --git a/docs/static/img/v2-beta/app-builder/querypanel/transform.png b/docs/static/img/v2-beta/app-builder/querypanel/transform.png new file mode 100644 index 0000000000..3a95eb7e47 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/querypanel/transform.png differ diff --git a/docs/static/img/v2-beta/app-builder/rightsidebar/component-inspector.gif b/docs/static/img/v2-beta/app-builder/rightsidebar/component-inspector.gif new file mode 100644 index 0000000000..28955be397 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/rightsidebar/component-inspector.gif differ diff --git a/docs/static/img/v2-beta/app-builder/rightsidebar/rightsidebar.png b/docs/static/img/v2-beta/app-builder/rightsidebar/rightsidebar.png new file mode 100644 index 0000000000..c9d6e70e86 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/rightsidebar/rightsidebar.png differ diff --git a/docs/static/img/v2-beta/app-builder/toolbar/comments.png b/docs/static/img/v2-beta/app-builder/toolbar/comments.png new file mode 100644 index 0000000000..b53383a5e2 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/toolbar/comments.png differ diff --git a/docs/static/img/v2-beta/app-builder/toolbar/globalset.png b/docs/static/img/v2-beta/app-builder/toolbar/globalset.png new file mode 100644 index 0000000000..9f30030bf7 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/toolbar/globalset.png differ diff --git a/docs/static/img/v2-beta/app-builder/toolbar/name.png b/docs/static/img/v2-beta/app-builder/toolbar/name.png new file mode 100644 index 0000000000..27138ae858 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/toolbar/name.png differ diff --git a/docs/static/img/v2-beta/app-builder/toolbar/preview.png b/docs/static/img/v2-beta/app-builder/toolbar/preview.png new file mode 100644 index 0000000000..e1e218a500 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/toolbar/preview.png differ diff --git a/docs/static/img/v2-beta/app-builder/toolbar/release.png b/docs/static/img/v2-beta/app-builder/toolbar/release.png new file mode 100644 index 0000000000..9664198ef5 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/toolbar/release.png differ diff --git a/docs/static/img/v2-beta/app-builder/toolbar/share.png b/docs/static/img/v2-beta/app-builder/toolbar/share.png new file mode 100644 index 0000000000..146f3a4011 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/toolbar/share.png differ diff --git a/docs/static/img/v2-beta/app-builder/toolbar/toolbar.png b/docs/static/img/v2-beta/app-builder/toolbar/toolbar.png new file mode 100644 index 0000000000..ad20eaf678 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/toolbar/toolbar.png differ diff --git a/docs/static/img/v2-beta/app-builder/toolbar/undo.png b/docs/static/img/v2-beta/app-builder/toolbar/undo.png new file mode 100644 index 0000000000..7e5cd15562 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/toolbar/undo.png differ diff --git a/docs/static/img/v2-beta/app-builder/toolbar/version.png b/docs/static/img/v2-beta/app-builder/toolbar/version.png new file mode 100644 index 0000000000..2ee976fd05 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/toolbar/version.png differ diff --git a/docs/static/img/v2-beta/app-builder/toolbar/view.png b/docs/static/img/v2-beta/app-builder/toolbar/view.png new file mode 100644 index 0000000000..d54c04a0b4 Binary files /dev/null and b/docs/static/img/v2-beta/app-builder/toolbar/view.png differ diff --git a/docs/static/img/v2-beta/multi-env/multienv.png b/docs/static/img/v2-beta/multi-env/multienv.png new file mode 100644 index 0000000000..fd5d228780 Binary files /dev/null and b/docs/static/img/v2-beta/multi-env/multienv.png differ diff --git a/docs/static/img/widgets/overview/drag.gif b/docs/static/img/widgets/overview/drag.gif new file mode 100644 index 0000000000..eeab90fb07 Binary files /dev/null and b/docs/static/img/widgets/overview/drag.gif differ diff --git a/docs/static/img/widgets/overview/dragsel.gif b/docs/static/img/widgets/overview/dragsel.gif new file mode 100644 index 0000000000..a4df99039e Binary files /dev/null and b/docs/static/img/widgets/overview/dragsel.gif differ diff --git a/docs/static/img/widgets/overview/events.png b/docs/static/img/widgets/overview/events.png new file mode 100644 index 0000000000..00792f10b1 Binary files /dev/null and b/docs/static/img/widgets/overview/events.png differ diff --git a/docs/static/img/widgets/overview/props.png b/docs/static/img/widgets/overview/props.png new file mode 100644 index 0000000000..b9855184fe Binary files /dev/null and b/docs/static/img/widgets/overview/props.png differ diff --git a/docs/static/img/widgets/overview/select.gif b/docs/static/img/widgets/overview/select.gif new file mode 100644 index 0000000000..4436f36a03 Binary files /dev/null and b/docs/static/img/widgets/overview/select.gif differ diff --git a/docs/versioned_docs/version-2.0.0-beta/app-builder/canvas.md b/docs/versioned_docs/version-2.0.0-beta/app-builder/canvas.md new file mode 100644 index 0000000000..860293fe1c --- /dev/null +++ b/docs/versioned_docs/version-2.0.0-beta/app-builder/canvas.md @@ -0,0 +1,55 @@ +--- +id: canvas +title: Canvas +--- + +Canvas is the center area of the ToolJet app builder where the application is built. You arrange the **components** by dragging them from the Components library(right-sidebar). + +
+ +App Builder: Canvas + +
+ +### Arrange Components + +All the components are fully interactive in editor mode - to prevent interaction you can **click and hold** the **[Component Handle](docs/app-builder/components-library)** to change component's position. + +
+ +App Builder: Canvas + +
+ +### Resize Components + +Components on the canvas can be resized from the edges. + +You can precisely set the position of selected components using keyboard arrow keys after clicking the component handle. + +
+ +App Builder: Canvas + +
+ +### Group Components + +ToolJet comes with flexible components to group other components together, such as **Container** and **Form**. When you drag and drop components in containers/forms they create a group of nested components. All components can be nested in this way. + +### Hide or Disable Components + +Hide or Disable a component by settting it's **Visibility** or **Disabled** property to `true`. Click on the component handle to open **config inspector** on right side. These values can also evaluate to true based on a truthy value. For example, you can use the property of one component to toggle the Visibility property of another component dynamically, you just need to write a conditional statement. + +For example: We want to disable a button when a checkbox is checked so we can simple use `{{components.checkbox1.value}}` in **Disable** property of the button. `{{components.checkbox1.value}}` evaluates to `true` when the checkbox is checked, and false when unchecked. + +
+ +App Builder: Canvas + +
+ +### Clone Components + +You can clone existing components on the canvas by **cmd/ctrl + d**. Check other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** + diff --git a/docs/versioned_docs/version-2.0.0-beta/app-builder/left-sidebar.md b/docs/versioned_docs/version-2.0.0-beta/app-builder/left-sidebar.md new file mode 100644 index 0000000000..46f30d9422 --- /dev/null +++ b/docs/versioned_docs/version-2.0.0-beta/app-builder/left-sidebar.md @@ -0,0 +1,68 @@ +--- +id: left-sidebar +title: Left-sidebar +--- + +Left-sidebar has the following options: + +- **Pages** +- **Inspector** +- **Datasources Manager** +- **Debugger** +- **Dark/Light mode switch** + +
+ +App Builder: Left-sidebar + +
+ +## Pages + +Pages allows you to have multiple pages in a single application, making your ToolJet applications more robust and user-friendly. + +Check the detailed documentation for **[Pages](/docs/tutorial/pages)**. + +
+ +App Builder: Left-sidebar + +
+ +## Inspector + +The Inspector can be used to inspect the data of the **queries**, properties and values of the **components** that are there on the canvas, ToolJet's global variables and the variables that have been set by the user. + +Check the detailed guide on **[using Inspector](/docs/how-to/use-inspector)**. + +
+ +App Builder: Left-sidebar + +
+ +## Datasources Manager + +Datasources Manager is used to connect or remove the datasources. + +Check the detailed **[Datasources documentation](/docs/data-sources/overview)**. + +
+ +App Builder: Left-sidebar + +
+ +## Debugger + +Debugger logs all the errors that are thrown either by the datasource, components, or by wrong query parameters. + +
+ +App Builder: Left-sidebar + +
+ +## Theme switch + +Switch ToolJet into light or dark mode from this button. \ No newline at end of file diff --git a/docs/versioned_docs/version-2.0.0-beta/app-builder/overview.md b/docs/versioned_docs/version-2.0.0-beta/app-builder/overview.md new file mode 100644 index 0000000000..70a7125345 --- /dev/null +++ b/docs/versioned_docs/version-2.0.0-beta/app-builder/overview.md @@ -0,0 +1,20 @@ +--- +id: overview +title: Overview +--- + +# App-Builder: Overview + +ToolJet's App Builder allows you to build applications. ToolJet's app builder has the following major components: + +- **[Toolbar](/docs/app-builder/toolbar)**: configure app settings +- **[Canvas](/docs/app-builder/canvas)**: Arrange the components to build the interface of app +- **[Left-sidebar](/docs/app-builder/left-sidebar)**: Add **[pages](/docs/tutorial/pages)**, **[datasources](/docs/data-sources/overview)**, **[inspect](/docs/how-to/use-inspector)** the componenets, queries or variables, and **[debug](#debugger)** the errors. +- **[Components library](/docs/app-builder/components-library)**(right sidebar): Drag any component or modify the property or styling +- **[Query Panel](/docs/app-builder/query-panel)**: Create, edit or manage the queries + +
+ +App Builder: Overview + +
diff --git a/docs/versioned_docs/version-2.0.0-beta/app-builder/query-panel.md b/docs/versioned_docs/version-2.0.0-beta/app-builder/query-panel.md new file mode 100644 index 0000000000..072e563c5e --- /dev/null +++ b/docs/versioned_docs/version-2.0.0-beta/app-builder/query-panel.md @@ -0,0 +1,177 @@ +--- +id: query-panel +title: Query Panel +--- + +The Query Panel is present at the bottom of the app-builder, this is where you create queries to interact with connected datasources. You can perform API requests, query **[databases](/docs/data-sources/overview)**, or **[transform](/docs/tutorial/transformations)** or manipulate data with **[JavaScript](/docs/data-sources/run-js)** & **[Python](/docs/data-sources/run-py)**. + +The Query Panel has two sections: +- **[Query Manager](#query-manager)** on the right that includes a list of all the created queries +- **[Query Editor](#query-editor)** is used to configure the selected query + +
+ +App Builder: Component library- right sidebar + +
+ +## Query Manager + +Query Manager will list all the queries that has been created in the application. Query Manager is used to: + +### Search + +On the top of the query manager is search box that can be used to search for a specif query. + +
+ +App Builder: Component library- right sidebar + +
+ +### Add + +Add button is used to add more queries in the application. When Add button is clicked, the Query Editor will show you a list of options for creating a query from: **Rest API**, connected **[datasources](/docs/data-sources/overview)**, **[ToolJet Database](/docs/tooljet-database)**, **[JavaScript Code](/docs/data-sources/run-js)**, **[Python Code](/docs/data-sources/run-py)** or Add a new datasource. + +
+ +App Builder: Component library- right sidebar + +
+ +### Delete + +Delete button will delete the selected query, the button will only show up when you hover over the query name. + +
+ +App Builder: Component library- right sidebar + +
+ +### Edit + +Edit button is used edit the name of the selected query, the button will only show up when you hover over the query name. + +
+ +App Builder: Component library- right sidebar + +
+ +## Query Editor + +Query editor used to configure the query parameters, preview or transform the data return by the query. + +
+ +App Builder: Component library- right sidebar + +
+ +### Topbar + +On the top of the query panel there are a few options: + +#### Query Name editor + +Edit the name of the query by clicking on the edit button next to the default query name. + +
+ +App Builder: Component library- right sidebar + +
+ +#### Preview + +Preview gives you a quick look at the data returned by the query without triggering the query in the app. + +The Preview of data is returned in two different formats: + +**Raw** + +
+ +App Builder: Component library- right sidebar + +
+ +**JSON** + +
+ +App Builder: Component library- right sidebar + +
+ +#### Save + +Save is used to save the changes whenever a change is made in query. + +
+ +App Builder: Component library- right sidebar + +
+ +#### Run + +Run is used to trigger the query, running the query will interact with the application unlike `Preview`. + +
+ +App Builder: Component library- right sidebar + +
+ +### Query Parameters + +Query Parameters are the values required for the query to return a response from the server. Parameters include **endpoints**, **methods**, or **operations**. Query Parameters are different for each datasource. + +
+ +App Builder: Component library- right sidebar + +
+ +### Transformation + +Transformations can be enabled on queries to transform the query results. ToolJet allows you to transform the query results using two programming languages JavaScript & Python. Check the detailed documentation on **[Transformations](/docs/tutorial/transformations)**. + +
+ +App Builder: Component library- right sidebar + +
+ +### Advanced options + +#### Run this query on application load? + +Enabling this option will fire the query every time the app is loaded. + +#### Request confirmation before running the query? + +Enabling this option show a confirmation modal to confirm `Yes` or `No` if you want to fire that query. + +#### Run this query on application load? + +Enabling this option show a success toast notification when the query is successfully triggered. + +#### Event Handlers + +Event Handler are used to add some action when a particular event happens. You can add event handlers to the query for the following events: + +- **Query Success** +- **Query Failure** + +:::info +Learn more about [Event Handlers and Actions](/docs/widgets/overview#component-event-handlers). +::: + +
+ +App Builder: Component library- right sidebar + +
\ No newline at end of file diff --git a/docs/versioned_docs/version-2.0.0-beta/app-builder/right-sidebar.md b/docs/versioned_docs/version-2.0.0-beta/app-builder/right-sidebar.md new file mode 100644 index 0000000000..3b371a8641 --- /dev/null +++ b/docs/versioned_docs/version-2.0.0-beta/app-builder/right-sidebar.md @@ -0,0 +1,29 @@ +--- +id: components-library +title: Components Library +--- + +The **Components Library** on the right sidebar contains all of the available components. Use this to drag-and-drop a component from the library to the canvas. It organizes components into sections and you can enter a search term to quickly find a component you need. + +
+ +App Builder: Component library- right sidebar + +
+ +:::tip +Check the **[Components Catalog](/docs/widgets/overview)** here to know more about specific component. +::: + +## Component Config Inspector + +The Component Config Inspector is also called as component inspector. It contains all the available settings for the selected component and is where you **set values**, **update component names**, and **create event handlers**. The Compoenent Inspector organizes settings into different sections, such as **Property** and **Styles**. + +To open the Component Config Inspector, click on the component handle that is present on the top of the component including **⚙️ + Component Name** and the component inspector will open up on the right side: + +
+ +App Builder: Component library- right sidebar + +
+ diff --git a/docs/versioned_docs/version-2.0.0-beta/app-builder/toolbar.md b/docs/versioned_docs/version-2.0.0-beta/app-builder/toolbar.md new file mode 100644 index 0000000000..c3ec5de04f --- /dev/null +++ b/docs/versioned_docs/version-2.0.0-beta/app-builder/toolbar.md @@ -0,0 +1,133 @@ +--- +id: toolbar +title: Toolbar +--- + +Toolbar is present at the top of the app-builder, and is used to configure the app settings. + +
+ +App Builder: Toolbar + +
+ +### App name + +App name can be edited from the left side of the toolbar next to the ToolJet logo. + +When a new app is created, by default its name is set to **Untitled app** + +
+ +App Builder: Toolbar + +
+ +### Global Settings + +To configure the app's global settings, click on the kebab menu(three vertical dots) on the left of the app name. Global settings include: + +- **Hide heaeder for launched apps**: Toggle this on to the hide the tooljet's header when the applications are launched +- **Maintenance mode**: Toggle this on to put the application in maintenance mode. When in **maintenance mode**, on launching the app, the user will get an error message that **the app is under maintenance**. +- **Max width of canvas**: Modify the width of the canvas in **px** or **%**. The default width is 1292 px. +- **Max height of canvas**: Modify the width of the canvas in **px** or **%**. The default height is 2400 px and currently it is the maximum height limit. +- **Background color of canvas**: Enter the hex color code or choose a color from the picker to change the background color of the canvas. You can also click on the **Fx** to programmatically set the value. + +
+ +App Builder: Toolbar + +
+ +### Desktop or Mobile layout + +Switch the canvas mode in Mobile or Desktop layout from the toolbar. + +#### Adding existing component to mobile layout + +Click on the component handle to open component config inspector on the right side. Scroll down to the **Layout** section and enable Mobile Layout. The width of the widget will be adjusted to fit the Mobile Layout. + +#### Adding a new component to mobile layout + +Switch the layout to mobile by clicking the button on the toolbar. Drag and drop a component to the canvas. This widget will not be shown on desktop layout unless **Show on desktop** is enabled from the component config inspector. + +:::info +Width of the component will be automatically adjusted to fit the screen while viewing the application in app viewer. +::: + +
+ +App Builder: Toolbar + +
+ +### Undo or Redo + +Use the undo or redo buttons from the toolbar to undo or redo any change on the canvas. + +You can also **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** to perform such actions. + +
+ +App Builder: Toolbar + +
+ +### Version Manager + +Create or Remove Versions of the applications from the Version Manager. You can also edit the version name from the edit button. + +When many developers are working on an app, **Versioning** allows them to save their own version of the app. This also prevents developers from overwriting the other developer's work. + +
+ +App Builder: Toolbar + +
+ +### Comments + +Comment anywhere on the canvas and collaborate with other users in the workspace. Click on the comments button to enable it and then drop comment anywhere on the canvas. + +
+ +App Builder: Toolbar + +
+ +### Share + +Share your applications with a unique URL generated automatically or edit the URL slug to personalize it. + +- When **Make the application public** is off and URL is shared then the users will have to login to ToolJet to use the application. Toggle on the option then anyone on the internet will be able to access the application without logging in to ToolJet. +- ToolJet generates the **Embedded link** which can be used to embedd application on the webpages. + +
+ +App Builder: Toolbar + +
+ +### Preview + +Clicking on **Preview** button will open up the currently opened version of the app in the new tab. This is really handy when the app developer wants to immediately check the app preview in production. + +
+ +App Builder: Toolbar + +
+ +### Release + +Release the app to publish the current version of the app and push the changes into the production. + +:::caution +ToolJet will block editing of the Released version of an app and will display a prompt to create a new version to make the changes. This is to prevent accidentally pushing an unfinished app to the live version. +::: + +
+ +App Builder: Toolbar + +
\ No newline at end of file diff --git a/docs/versioned_docs/version-2.0.0-beta/data-sources/overview.md b/docs/versioned_docs/version-2.0.0-beta/data-sources/overview.md new file mode 100644 index 0000000000..ac0ddca349 --- /dev/null +++ b/docs/versioned_docs/version-2.0.0-beta/data-sources/overview.md @@ -0,0 +1,42 @@ +--- +id: overview +title: Overview +--- + +# Datasources : Overview + +Datasources pull in and push data to any source including databases, external APIs, or services. + +
+ +Datasources: Overview + +
+ +## Connecting datasources + +1. After logging in to ToolJet, create a new app from the dashboard + +2. There are two ways for connecting a datasource. You can connect from: + 1. **Left-sidebar**: On the left sidebar, click on the `datasource` icon and then click on the `+ add datasource` button + +
+ + Datasources: Overview + +
+ + 2. **Query Panel**: Go to the query panel at the bottom, click on the `+Add` button and then click `Add datasource` button + +
+ + Datasources: Overview + +
+ +3. Follow the steps in the **[Datasource Library](/docs/data-sources/airtable)** specific to the desired datasource + +:::info +ToolJet allows you to transform the data returned by datasources using **[Transformations](/docs/tutorial/transformations)** +::: + diff --git a/docs/versioned_docs/version-2.0.0-beta/release-management/multi-env.md b/docs/versioned_docs/version-2.0.0-beta/release-management/multi-env.md new file mode 100644 index 0000000000..fe02a74824 --- /dev/null +++ b/docs/versioned_docs/version-2.0.0-beta/release-management/multi-env.md @@ -0,0 +1,32 @@ +--- +id: multi-environment +title: Multi-Environment +--- + +
Available on: Enterprise Edition
+ +ToolJet's **multi-environment** helps in streamlining workflows, thereby minimizing the chances of errors, and enables effective application management. Using multi-environment ensures that your ToolJet application is rigorously tested before it is made available to users. + +
+ +Multi-Environment + +
+ +## Using Multi-environments + +ToolJet comes with three default **environments**: +- **Production** +- **Development** +- **Staging** + +### Switching environments + +For switching the environment, click on the **Environment Manager** on the navbar of app-builder to open the dropdown and select a environment. + +The **datasource credentials** are required to be entered specifically for every environment. + +:::tip Best Practice +Make your default environment the **Production** environment - the environment in which the users use the final versions of your developed applications. This will help ensure that the production environment has access to all of the data sources. +::: + diff --git a/docs/versioned_docs/version-2.0.0-beta/tutorial/transformations.md b/docs/versioned_docs/version-2.0.0-beta/tutorial/transformations.md index 20559211be..37540e919a 100644 --- a/docs/versioned_docs/version-2.0.0-beta/tutorial/transformations.md +++ b/docs/versioned_docs/version-2.0.0-beta/tutorial/transformations.md @@ -14,12 +14,12 @@ Transformations can be enabled on queries to transform the query results. ToolJe :::caution - Every transformation is scoped to the query it's written for. -- Actions and CSA(Component Specific Actions) cannot be called within the transformation, they can only be called within `RunJS`. +- Actions and CSA(Component Specific Actions) cannot be called within the transformation, they can only be called within **[RunJS](/docs/data-sources/run-js)** query or **[RunPy](/docs/data-sources/run-py)** query. ::: ## Transform using JavaScript -Let's write a simple transformation to compute `first_name` and `last_name` for all the customers that we fetch in the previous step. +Let's assume a query is returning the customers data with a `name` row, so we will write a simple transformation to compute `first_name` and `last_name` for all the customers. ```javascript // write your code here @@ -35,8 +35,11 @@ return data.map((row) => { The query will now look like this: +
-transform +Transformation + +
## Transform using Python @@ -89,8 +92,3 @@ We can see that `first_name` and `last_name` are added to all the rows in the `d raw data - -In the next section, we will see how we can display this data using ToolJet's built-in widgets. - - ------ \ No newline at end of file diff --git a/docs/versioned_docs/version-2.0.0-beta/widgets/overview.md b/docs/versioned_docs/version-2.0.0-beta/widgets/overview.md new file mode 100644 index 0000000000..831751cdd8 --- /dev/null +++ b/docs/versioned_docs/version-2.0.0-beta/widgets/overview.md @@ -0,0 +1,85 @@ +--- +id: overview +title: Overview +--- + +# Components : Overview + +Components are used to build the UI of the applications. They can be dragged onto the canvas from the Component Library and can be modified from the Properties Panel without needing to write any code. **[Event Handlers](/docs/actions/event-handler)** in Components allow end users to trigger queries and other application events to perform the **[Actions](/docs/category/actions-reference)**. + +## Adding components + +Components can be dragged and dropped from the Component Library(from the right side on app builder) on to the canvas. Components can be moved by simply click and hold, and can be resized from edges or borders. + +
+ +Componenets: Overview + +
+ +### Select multiple components + +For moving the **multiple components** at once, simply **shift+click**, to select multiple components. Once grouped, the components can be moved on the canvas while maintaining their relative positions. + +
+ +Componenets: Overview + +
+ +You can also create a selection triangle and move multiple components together by `click and drag` + +
+ +Componenets: Overview + +
+ +:::tip +You can also use many other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** in ToolJet to copy, cut, paste components to the canvas. +::: + +## Component properties + +Each Component can be modified and styled from the Properties Panel such as the **data** field, a toggle for **disabling** the component, or stylings like a **background color**. Properties can be modified directly or programmatically by using **[Bindings](#bindings)**, which enables you to write JavaScript code. + +
+ +Componenets: Overview + +
+ +## Component Event Handlers + +Event Handlers can be found in the Component's **Property Panel** or in the **Advanced** section of the Query. Event handlers can be used to trigger the queries, perform **[Component Specific Actions - CSA](/docs/actions/control-component)** or for setting a variable. + +:::info Actions +Check all the available Actions **[here](/docs/category/actions-reference)**. +::: + +
+ +Componenets: Overview + +
+ +## Bindings + +Bindings allow you to get dynamic data into the components. Anything inside of **`{{}}`** is evaluated as a JavaScript expression in ToolJet. + +Any arbitary JavaScript code can be written inside **`{{}}`**: +```js +{{(function () { + + })() +}} +``` +or +```js +{{components.xyz.data.key === Sun ?? true : false}} +``` + +:::tip +Check out the How-to guides like **[changing color of text in table column](/docs/how-to/access-cellvalue-rowdata)**, **[Enable/Disable a component using JavaScript](/docs/how-to/access-currentuser)**, and **[more](/docs/category/how-to)**. +::: + diff --git a/docs/versioned_sidebars/version-2.0.0-beta-sidebars.json b/docs/versioned_sidebars/version-2.0.0-beta-sidebars.json index 740740ddc9..8d59bcde3a 100644 --- a/docs/versioned_sidebars/version-2.0.0-beta-sidebars.json +++ b/docs/versioned_sidebars/version-2.0.0-beta-sidebars.json @@ -25,189 +25,236 @@ "setup/tooljet-subpath" ] }, + "tooljet-database", { "type": "category", - "label": "Product", + "label": "Datasource Catalog", "items": [ - "security", - "tracking", + "data-sources/overview", { - "type": "link", - "label": "Releases", - "href": "https://github.com/ToolJet/ToolJet/releases" - } + "type": "category", + "label": "Datasources library", + "items": [ + "data-sources/airtable", + "data-sources/s3", + "data-sources/amazonses", + "data-sources/appwrite", + "data-sources/athena", + "data-sources/baserow", + "data-sources/bigquery", + "data-sources/firestore", + "data-sources/clickhouse", + "data-sources/cosmosdb", + "data-sources/couchdb", + "data-sources/dynamodb", + "data-sources/elasticsearch", + "data-sources/gcs", + "data-sources/google.sheets", + "data-sources/graphql", + "data-sources/influxdb", + "data-sources/mailgun", + "data-sources/mariadb", + "data-sources/minio", + "data-sources/mongodb", + "data-sources/mssql", + "data-sources/mysql", + "data-sources/n8n", + "data-sources/notion", + "data-sources/openapi", + "data-sources/oracledb", + "data-sources/postgresql", + "data-sources/redis", + "data-sources/restapi", + "data-sources/rethinkdb", + "data-sources/run-js", + "data-sources/run-py", + "data-sources/saphana", + "data-sources/sendgrid", + "data-sources/slack", + "data-sources/smtp", + "data-sources/snowflake", + "data-sources/stripe", + "data-sources/twilio", + "data-sources/typesense", + "data-sources/woocommerce", + "data-sources/zendesk" + ] + }, + "tutorial/transformations" ] }, { "type": "category", - "label": "Tutorial", - "link": { - "type": "generated-index", - "title": "Getting Started with ToolJet", - "description": "A primer on getting started with building an application with ToolJet!", - "keywords": [ - "tutorial" - ] - }, + "label": "Components Catalog", "items": [ - "tutorial/creating-app", - "tutorial/adding-a-datasource", - "tutorial/building-queries", - "tutorial/transformations", - "tutorial/adding-widget", - "tutorial/actions", - "tutorial/debugger", - "tutorial/mobile-layout", - "tutorial/versioning-and-release", - "tutorial/sharing-and-deploying", - "tutorial/manage-users-groups", - "tutorial/keyboard-shortcuts", - "tutorial/multiworkspace", - "tutorial/workspace-environment-variables", - "tutorial/pages", + "widgets/overview", { "type": "category", - "label": "Dashboard", + "label": "Components library", "items": [ - "tutorial/app-menu-options" + "widgets/button", + "widgets/button-group", + "widgets/calendar", + "widgets/chart", + "widgets/checkbox", + "widgets/circular-progress-bar", + "widgets/code-editor", + "widgets/color-picker", + "widgets/container", + "widgets/custom-component", + "widgets/date-range-picker", + "widgets/datepicker", + "widgets/divider", + "widgets/dropdown", + "widgets/file-picker", + "widgets/form", + "widgets/html", + "widgets/icon", + "widgets/iframe", + "widgets/image", + "widgets/kanban", + "widgets/link", + "widgets/listview", + "widgets/map", + "widgets/modal", + "widgets/multiselect", + "widgets/number-input", + "widgets/password-input", + "widgets/pdf", + "widgets/pagination", + "widgets/qr-scanner", + "widgets/radio-button", + "widgets/range-slider", + "widgets/rich-text-editor", + "widgets/spinner", + "widgets/star", + "widgets/statistics", + "widgets/steps", + "widgets/svg-image", + "widgets/table", + "widgets/tabs", + "widgets/tags", + "widgets/text-input", + "widgets/text", + "widgets/textarea", + "widgets/timeline", + "widgets/timer", + "widgets/toggle-switch", + "widgets/tree-select", + "widgets/vertical-divider" + ] + }, + { + "type": "category", + "label": "Actions Reference", + "link": { + "type": "generated-index", + "title": "Actions Reference", + "description": "All the actions that can be performed through event handlers", + "keywords": [ + "actions", + "events" + ] + }, + "items": [ + "actions/show-alert", + "actions/logout", + "actions/run-query", + "actions/open-webpage", + "actions/go-to-app", + "actions/show-modal", + "actions/close-modal", + "actions/copy-to-clipboard", + "actions/set-localstorage", + "actions/generate-file", + "actions/set-table-page", + "actions/set-variable", + "actions/unset-variable", + "actions/control-component" ] } ] }, { "type": "category", - "label": "Datasource Reference", + "label": "App Builder", "items": [ - "data-sources/airtable", - "data-sources/s3", - "data-sources/amazonses", - "data-sources/appwrite", - "data-sources/athena", - "data-sources/baserow", - "data-sources/bigquery", - "data-sources/firestore", - "data-sources/clickhouse", - "data-sources/cosmosdb", - "data-sources/couchdb", - "data-sources/dynamodb", - "data-sources/elasticsearch", - "data-sources/gcs", - "data-sources/google.sheets", - "data-sources/graphql", - "data-sources/influxdb", - "data-sources/mailgun", - "data-sources/mariadb", - "data-sources/minio", - "data-sources/mongodb", - "data-sources/mssql", - "data-sources/mysql", - "data-sources/n8n", - "data-sources/notion", - "data-sources/openapi", - "data-sources/oracledb", - "data-sources/postgresql", - "data-sources/redis", - "data-sources/restapi", - "data-sources/rethinkdb", - "data-sources/run-js", - "data-sources/run-py", - "data-sources/saphana", - "data-sources/sendgrid", - "data-sources/slack", - "data-sources/smtp", - "data-sources/snowflake", - "data-sources/stripe", - "data-sources/twilio", - "data-sources/typesense", - "data-sources/woocommerce", - "data-sources/zendesk" + "app-builder/overview", + "app-builder/toolbar", + "app-builder/canvas", + "app-builder/left-sidebar", + "app-builder/components-library", + "app-builder/query-panel", + "tutorial/pages", + "tutorial/keyboard-shortcuts" ] }, { "type": "category", - "label": "Widget Reference", + "label": "Org Management", "items": [ - "widgets/button", - "widgets/button-group", - "widgets/calendar", - "widgets/chart", - "widgets/checkbox", - "widgets/circular-progress-bar", - "widgets/code-editor", - "widgets/color-picker", - "widgets/container", - "widgets/custom-component", - "widgets/date-range-picker", - "widgets/datepicker", - "widgets/divider", - "widgets/dropdown", - "widgets/file-picker", - "widgets/form", - "widgets/html", - "widgets/icon", - "widgets/iframe", - "widgets/image", - "widgets/kanban", - "widgets/link", - "widgets/listview", - "widgets/map", - "widgets/modal", - "widgets/multiselect", - "widgets/number-input", - "widgets/password-input", - "widgets/pdf", - "widgets/pagination", - "widgets/qr-scanner", - "widgets/radio-button", - "widgets/range-slider", - "widgets/rich-text-editor", - "widgets/spinner", - "widgets/star", - "widgets/statistics", - "widgets/steps", - "widgets/svg-image", - "widgets/table", - "widgets/tabs", - "widgets/tags", - "widgets/text-input", - "widgets/text", - "widgets/textarea", - "widgets/timeline", - "widgets/timer", - "widgets/toggle-switch", - "widgets/tree-select", - "widgets/vertical-divider" + { + "type": "category", + "label": "User Authentication", + "link": { + "type": "generated-index", + "title": "User Authentication", + "description": "Guides for setting up User Authentication and managing Single Sign-On", + "keywords": [ + "SSO", + "authentication" + ] + }, + "collapsed": true, + "items": [ + "user-authentication/user-lifecycle", + "user-authentication/general-settings", + "user-authentication/password-login", + { + "type": "category", + "label": "SSO", + "items": [ + "user-authentication/sso/github", + "user-authentication/sso/google", + { + "type": "category", + "label": "OpenId Connect", + "link": { + "type": "generated-index", + "title": "OpenId Connect", + "description": " ", + "keywords": [ + "okta", + "openid", + "azureAD" + ] + }, + "collapsed": false, + "items": [ + "user-authentication/sso/openid/setup", + "user-authentication/sso/openid/azuread", + "user-authentication/sso/openid/okta", + "user-authentication/sso/openid/google-openid" + ] + } + ] + } + ] + }, + "Enterprise/audit_logs", + "Enterprise/white-label", + "Enterprise/superadmin" ] }, { "type": "category", - "label": "Actions Reference", - "link": { - "type": "generated-index", - "title": "Actions Reference", - "description": "All the actions that can be performed through event handlers", - "keywords": [ - "actions", - "events" - ] - }, + "label": "Release Management", "items": [ - "actions/show-alert", - "actions/logout", - "actions/run-query", - "actions/open-webpage", - "actions/go-to-app", - "actions/show-modal", - "actions/close-modal", - "actions/copy-to-clipboard", - "actions/set-localstorage", - "actions/generate-file", - "actions/set-table-page", - "actions/set-variable", - "actions/unset-variable", - "actions/control-component" + "release-management/multi-environment", + "tutorial/versioning-and-release" ] }, + "marketplace", { "type": "category", "label": "How To", @@ -235,65 +282,6 @@ "how-to/loading-image-pdf-from-db" ] }, - { - "type": "category", - "label": "Enterprise", - "items": [ - "Enterprise/audit_logs", - "Enterprise/white-label", - "Enterprise/superadmin" - ] - }, - "tooljet-database", - "marketplace", - { - "type": "category", - "label": "User Authentication", - "link": { - "type": "generated-index", - "title": "User Authentication", - "description": "Guides for setting up User Authentication and managing Single Sign-On", - "keywords": [ - "SSO", - "authentication" - ] - }, - "collapsed": true, - "items": [ - "user-authentication/user-lifecycle", - "user-authentication/general-settings", - "user-authentication/password-login", - { - "type": "category", - "label": "SSO", - "items": [ - "user-authentication/sso/github", - "user-authentication/sso/google", - { - "type": "category", - "label": "OpenId Connect", - "link": { - "type": "generated-index", - "title": "OpenId Connect", - "description": " ", - "keywords": [ - "okta", - "openid", - "azureAD" - ] - }, - "collapsed": false, - "items": [ - "user-authentication/sso/openid/setup", - "user-authentication/sso/openid/azuread", - "user-authentication/sso/openid/okta", - "user-authentication/sso/openid/google-openid" - ] - } - ] - } - ] - }, { "type": "category", "label": "Contributing Guide", @@ -338,6 +326,25 @@ "contributing-guide/code-of-conduct", "contributing-guide/slackcoc" ] + }, + "security", + "tracking", + { + "type": "category", + "label": "Project Overview", + "collapsed": false, + "items": [ + { + "type": "link", + "label": "Releases", + "href": "https://github.com/ToolJet/ToolJet/releases" + }, + { + "type": "link", + "label": "Roadmap", + "href": "https://github.com/ToolJet/ToolJet/projects/2?query=is%3Aopen+sort%3Aupdated-desc" + } + ] } ] } \ No newline at end of file