GITBOOK-178: Included Demo Apps, Demos added on Data Sources, Workspace, Roles & Permission, Desktop Navigation

adnanqaops · gitbook-bot · commit 484b6b1ccb71 · 2024-08-15T12:57:15.000Z
diff --git a/docs/build-applications/app-editor/visual-components/file-upload.md b/docs/build-applications/app-editor/visual-components/file-upload.md
@@ -97,7 +97,10 @@ Files uploaded via the file upload component are stored in browser cache memory
 
 * `parsedValue`: A list of the value of the parsed files.
 
-
+### Demo ( File Upload & File Viewer )
 
 {% embed url="https://app.supademo.com/demo/clyyiwhcr1zh6z9kdrqgzyn4y" %}
 
+### Demo ( Inserting CSV File data into Database )
+
+{% embed url="https://demos.lowcoder.cloud/demo/clzia4nbk1ku89x77adrr1fes" %}
diff --git a/docs/build-applications/app-editor/visual-components/image.md b/docs/build-applications/app-editor/visual-components/image.md
@@ -35,3 +35,7 @@ Toggle **Support click preview** in the **Properties** tab to allow users to pre
 ## Set the style of an image
 
 In **Properties** > **Style**, change border color and set **Border radius** in pixels or by percentage.
+
+## Insert/Retrieve an Image into/from Database
+
+{% embed url="https://demos.lowcoder.cloud/demo/clzilkh8x1ozt9x77uabp0vfa" %}
diff --git a/docs/build-applications/create-a-new-app/app-s-navigation.md b/docs/build-applications/create-a-new-app/app-s-navigation.md
@@ -10,7 +10,9 @@ To achieve this and create a "collection of App Screens," Lowcoder has the so-ca
 
 Lowcoder's "App Navigation" feature allows you to aggregate multiple app screens into a cohesive, multi-page application with a fully functional menu. This feature is available in both desktop and mobile variants, with hierarchical navigation on desktop and flat navigation on mobile. You can create menus manually or dynamically using data queries.
 
-{% embed url="https://demos.lowcoder.cloud/demo/clyso4e9b0uwkz9kd066pvs7n" %}
+## **Demo ( Desktop Navigation )**
+
+{% embed url="https://demos.lowcoder.cloud/demo/clztrrle711us4oytvazqslk8" %}
 
 ## **Steps to Create an App Navigation**
 
@@ -34,6 +36,10 @@ Lowcoder's "App Navigation" feature allows you to aggregate multiple app screens
 
 On the Lowcoder Admin homepage, click **New** and select **Navigation** to create a navigation page.
 
+## **Demo ( Mobile Navigation )**
+
+{% embed url="https://demos.lowcoder.cloud/demo/clyso4e9b0uwkz9kd066pvs7n" %}
+
 ## Menu items
 
 In the **Navigation** editor on the right panel, click **+ New** to add menu items.
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/apis-as-datasource/google-sheets.md b/docs/connect-your-data/data-sources-in-lowcoder/apis-as-datasource/google-sheets.md
@@ -46,3 +46,7 @@ Follow the steps below:
 6.  To access and manipulate data in your app, you can fill in the **Spreadsheet** id and **Sheet Name** in a query editor as follows.
 
     The available methods are **Read Data**, **Append Row**, **Update Row**, and **Clear Row**.
+
+## Demo
+
+{% embed url="https://demos.lowcoder.cloud/demo/clzmujgro01mhgumtrlpvvdal" %}
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/apis-as-datasource/graphql.md b/docs/connect-your-data/data-sources-in-lowcoder/apis-as-datasource/graphql.md
@@ -29,6 +29,10 @@ For detailed information, see SSL Cert Verification.
 
 For detailed information, see Forward cookies.
 
