fix: DO NOT MERGE - Appsmith Training Docs

website/docs/training/day-1-agenda.md

@@ -0,0 +1,60 @@
+---
+title: "Agenda"
+hide_title: false
+---
+
+# Day 1: Appsmith Training Agenda
+## Introduction and Core Concepts
+<dd>
+
+Discover what Appsmith is, its key features, and how it empowers you to build applications quickly.
+
+</dd>
+
+### [1. Connecting and Managing Datasources](/training/session-1#connecting-and-managing-datasources)
+<dd>
+
+- **Datasource Setup:** Learn to connect various datasources such as REST APIs and databases.
+- **Hands-On:** Follow step-by-step instructions to add and configure your datasource.
+
+</dd>
+
+### [2. Widget Essentials and Displaying Data](/training/session-1#widget-essentials-and-displaying-data)
+<dd>
+
+- **Core Widgets:** Explore essential widgets like Table, Text, Button, Select, and Container.
+- **Data Binding:** Understand how to bind data to widgets for dynamic display and interactivity.
+
+</dd>
+
+### [3. Customizing and Enhancing Functionality with Code](/training/session-2#customizing-and-enhancing-functionality-with-code)
+<dd>
+
+- **Custom Code Integration:** Use JavaScript to extend widget functionality and manipulate data.
+- **Interactive Demo:** Practice by writing custom code snippets to modify widget behaviors and data output.
+
+</dd>
+
+### [4. Building CRUD Interfaces and Interactive Dashboards](/training/session-2#building-crud-interfaces-and-interactive-dashboards)
+<dd>
+
+- **CRUD Operations:** Implement functionalities to Create or Update data with Forms
+- **Dashboard Assembly:** Combine multiple widgets like Chart and Statbox to create an interactive Dashboard
+
+</dd>
+
+### [5. Task: Create a Basic App](https://training.app.appsmith.com/app/task-1/home-67bdd31349bf245ac087e8fe)
+<dd>
+
+- **Hands-On Challenge:** Build a basic application integrating datasources, widgets, and custom code.
+- **Objective:** Apply all the concepts learned to create a functional app from scratch.
+
+</dd>
+
+### 6. Get a sneak peek into Day 2 Agenda 
+<dd>
+
+  - **Git Integration:** Understand version control for collaborative development.
+  - **Custom Widgets:** Learn how to create your own widget
+
+</dd>

website/docs/training/day-2-agenda.md

