[docs]: Update app-builder overview, components overview and pages (#…

…9593) * update: app builder overview * update: components overview * revamp pages.md * update components overview * update componenet config inspector to properties panel * update share.md
ToolJet · May 6, 2024 · 58901a5 · 58901a5
1 parent 1385a18
commit 58901a5
Show file tree

Hide file tree

Showing 40 changed files with 430 additions and 1,128 deletions.
diff --git a/docs/docs/app-builder/overview.md b/docs/docs/app-builder/overview.md
@@ -7,17 +7,9 @@ title: Overview
 
 ToolJet's App Builder allows you to build applications. ToolJet's app builder has the following major components:
 
-- **[Topbar](/docs/app-builder/topbar)**: 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)**, **[inspect](/docs/how-to/use-inspector)** the components, 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 from the **[datasources](/docs/data-sources/overview)**
-- **[Preview](/docs/app-builder/preview)**: Preview your application
-
-
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/appbuilderui2.png" alt="App Builder: Overview"/>
-
-</div>
+- **[Topbar](/docs/app-builder/topbar)**: Configure app settings such as application name, layout, app environment, version management, Gitsync and much more.
+- **[Canvas](/docs/app-builder/canvas)**: Arrange and customize components to build the user interface of your app.
+- **[Left-sidebar](/docs/app-builder/left-sidebar)**: Manage [pages](/docs/tutorial/pages), [inspect](/docs/how-to/use-inspector) components, queries, or variables, and [debug](/docs/app-builder/left-sidebar#debugger) errors.
+- **[Components library](/docs/app-builder/components-library)**(right sidebar): Drag and drop components, modify their properties, and style them.
+- **[Query Panel](/docs/app-builder/query-panel)**: Create, edit, and manage queries from various **[datasources](/docs/data-sources/overview)**.
+- **[Preview](/docs/app-builder/preview)**: Preview your application.
diff --git a/docs/docs/app-builder/right-sidebar.md b/docs/docs/app-builder/right-sidebar.md
@@ -15,11 +15,11 @@ The **Components Library** on the right sidebar contains all of the available co
 Check the **[Components Catalog](/docs/widgets/overview)** to know more about specific component.
 :::
 
-## Component Config Inspector
+## Properties Panel
 
-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 Component Inspector organizes settings into different sections, such as **Property** and **Styles**. 
+The Properties Panel contains all the available settings for the selected component and is where you **set values**, **update component names**, and **create event handlers**. The Properties Panel organizes settings into different sections, such as **Properties** and **Styles**. 
 
-To open the Component Config Inspector, click on the **[component handle](/docs/app-builder/canvas#arrange-components)** that is present on the top of the component including **⚙️ + Component Name** and the component inspector will open up on the right side:
+To open the Properties Panel, click on the **[component handle](/docs/app-builder/canvas#arrange-components)** that is present on the top of the component including **⚙️ + Component Name** and the Properties Panel will open up on the right side.
 
 <div style={{textAlign: 'center'}}>
 

diff --git a/docs/docs/app-builder/share.md b/docs/docs/app-builder/share.md
@@ -3,35 +3,35 @@ id: share
 title: Share
 ---
 
-ToolJet apps offer two sharing options: they can either be shared privately with workspace users or publicly by generating a shareable link. To obtain the shareable URL, you can easily do so by clicking on the Share button located on the top bar of the App builder.
+ToolJet apps offer two sharing options: private sharing with workspace users or public sharing via a generated link. To obtain the shareable URL, click the **Share** icon on the top bar of the App Builder.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/share/sharenew1.png" alt="Share modal" width='700'/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/share/share-app-v2.gif" alt="Share modal" />
 
 </div>
 
 ### Making the app public
 
-To share the app with external end users and make it accessible to anyone on the internet without requiring a ToolJet login, you can toggle on the Switch for "Make application public" in the Share modal.
+To share the app publicly and make it accessible to anyone on the internet without requiring a ToolJet login, toggle the **Make application public** switch in the Share modal.
 
 :::info
 Only released apps can be accessed using the Shareable app link.
 :::
 
-<div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'left'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/share/publicnew1.png" alt="Share modal" width='700'/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/share/make-application-public-v2.png" alt="Make Application Public" width='700'/>
 
 </div>
 
 ### Customizing the app URL
 
 By default, ToolJet will generate a unique URL for your application. However, you also have the option to edit the slug of the URL to make it more customized and user-friendly.
 
-<div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'left'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/share/edit1.png" alt="Share modal" width='700'/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/share/edit-slug-v2.png" alt="Edit Slug/URL" width='700'/>
 
 </div>
 

diff --git a/docs/docs/tutorial/pages.md b/docs/docs/tutorial/pages.md
@@ -3,11 +3,11 @@ id: pages
 title: Pages
 ---
 
-Pages allows you to have multiple pages in a single application, making your ToolJet applications more robust and user-friendly.
+Pages allow you to have multiple pages in a single application, making your ToolJet applications easier to navigate and more user-friendly.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/pages/pages.gif" alt="Multi-page app" />
+<img className="screenshot-full" src="/img/v2-beta/pages/pages-v2.gif" alt="Multi-page app" />
 
 </div>
 
@@ -17,215 +17,108 @@ You can open the **Pages Panel** by clicking on the **Pages** icon on the left s
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/pages/pages-panel2.png" alt="Pages Panel"/>
+<img className="screenshot-full" src="/img/v2-beta/pages/pages-panel-v3.png" alt="Pages Panel"/>
 
 </div>
 
 ## Panel Options
 
-- **[Add Page](#add-page)**
-- **[Settings](#settings)**
-- **[Pin](#pin)**
-- **[Search](#search)**
-
 ### Add Page
 
-On the header of the Pages Manager, the **+** button that allows you to add more pages to your application
-
-<div style={{textAlign: 'center'}}>
+- On the header of the Pages Panel, you'll find a **+** button to add more pages to your application.
+- Click the **+** button to add a new page.
+- Enter the name for the new page and press enter.
 
-<img className="screenshot-full" src="/img/v2-beta/pages/add2.png" alt="Pages Panel" width="400" />
+### Search
 
-</div>
+- You can search for a specific page using the **Search bar** on the top of the Pages Panel.
 
-On clicking the **+** button, a new page will be added, enter the name for the page and press enter.
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/newpage2.png" alt="Pages Panel" width="400" />
+### Pin
 
-</div>
+- By default, the panel will close when you click outside the panel. You can pin the **Pages panel** from the **Pin** button and the panel won't close until you **unpin** it.
 
 ### Settings
 
-From **Settings**, you can hide the **page navigation sidebar** in viewer mode, by enabling the **Disable Menu** option.
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/settings.png" alt="Pages Panel" width="400" />
+- You can hide the **page navigation sidebar** in viewer mode by enabling the **Hide Page Navigation** option within **Settings**. With this toggle enabled, the page navigation sidebar will not be visible in the viewer mode.
 
-</div>
-
-### Pin
-
-You can pin the pages panel from the **Pin** button and the panel won't close until you **unpin** it.
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/pages/pin2.png" alt="Pages Panel" width="400" />
+<img className="screenshot-full" src="/img/v2-beta/pages/disable-menu.gif" alt="Page Settings" />
 
 </div>
 
-### Search
-
-If there are many pages on the panel then you can use the **Search bar** to look for specific page.
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/search2.png" alt="Pages Panel" width="400" />
-
-</div>
 
-## Page options
+## Page Options
 
 There are several options available for a Page. To use these options, click on the kebab menu on the right of the page card.
 
-- **[Page Handle](#page-handle)**
-- **[Rename](#rename)**
-- **[Mark Home](#mark-home)**
-- **[Hide Page on app menu](#hide-page-on-app-menu)**
-- **[Duplicate](#duplicate)**
-- **[Event Handlers](#event-handlers)**
-- **[Disable Page](#disable-page)**
-- **[Delete Page](#delete-page)**
+<div style={{textAlign: 'left'}}>
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/options.png" alt="Pages Panel" width="300" />
+<img className="screenshot-full" src="/img/v2-beta/pages/options-v2.png" alt="Pages Panel" width="300" />
 
 </div>
 
 ### Page Handle
 
-Page Handle is the slug that is added at the end of the application URL. Page Handle get its default value when the page name is entered on the creation of the page. You can change the Page Handle from this option.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/page-handle.png" alt="Pages Panel" width="300" />
-
-</div>
+Page Handle is the slug that is added at the end of the application URL. By default, the page handle is the name of the page in lowercase and with spaces replaced by hyphens. You can change the page handle by clicking on the **Edit** symbol next to the page handle.
 
 ### Rename
 
-Rename option will allow you to rename the page.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/rename.png" alt="Pages Panel" width="300" />
-
-</div>
+Rename option will allow you to rename the page. Renaming a page will not change the slug/page handle.
 
 ### Mark Home
 
-Mark home option can be used to make a page the default landing page of the application, so whenever the app will be loaded the page that is marked home will be loaded.
-
-<div style={{textAlign: 'center'}}>
+Mark home option can be used to make a page the default landing page of the application. When you open the application, the page marked as home will be the first page that you see.
 
-<img className="screenshot-full" src="/img/v2-beta/pages/mark-home.png" alt="Pages Panel" width="300" />
-
-</div>
 
 :::info
 The page which is marked home will have a **Home** icon on the left of the Page Card.
-<div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'left'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/pages/home-icon.png" alt="Pages Panel" width="300" />
+<img className="screenshot-full" src="/img/v2-beta/pages/home-icon-v2.png" alt="Pages Panel" width="300" />
 
 </div>
 :::
 
 ### Hide Page on app menu
 
-Hide Page option can be used to hide a page from the **page navigation sidebar** in viewer mode.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/hide.png" alt="Pages Panel" width="300" />
-
-</div>
+Hide Page option can be used to hide a page from the **page navigation sidebar** in viewer mode. You can go to the options again and **unhide** the app from the **page navigation sidebar**. Page marked as **home** cannot be hidden.<br/>
+After hiding a page, although the page may not appear in the pages navigation sidebar, it can still be accessed by utilizing either the **switch page Action** or the **page URL**.
 
-:::info
-If a page is hidden then you'll see an **eye** icon on the right of the card.
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/hide-icon.png" alt="Pages Panel" width="300" />
-
+<img className="screenshot-full" src="/img/v2-beta/pages/accesshidden-v2.gif" alt="Pages Panel" />
 </div>
-:::
 
-You can go to the options again and **unhide** the app from the **page navigation sidebar**
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/unhide.png" alt="Pages Panel" width="300" />
-
-</div>
-
-:::info
-After hiding a page, although the page may not appear in the pages navigation sidebar, it can still be accessed by utilizing either the **switch page action** or the **page URL**. 
-
-<div style={{textAlign: 'center'}}>
-<img className="screenshot-full" src="/img/v2-beta/pages/accesshidden.gif" alt="Pages Panel" />
-</div>
-:::
 
 ### Duplicate
 
 The duplicate page option allows you to create and add a copy of the page in the pages list. The duplicated page will be an exact replica of the original page.
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/duplinew.png" alt="Pages Panel" width="300" />
-
-</div>
-
 ### Event Handlers
 
-Just like other Event Handlers on ToolJet, you can add event handlers too pages too.
+Like other ToolJet components, pages can also be attached to event handlers. For pages, the **On page load** event is available. You can use all the available actions for this event, along with the new actions added specifically for Pages.
 
-Currently, there is **On page load** event available. You can use all the available actions for this event along with the new actions added specifically for the pages:
-- **[switch page](/docs/actions/switch-page)**
-- **[set page variable](/docs/actions/set-page-variable)**
-- **[unset page variable](/docs/actions/unset-page-variable)**
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/event.png" alt="Pages Panel" width="300" />
-
-</div>
+- **[Switch Page](/docs/actions/switch-page)**
+- **[Set Page Variable](/docs/actions/set-page-variable)**
+- **[Unset Page Variable](/docs/actions/unset-page-variable)**
 
 ### Disable Page
 
-Disable page option can be used to disable a page. A disabled page won't be accessible in the viewer mode. 
+Disable Page Option can be used to disable a page. A disabled page won't be accessible in the viewer mode. 
 
 **Note:** Page marked as **home** can't be disabled.
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/disable.png" alt="Pages Panel" width="300" />
-
-</div>
-
 ### Delete Page
 
 You can **delete** a page from an application using this option.
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/delete.png" alt="Pages Panel" width="300" />
-
-</div>
-
-:::info
-If a page is **Marked Home** then you won't be able to delete and the delete page option will be disabled.
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/pages/delete-disable.png" alt="Pages Panel" width="300" />
-
-</div>
-:::
+**Note:** Page marked as **home** cannot be deleted and the delete page option will be disabled.
 
 ## Exposed variables
 
 | Variable | Description |
 | ----------- | ----------- | 
-| `handle` | The `handle` represents the slug of the `page` within an app. In the URL `https://app.tooljet.com/applications/crm2/home`, `crm2` refers to the app name, and `home` corresponds to the handle. The handle is automatically set when a page is added, and you can also [rename](/docs/tutorial/pages#page-handle) the `handle` from the Page options. To access the value of the `handle` variable dynamically, use **`{{page.handle}}`**|
-| `name` | The `name` indicates the name of the page set during its creation. To access the value of the `name` variable dynamically, use **`{{page.name}}`** |
-| `id` | Each page in the ToolJet app receives a unique identifier upon creation. To access the value of the `id` dynamically, use **`{{page.id}}`** |
-| `variables` | `variables` is an object that contains all the variables created for a specific page using the **[Set Page variable](/docs/actions/set-page-variable)** action. The value of a specific variable can be accessed dynamically using **`{{page.variables.<pagevariablename>}}`**, where `<pagevariablename>` refers to the variable created for that page using the Set Page variable action. |
+| `handle` | The `handle` represents the slug of the `page` within an app. In the URL `https://app.tooljet.com/applications/crm2/home`, `crm2` refers to the app name, and `home` corresponds to the handle. The handle is automatically set when a page is added, and you can also [rename](/docs/tutorial/pages#rename) the `handle` from the Page options. To access the value of the `handle` variable dynamically, use `{{page.handle}}`|
+| `name` | The `name` indicates the name of the page set during its creation. To access the value of the `name` variable dynamically, use `{{page.name}}` |
+| `id` | Each page in the ToolJet app receives a unique identifier upon creation. To access the value of the `id` dynamically, use `{{page.id}}` |
+| `variables` | `variables` is an object that contains all the variables created for a specific page using the **[Set Page Variable](/docs/actions/set-page-variable)** action. The value of a specific variable can be accessed dynamically using `{{page.variables.<pageVariableName>}}`, where `<pageVariableName>` refers to the variable created for that page using the Set Page variable action. |