+## Demo
+
+{% embed url="https://demos.lowcoder.cloud/demo/clzrd2cwp0a3n4oytjxdrml9t" %}
+
 ## Create a GraphQL query
 
 You can create GraphQL queries in two ways:
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/nosql-databases/mongodb.md b/docs/connect-your-data/data-sources-in-lowcoder/nosql-databases/mongodb.md
@@ -20,3 +20,7 @@ Follow the steps below:
    * **URI**: URI
 4. (Optional) Click **Test connection** to check whether the new data source is successfully connected.
 5. Click **Save**, and it will be saved to your data source library.
+
+## Demo
+
+{% embed url="https://demos.lowcoder.cloud/demo/clzmrsncw00abgumtam3k9iwi" %}
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/mysql.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/mysql.md
@@ -19,6 +19,6 @@ Follow the steps below:
 4. (Optional) Click **Test connection** to check whether the new data source is successfully connected.
 5. Click **Save**, and it will be saved to your data source library.
 
-## Query a MySQL data source
+## Query a MySQL data source ( Demo )
 
-Create `query1` and select the recently created data source. Insert a query and then click ▶ **Run**.
+{% embed url="https://demos.lowcoder.cloud/demo/clzgz1jrv17ci9x77c22hjlog" %}
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/postgresql.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/postgresql.md
@@ -18,3 +18,5 @@ Follow the steps below:
 3. Set its name and configure general settings, including host, port, and database name. You can also set the user name and a password.
 4. (Optional) Click **Test connection** to check whether the new data source is successfully connected.
 5. Click **Save**, and it will be saved to your data source library.
+
+{% embed url="https://demos.lowcoder.cloud/demo/clzmno7d50b0prfaixv9i8nxc" %}
diff --git a/docs/lowcoder-overview/the-hello-world-walk.md b/docs/lowcoder-overview/the-hello-world-walk.md
@@ -68,6 +68,8 @@ Based on your settings you can invite special users only or make the app public
 
 After all tests are done, your app is ready to hit the market. You can use the "Preview Button" to explore how your App looks for a standard logged in user.
 
-<figure><img src="../.gitbook/assets/App Editor  Preview.png" alt=""><figcaption></figcaption></figure>
-
 With the same button, but by help of the small arrow on the right, you can finally publish the application in it's current state. Make sure, the app is then accessible (Share menu) as you expect. (public or for selected users only)
+
+We have created an App that contains all the useful demos about Lowcoder key Concepts and different Components. You may have a headstart by going through these Demos on following link :&#x20;
+
+{% embed url="https://app.lowcoder.cloud/apps/66bccb8972ed3d1d42a4510f/view_marketplace" %}
diff --git a/docs/workspaces-and-teamwork/members-and-groups.md b/docs/workspaces-and-teamwork/members-and-groups.md
@@ -82,3 +82,7 @@ Group admins can add members to groups.
 The Administrator of a User Group can set an **Admin** or **Member** role for each group member. The permissions are listed in the table below.
 
 <table><thead><tr><th width="145">Role</th><th>Permissions</th></tr></thead><tbody><tr><td>Admin</td><td><ul><li>Change group name</li><li>Delete groups</li><li>Manage group members and set their roles</li><li>View group members</li></ul></td></tr><tr><td>Member</td><td>View group members</td></tr></tbody></table>
+
+## Demo
+
+{% embed url="https://demos.lowcoder.cloud/demo/clzsa3jx40j8h4oytd74ifxtj" %}
diff --git a/docs/workspaces-and-teamwork/workspaces.md b/docs/workspaces-and-teamwork/workspaces.md
@@ -57,6 +57,10 @@ It is possible to include global CSS styles to fine-tune the visuals of Apps. Al
 
 <figure><img src="../.gitbook/assets/Admin  Global Includes.png" alt=""><figcaption></figcaption></figure>
 
+### Demo
+
+{% embed url="https://demos.lowcoder.cloud/demo/clzs4nglo0g8s4oyt0xq85bqd" %}
+
 ### Further administrative Settings
 
 On self-hosted installations, you can set up thresholds for workspaces with the help of [ENV Variables](https://github.com/lowcoder-org/lowcoder/tree/main/deploy/docker#configuration)&#x20;