@@ -0,0 +1,72 @@
+---
+title: "Agenda"
+hide_title: false
+---
+
+# Day 2: Appsmith Training Agenda
+## Advanced Development and Collaboration
+<dd>
+
+Enhance your Appsmith skills by exploring version control, CI/CD, advanced integrations, and custom widgets.
+
+</dd>
+
+### [1. Version Control: Development Process and Collaboration](/training/session-3#version-control-development-process-and-collaboration)
+<dd>
+
+- **Git Integration:** Learn how to integrate Appsmith with Git for version control.
+- **Branching & Merging:** Understand how to create branches, commit changes, and merge updates.
+- **Collaborative Development:** Work with teams using Appsmith’s built-in collaboration features.
+
+</dd>
+
+### [2. Configuring Multiple Environments and Setting Up CI/CD Pipelines](/training/session-3#configuring-multiple-environments-and-setting-up-cicd-pipelines)
+<dd>
+
+- **Environment Variables:** Learn how to configure multiple environments like Development, Staging, and Production.
+- **CI/CD Pipelines:** Automate deployments and manage changes across different environments.
+
+</dd>
+
+### [3. Advanced JavaScript and API Integrations](/training/session-4#advanced-javascript-and-api-integrations)
+<dd>
+
+- **JS Libraries:** Extend Appsmith’s capabilities with custom JavaScript libraries.
+- **API Chaining & Transformations:** Use JavaScript to modify API responses before displaying data.
+- **Error Handling & Debugging:** Learn best practices for handling API failures and debugging in Appsmith.
+
+</dd>
+
+### [4. Embedding Appsmith Applications and Facilitating Communication](/training/session-4#embedding-appsmith-applications-and-facilitating-communication)
+<dd>
+
+- **Embedding Apps:** Learn how to embed Appsmith apps into external platforms or other web apps.
+- **Cross-App Communication:** Enable seamless data sharing between different Appsmith applications.
+
+</dd>
+
+### [5. Creating Custom Widgets](/training/session-4#creating-custom-widgets)
+<dd>
+
+- **Understanding Custom Widgets:** Learn how to build custom widgets using JavaScript and Appsmith’s widget APIs.
+- **Data Models & Events:** Send actions and trigger events to enhance widget behavior.
+
+</dd>
+
+### [6. Hands-On Task](https://community.appsmith.com/tutorial/how-create-your-own-custom-navigation-bar-nested-items-and-icons)
+<dd>
+
+* **Objective:** Build an advanced app using custom widgets and version control it with GIT.
+* **Challenge:** Create a custom navigation bar that is dynamic based on the data model. When an item is clicked, the app should navigate to the corresponding Appsmith page.
+* Share us the applications that you create and we will publish them in our [community](https://community.appsmith.com)
+
+</dd>
+
+### 7. Get a sneak peek into Day 3 Agenda
+<dd>
+
+- **Workflows & Automation:** Learn how to design and manage complex workflows.
+- **Reusable Code with Appsmith Packages:** Explore how to reuse code across multiple applications.
+- **Granular Access Control:** Understand how to set up role-based access, programmatic permissions, and secure your applications.  
+
+</dd>

website/docs/training/day-3-agenda.md

@@ -0,0 +1,46 @@
+---
+title: "Agenda"
+hide_title: false
+---
+
+# Day 3: Appsmith Training Agenda
+## Enterprise Features
+<dd>
+
+Enhance your Appsmith expertise by exploring **reusability**, **workflow automation**, **access control**, and **audit logging** to build secure, scalable applications.
+
+</dd>
+
+### [1. Reusability with Appsmith Packages](/training/session-5#reusability-with-appsmith-packages)
+<dd>
+
+* **Introduction to Appsmith Packages:** Learn how to create and use reusable JS Objects and Queries.
+* **Best Practices:** Understand how to structure your apps efficiently using reusable components.
+* **Hands-On:** Create a package and integrate it into multiple applications.
+
+</dd>
+
+### [2. Designing and Managing Complex Workflows](/training/session-5#designing-and-managing-complex-workflows)
+<dd>
+
+* **Human-in-the-Loop Workflows:** Implement workflows where manual approvals or interventions are required before proceeding.  
+* **Automating Tasks with CronJobs:** Schedule recurring tasks like data refreshes, report generation, or background processing by triggering APIs or database queries at set intervals
+
+</dd>
+
+### [3. Implementing Granular Access Control and Programmatic Permissions](/training/session-6#implementing-granular-access-control-and-programmatic-permissions)
+<dd>
+
+* **Role-Based Access Control (RBAC):** Configure user roles and permissions for better security.
+* **Programmatic Permissions:** Use dynamic access control based on user roles and conditions
+
+</dd>
+
+### [4. Utilizing Audit Logs for Monitoring and Compliance](/training/session-6#utilizing-audit-logs-for-monitoring-and-compliance)
+<dd>
+
+* **Understanding Audit Logs:** Track user activities and changes made within the application.
+* **Compliance & Security:** Maintain logs for audits, troubleshooting, and security monitoring.
+* **Hands-On Task:** View, filter, and analyze logs to investigate user actions.
+
+</dd>

website/docs/training/session-1.md

@@ -0,0 +1,159 @@
+---
+title: Session 1
+hide_title: false
+---
+
+<!-- vale off -->
+
+## Getting Started
+
+1. Sign up on this instance: [Training Instance](https://training.app.appsmith.com/user/signup) (Ignore if already done)
+
+2. Now you will be guided through the Onboarding. Select your profiency with Appsmith.
+
+3. Click on **Skip this step** so that we can head to the editor of your Application
+
+
+##  Connecting and Managing Datasources
+1. **REST API**
+<dd>
+
+* Click on the Datasoure icon, located third from the bottom of the left sidebar, and then click on the button **Bring your data** and select Datasource **REST API**.
+* Enter **https://mock-api.appsmith.com** in the field
+* Click **Save URL** and you will be taken to the Datasource configuration page
+* Name the Datasource as **Mock API** and go ahead and click Save.
+* Now rename the API as **getUsers** and append the path **/users** to the url 
+* Click on Run and see the results below on the page
+* Great!! You have successfully created an REST API Datasource and ran an API on top of it
+
+</dd>
+
+2. **PostgreSQL**
+<dd>
+
+* Now go back to Data on the sidebar and Click on the **+** symbol on the top, next to **Datasources in your workspace**
+* Select **PostgreSQL** and you will be taken to the configuration page
+* Now fill in the follow credentials as seen below
+    ```jsx
+    Host: mockdb.internal.appsmith.com
+    Port: 5432
+    Database: users
+    User: users
+    Password: new-users-db-pass
+    ```
+* Click on **Test configuration** to verify if the credentials are valid to successfully connect to the datasource.
+* Rename this Datasource as **Postgres DB** and go ahead and click Save.
+* You will be able to see the schema of your table, and also preview of the data on right side for each table.
+* Now select the table name **public.users** click on the button **New Query** on the top right
+* There will be a default query already filled in. You can go ahead and click on Run and see the results below on the page
+* On the bottom right side, you will also be able to see the Schema of each table in detail, like Column type, Primary key, etc.
+* Great!! You have successfully created a Postgres Datasource and a Query on top of it
+
+</dd>
+
+## Workspaces and Sharing Access
+
+<dd>
+
+1. In the Editor mode, on the top, you will see your App name as **My First Application**. Click on it and Rename it as **Activity 1**.
+2. Now click on the Appsmith Logo on the top left corner of the page, and it will take you back to the Appsmith Workspaces page.
+3. You will be able to see your Workspaces and Applications and what other workspaces you have access to.
+4. On the top-rightmost, next to the **Create new** button, you will see a three-dot menu. Click on it and you will see your workspace name.
+5. Click on the Edit icon next to it and rename your workspace as **\<Name\>-Training-Workspace**
+6. Also you can share access to your workspace by clicking on the **Share** button. Type in **Training Admin** and select the Administrator role and click Invite. This will allow us to view your Applications and help you in the case of any issue you face during the training.
+7. On the top right of the workspace, there is an info icon. From that click on **Chat with us**. This is our support assistant that can help you on any issues. Go ahead and send a test message
+
+</dd>
+
+## Widget Essentials and Displaying Data
+
+1. **Table Widget**
+
+<dd>
+
+* Introduce a Table widget from the Widget pane on the left.
+* Connect data from the table settings on the right, and select the datasource **Postgres DB** which we just created.
+* Select the table **public.users** and the searchable column as **name**, and click **Connect data**
+* Now go to the **Queries** Tab on the left and check out the automatically generated CRUD queries for your database
+* Customise the columns like setting visibility, re-ordering the columns and even changing the column type
+* See how the table is connected to your Data and that it supports Server Side Pagination
+* Play around with the inline editing and add row to table
+
+</dd>
+
+2. **Text Widget**
+
+<dd>
+
+* Drag and drop a text widget on to the canvas
+* Edit the Text from its settings on the right, and set the value it as **My User Database**
+* From its Style tab, you can customise many things like the size or the color of the Text widget
+* Set the Font size as **L** (Large) and select the Text color as the first **Theme color**
+
+</dd>
+
+3. **Button Widget**
+
+<dd>
+
+* Introduce a Button widget on to the canvas
+* Set the button value as Refresh, and possibly find an icon from the Style tab to suit this Action
+* You can also set the type of the button between Primary, Secondary and Teritary options
+* Finally connect the onClick of the widget to the Table’s **Select_public_users1** query
+
+</dd>
+
+4. **Select Widget**
+
+<dd>
+
+* Create an SQL query named **getGenderValues** that retrieves all the distinct values of the table from the “gender“ column
+<details>
+  <summary>Show Hint</summary>
+  <div>
+    ```jsx
+    Select DISTINCT(gender) from public.users
+    ```
+  </div>
+</details>
+
+* Click on **Display on UI** and choose Select widget to bind the data and it to the UI.
+* Now update the Table’s **Select_public_users1** query and append to the Where clause to filter based on gender
+<details>
+  <summary>Show Hint</summary>
+  <div>
+    ```jsx
+    WHERE “name” ilike ‘%{{Table1.searchText}}%’
+    AND “gender” ilike '{{Select1.selectedOptionValue}}%'
+    ```
+  </div>
+</details>
+
+* Connect the onOptionChange event of the Select Widget to trigger the Table’s **Select_public_users1** query
+
+</dd>
+
+5. **Container Widget**
+
+<dd>
+
+* Drag and place the 4 widgets Table, Text, Button and Select on the canvas however you want
+* You can also drag and highlight all the widgets to select them, and you will see a minibar pop up
+* Select the last option, to group these widgets inside a container
+* Now you can easily move it around the canvas and align it based on your need
+* Like other widgets, you can also configure its height either as **Fixed** or **Auto Height**
+
+</dd>
+
+## Theming
+
+<dd>
+
+* Go to the bottom left Corner and click on the **:gear:** button that will take you to the App Settings
+* Click on Theme and explore changing the primary color, app border radius and shadow
+* Notice how you will see the changes happening across your widgets in real time based on your theming changes
+
+</dd>
+
+## Deploy App
+Go ahead and click on the Deploy button on the top right and see your App in deployed mode