From c81ef79b91982b18428a33ef27351d3490225ea7 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Mon, 18 Mar 2024 12:19:56 +0530 Subject: [PATCH 01/43] fix: DO NOT MERGE --- website/docs/training/sample.md | 0 website/sidebars.js | 11 +++++++++++ 2 files changed, 11 insertions(+) create mode 100644 website/docs/training/sample.md diff --git a/website/docs/training/sample.md b/website/docs/training/sample.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/website/sidebars.js b/website/sidebars.js index a1e1ebf77c..63349a607b 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -233,6 +233,17 @@ const sidebars = { } ], }, //getting started section end + + //training start + { + type: 'category', + collapsed: false, + label: 'Training', + items: [ + 'training/sample' + ] + }, //training end + { //Data start type: 'category', From 0be9fffc6de556e4bf877717e142fbe7b7a655e6 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Mon, 18 Mar 2024 14:13:56 +0530 Subject: [PATCH 02/43] Made changes to Sidebar and introduced Session 1 and Session 2 for Appsmith Training topics. Also removed Searchbar and Footer to avoid distraction --- website/docs/training/session-1.md | 113 +++ website/docs/training/session-2.md | 100 +++ website/sidebars.js | 803 +--------------------- website/src/theme/DocItem/Footer/index.js | 2 - website/src/theme/SearchBar.js | 2 +- 5 files changed, 217 insertions(+), 803 deletions(-) create mode 100755 website/docs/training/session-1.md create mode 100644 website/docs/training/session-2.md mode change 100644 => 100755 website/sidebars.js mode change 100644 => 100755 website/src/theme/DocItem/Footer/index.js mode change 100644 => 100755 website/src/theme/SearchBar.js diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md new file mode 100755 index 0000000000..9cab3a92e1 --- /dev/null +++ b/website/docs/training/session-1.md @@ -0,0 +1,113 @@ +--- +title: Session 1 +hide_title: false +--- + + + +## Getting Started + +1. Sign up on this instance: [Optum Demo Instance](https://optum-demo.app.appsmith.com/) (Ignore if already done) + +2. Create a workspace of your own and name it as **\-Training-Workspace** + +## Datasources +1. **REST API** +
+ +* Go to Data on the sidebar and Click on the button **Bring your data** and select Datasource **REST API**. +* Enter **https://mock-api.appsmith.com** in the field +* Click **Save it as a datasource** 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 API Datasource and a Query on top of it + +
+ +2. **PostgreSQL** +
+ +* 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 + ``` +* Also rename this Datasource as **Postgres** 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 inside each table. +* Now 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 +* Great!! You have successfully created a Postgres Datasource and a Query on top of it + +
+ +## Widgets + +1. Table Widget +
+ +* Introduce a Table widget +* Connect it to your datasource +* Checkout the auto generated CRUD queries +* See how the table supports Server Side Pagination +* Play around with the inline editing and add row to table + +
+ +2. Button Widget +
+ +* Introduce a Button widget on top of the table placed on the right +* Name the button as Refresh, and possibly find an icon from the style to suit the Action +* Connect the onClick of the widget to the Table’s Select Query + +
+ +3. Select Widget +
+ +* Introduce a Select widget +* Enable JS binding, and hardcode inside it to have label and value for male and female +* Update the Table’s Select query to have an additional Where clause to filter based on gender +```jsx +WHERE “name” ilike ‘%{{Table1.searchText}}%’ AND “gender” ilike '{{Select1.selectedOptionValue}}%' +``` +* Connect the onChange of the Select Widget to trigger the Table’s Select Query + +
+ +4. Container Widget +
+ +* Place the 3 widgets Table, Button and Select as per your choice +* Click and highlight all the widgets to select them, and you will see a minibar popup +* Select the last option, ie the Container widget to wrap these widgets inside a container +* Now move it around the canvas to align it centrally + +
+ +## Theming + +
+ +* 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 + +
+ +## Deploy App +Go ahead and click on the Deploy button on the top right and see your App in deployed mode + +## Share App + +
+ +- Share to [tom@appsmith.com](mailto:tom@appsmith.com) and [sujoy@appsmith.com](mailto:sujoy@appsmith.com) as App Viewer +- Also try making it a public App by enabling **Make application public** and try opening it in incognito mode + +
\ No newline at end of file diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md new file mode 100644 index 0000000000..da9aa6ca19 --- /dev/null +++ b/website/docs/training/session-2.md @@ -0,0 +1,100 @@ +--- +title: Session 2 +hide_title: false +--- + + + +## Getting Started + +1. Sign up on this instance: [Optum Demo Instance](https://optum-demo.app.appsmith.com/) (Ignore if already done) + +2. Create a workspace of your own and name it as **\-Training-Workspace** + +3. Go to this Workspace and fork **Activty 1** App to your Workspace (Ignore if you already having existing App) + +## JSObjects + +
+ +* Create a JSObject function and name it as **Utils** +* Introduce a variable with some initial value inside it +```jsx +currentDate: new Date(), +``` +* Introduce a function to get Select Querys data +```jsx +getUserData: () ⇒ { + return SelectQuery.data +}, +``` +* Introduce a function to get current age from date of birth +```jsx +getUserAge: (dob) ⇒ { + return moment(this.currentDate).dif(moment(dob), ‘years’) +} +``` +* Add new column in table widget and name it **Age** +* Connect the value of the column to the getUserAge function +`{{Utils.getUserAge(currentRow.dob)}}` + +
+ +## Forms + +
+ +* Introduce a Form onto the canvas and align it on the right side of the Table +* Add input and select widgets for all the relevant Table columns you would want to update for like +```jsx +Name, Gender, Date of Birth, Phone, Email and Country +``` +* Rename the widgets inside the Form for better reference +* Change the existing **Update Users** Query to use the Form data instead +```jsx +UPDATE public.users SET +"gender"= '{{Form1.data.gender}}', +"dob"= '{{Form1.data.dob}}', +"phone"= '{{Form1.data.phone}}', +"email"= '{{Form1.data.email}}', +"country"= '{{Form1.data.country}}', +"name"= '{{Form1.data.name}}', +"updated_at"= '{{new Date()}}' +WHERE "id"= {{Table1.updatedRow.id}}; +``` +* Rename the button label inside the Form to `Update Details` +* Connect the onClick of the button to the Update Query +* Inside the success of the onClick, connect it to Select Query + +
+ +## Charts + +
+ +* Create a new Page +* Introduce a Chart on the canvas +* Create a Query to show all the males and females distribution +`SELECT gender, COUNT(*) FROM public."users" group by gender;` +* Notice that chart that takes values only in x,y format. +* Create a JSObject and call it **Utils**. Introduce a function that formats the Query’s data in x & y format +```jsx +getChartDataByGender: () => { + return Query1.data.map(item => ({ x: item.gender, y: item.count }); +} +``` +* Connect the JS Object function directly to the Chart’s source data `{{Utils.getChartDataByGender()}}` + +
+ +## Deploy the App +Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made + +## Share App +Share the App (If not done already earlier) +
+ +- Share to [tom@appsmith.com](mailto:tom@appsmith.com) and [sujoy@appsmith.com](mailto:sujoy@appsmith.com) as App Viewer +- Also try making it a public App by enabling **Make application public** and try opening it in incognito mode + +
\ No newline at end of file diff --git a/website/sidebars.js b/website/sidebars.js old mode 100644 new mode 100755 index 63349a607b..55af191773 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -1,813 +1,16 @@ const sidebars = { tutorialSidebar: [ - { - //getting started section start - type: 'category', - collapsed: false, - label: 'Get Started', - items: [ - 'intro', - { - type: 'category', - label: 'Tutorial', - link: { type: 'doc', id: 'getting-started/tutorials/start-building' }, - items: [ - 'getting-started/tutorials/the-basics/connect-query-display-data', - 'getting-started/tutorials/the-basics/work-with-data-in-ui', - 'getting-started/tutorials/the-basics/write-js-code', - ], - }, - - { - type: 'category', - label: 'Self Hosting', - link: { type: 'doc', id: 'getting-started/setup/README' }, - items: [ - { - type: 'category', - label: 'Install Appsmith', - link: { - type: 'doc', - id: 'getting-started/setup/installation-guides/README', - }, - items: [ - { - type: 'category', - label: 'Docker', - link: { - type: 'doc', - id: 'getting-started/setup/installation-guides/docker/README', - }, - items: [ - 'getting-started/setup/installation-guides/docker/migrate', - ], - }, - { - type: 'category', - label: 'Kubernetes', - link: { - type: 'doc', - id: 'getting-started/setup/installation-guides/kubernetes/README', - }, - items: [ - 'getting-started/setup/installation-guides/kubernetes/configure-high-availability', - 'getting-started/setup/installation-guides/kubernetes/publish-appsmith-online', - 'getting-started/setup/installation-guides/kubernetes/migrate-to-be-chart', - 'getting-started/setup/installation-guides/kubernetes/migrate-to-helm-chart-v2-ce', - 'getting-started/setup/installation-guides/kubernetes/migrate-k8s', - ], - }, - 'getting-started/setup/installation-guides/aws-ami', - { - type: 'category', - label: 'AWS ECS', - link: { - type: 'doc', - id: 'getting-started/setup/installation-guides/aws-ecs/README', - }, - items: [ - 'getting-started/setup/installation-guides/aws-ecs/aws-ecs-on-ec2', - 'getting-started/setup/installation-guides/aws-ecs-on-fargate', - 'getting-started/setup/installation-guides/aws-ecs/setup-postgresql-aws-ecs', - 'getting-started/setup/installation-guides/aws-ecs/set-up-high-availability', - 'getting-started/setup/installation-guides/aws-ecs/migrate-bind-mount-to-efs', - ], - }, - 'getting-started/setup/installation-guides/azure-aci', - { - type: 'category', - label: 'Google Cloud Run', - link: { - type: 'doc', - id: 'getting-started/setup/installation-guides/google-cloud-run', - }, - items: [ - 'getting-started/setup/installation-guides/google-cloud-run/manage-traffic', - 'getting-started/setup/installation-guides/google-cloud-run/setup-to-integrate-sso', - ], - }, - 'getting-started/setup/installation-guides/digitalocean', - 'getting-started/setup/installation-guides/heroku', - 'getting-started/setup/installation-guides/ansible', - 'getting-started/setup/installation-guides/air-gapped', - ], - }, - { - type: 'category', - label: 'Configure Instance', - link: { - type: 'doc', - id: 'getting-started/setup/instance-configuration/README', - }, - items: [ - { - type: 'category', - label: 'Authentication', - link: { - type: 'doc', - id: 'getting-started/setup/instance-configuration/authentication/README', - }, - items: [ - 'getting-started/setup/instance-configuration/authentication/google-login', - 'getting-started/setup/instance-configuration/authentication/github-login', - { - type: 'category', - label: 'SAML SSO', - link: { - type: 'doc', - id: 'getting-started/setup/instance-configuration/authentication/security-assertion-markup-language-saml/README', - }, - items: [ - 'getting-started/setup/instance-configuration/authentication/security-assertion-markup-language-saml/active-directory', - 'getting-started/setup/instance-configuration/authentication/security-assertion-markup-language-saml/auth0', - 'getting-started/setup/instance-configuration/authentication/security-assertion-markup-language-saml/okta', - 'getting-started/setup/instance-configuration/authentication/security-assertion-markup-language-saml/ping-identity', - ], - }, - { - type: 'category', - label: 'OpenID Connect SSO', - link: { - type: 'doc', - id: 'getting-started/setup/instance-configuration/authentication/openid-connect-oidc/README', - }, - items: [ - 'getting-started/setup/instance-configuration/authentication/openid-connect-oidc/active-directory', - 'getting-started/setup/instance-configuration/authentication/openid-connect-oidc/aws-cognito', - 'getting-started/setup/instance-configuration/authentication/openid-connect-oidc/auth0', - 'getting-started/setup/instance-configuration/authentication/openid-connect-oidc/okta', - 'getting-started/setup/instance-configuration/authentication/openid-connect-oidc/ping-identity', - ], - }, - 'getting-started/setup/instance-configuration/authentication/json-web-tokens-jwt', - ], - }, - { - type: 'category', - label: 'Email', - link: { - type: 'doc', - id: 'getting-started/setup/instance-configuration/email/README', - }, - items: [ - 'getting-started/setup/instance-configuration/email/gmail', - 'getting-started/setup/instance-configuration/email/amazon-ses', - 'getting-started/setup/instance-configuration/email/sendgrid', - ], - }, - 'getting-started/setup/instance-configuration/custom-mongodb-redis', - 'getting-started/setup/instance-configuration/disable-intercom', - 'getting-started/setup/instance-configuration/google-maps', - 'getting-started/setup/instance-configuration/disable-user-signup', - { - type: 'category', - label: 'Custom Domain and SSL', - link: { - type: 'doc', - id: 'getting-started/setup/instance-configuration/custom-domain/README', - }, - items: [ - 'getting-started/setup/instance-configuration/custom-domain/configure-tls', - 'getting-started/setup/instance-configuration/custom-domain/custom-ca-root-certificate', - ], - }, - 'getting-started/setup/instance-configuration/http-proxy', - 'getting-started/setup/instance-configuration/frame-ancestors', - 'getting-started/setup/environment-variables', - ], - }, - { - type: 'category', - label: 'Manage Instance', - link: { - type: 'doc', - id: 'getting-started/setup/instance-management/README', - }, - items: [ - { - type: 'category', - label: 'Update Appsmith', - link: { - type: 'doc', - id: 'getting-started/setup/instance-management/update-appsmith', - }, - items: [ - 'getting-started/setup/instance-management/upgrade-to-checkpoint-version' - ] - }, - 'getting-started/setup/instance-management/maintenance-window', - 'getting-started/setup/instance-management/appsmithctl', - 'getting-started/setup/instance-management/supervisor', - 'getting-started/setup/instance-management/how-to-get-container-logs', - ], - }, - { - type: 'category', - label: 'Manage Editions', - link: { - type: 'doc', - id: 'getting-started/setup/manage-editions/README', - }, - items: [ - 'getting-started/setup/manage-plans/upgrade-plan', - 'getting-started/setup/manage-plans/downgrade-plan', - { - type: 'category', - label: 'Upgrade from Community Edition', - link: { - type: 'doc', - id: 'getting-started/setup/upgrade-from-community-edition/README', - - }, - items: [ - 'getting-started/setup/upgrade-from-community-edition/docker', - 'getting-started/setup/upgrade-from-community-edition/kubernetes', - ] - }, - ], - }, - `getting-started/setup/best-practices`, - 'getting-started/setup/deployment-architecture', - ], - } - ], - }, //getting started section end - //training start { type: 'category', - collapsed: false, label: 'Training', - items: [ - 'training/sample' - ] - }, //training end - - { - //Data start - type: 'category', - collapsed: false, - label: 'Connect Data', - items: [ - 'connect-data/overview', - { - type: 'category', - collapsed: true, - label: 'How-to Guides', - link: { type: 'doc', id: 'connect-data/how-to-guides/README' }, - items: [ - 'connect-data/how-to-guides/how-to-work-with-local-apis-on-appsmith', - 'connect-data/how-to-guides/setup-datasource-environments', - 'connect-data/how-to-guides/how-to-pass-params-to-an-api', - 'connect-data/how-to-guides/fetch-and-filter-data-in-sql', - 'connect-data/how-to-guides/insert-and-update-data-in-sql', - 'connect-data/how-to-guides/filter-data-google-sheet', - 'connect-data/how-to-guides/insert-and-update-data-in-google-sheets', - 'connect-data/integrations', - ] - }, - { - //Reference start - type: 'category', - collapsed: false, - label: 'Reference', - link: { type: 'doc', id: 'connect-data/reference/overview' }, - items: [ - { - type: 'category', - collapsed: true, - label: 'Datasources', - link: { type: 'doc', id: 'connect-data/reference/README' }, - items: [ - //category- Api - { - type: 'category', - label: 'APIs', - items: [ - 'connect-data/reference/authenticated-api', - 'connect-data/reference/curl-import', - 'connect-data/reference/graphql', - 'connect-data/reference/rest-api' - ], - }, - //category- Databases - { - type: 'category', - label: 'Databases', - items: [ - 'connect-data/reference/querying-arango-db', - 'connect-data/reference/databricks', - 'connect-data/reference/querying-dynamodb', - 'connect-data/reference/querying-elasticsearch', - 'connect-data/reference/querying-firestore', - { - type: 'category', - label: 'MongoDB', - link: { - type: 'doc', - id: 'connect-data/reference/querying-mongodb/README', - }, - items: [ - 'connect-data/reference/querying-mongodb/mongo-syntax' - ], - }, - 'connect-data/reference/querying-mssql', - 'connect-data/reference/querying-mysql', - 'connect-data/reference/querying-oracle', - 'connect-data/reference/querying-postgres', - 'connect-data/reference/querying-redis', - 'connect-data/reference/querying-redshift', - 'connect-data/reference/querying-amazon-s3', - 'connect-data/reference/querying-snowflake-db', - 'connect-data/reference/using-smtp' - ], - }, - //category- SaaS Integrations - { - type: 'category', - label: 'SaaS Integrations', - items: [ - 'connect-data/reference/airtable', - 'connect-data/reference/aws-lambda', - 'connect-data/reference/querying-google-sheets', - 'connect-data/reference/hubspot', - 'connect-data/reference/twilio' - ], - }, - //category- AI Integrations - { - type: 'category', - label: 'AI Integrations', - items: [ - 'connect-data/reference/anthropic', - 'connect-data/reference/appsmith-ai', - 'connect-data/reference/google-ai', - 'connect-data/reference/open-ai' - ], - }, - ], - }, - 'connect-data/reference/query-settings', - ], - }, //Reference End - { - type: 'category', - collapsed: true, - label: 'Concepts', - link: { type: 'doc', id: 'connect-data/concepts/README' }, - items: [ - 'connect-data/concepts/dynamic-queries', - 'connect-data/concepts/dynamic-binding-in-queries', - 'connect-data/concepts/connection-pooling', - 'connect-data/concepts/Datasource-Environments', - ] - }, - ] - }, //Data end - - // Build App Start - - { // UI start - type: 'category', - collapsed: false, - label: 'Build Apps', - items: [ - 'build-apps/overview', - { - type: 'category', - collapsed: true, - label: 'How-to Guides', - link: { type: 'doc', id: 'build-apps/how-to-guides/README' }, - items: [ - //'core-concepts/building-ui/dynamic-ui/README', - { - type: 'category', - label: 'Display and Filter Data in Table', - items: [ - `build-apps/how-to-guides/display-search-and-filter-table-data`, - 'build-apps/how-to-guides/create-drill-down-view', - 'build-apps/how-to-guides/Server-side-pagination-in-table', - 'build-apps/how-to-guides/search-and-filter-table-data' - ], - }, - { - type: 'category', - label: 'Display and Filter Data in List', - items: [ - 'build-apps/how-to-guides/display-search-and-filter-list-data', - 'build-apps/how-to-guides/Setup-Server-side-Pagination-on-List' - ], - }, - { - type: 'category', - label: 'Insert Data', - link: { type: 'doc', id: 'build-apps/how-to-guides/insert-data' }, - items: [ - 'build-apps/how-to-guides/Upload-CSV-Data-to-Table', - ], - }, - { - type: 'category', - label: 'Update or Delete Data', - link: { type: 'doc', id: 'build-apps/how-to-guides/submit-form-data' }, - items: [ - 'reference/widgets/table/inline-editing', - 'build-apps/how-to-guides/update-list-data' - ], - }, - { - type: 'category', - label: 'Plot Charts', - items: [ - `build-apps/how-to-guides/Display-and-filter-chart-data`, - `build-apps/how-to-guides/create-custom-charts` - ], - }, - { - type: 'category', - label: 'Upload Files', - items: [ - 'build-apps/how-to-guides/Send-Filepicker-Data-with-API-Requests', - 'connect-data/how-to-guides/how-to-upload-to-s3' - - ], - }, - { - type: 'category', - label: 'Create Custom Widgets', - link: { type: 'doc', id: 'build-apps/how-to-guides/Create-Custom-Widgets-Using-Iframe' }, - items: [ - 'build-apps/how-to-guides/custom-widget-using-vanillajs' - ], - }, - 'connect-data/how-to-guides/how-to-download-files-using-api', - `core-concepts/writing-code/workflows`, - 'connect-data/how-to-guides/send-emails-using-the-SMTP-plugin', - `build-apps/how-to-guides/display-select-options-dynamically`, - 'build-apps/how-to-guides/add-remove-inputs-in-list', - `build-apps/how-to-guides/navigate-between-pages`, - `build-apps/how-to-guides/create-custom-nav-bar`, - 'build-apps/how-to-guides/Communicate-Between-an-App-and-Iframe', - 'advanced-concepts/custom-authentication', - 'build-apps/how-to-guides/display-map-markers', - `build-apps/how-to-guides/set-up-websockets`, - `build-apps/how-to-guides/setup-polling`, - `build-apps/how-to-guides/browse-and-display-documents`, - 'build-apps/how-to-guides/Multi-step-Form-or-Wizard-Using-Tabs' - ] - }, - { - //Reference start - type: 'category', - label: 'Reference', - collapsed: false, - link: { type: 'doc', id: 'build-apps/reference/README' }, - items: [ - { - type: 'category', - label: 'Widgets', - link: { type: 'doc', id: 'reference/widgets/README' }, - items: [ - 'reference/widgets/audio', - 'reference/widgets/audio-recorder', - { - type: 'category', - label: 'Button', - link: { type: 'doc', id: 'reference/widgets/button/README' }, - items: ['reference/widgets/button/google-recaptcha'], - }, - { - type: 'category', - label: 'Button Group', - link: { type: 'doc', id: 'reference/widgets/button-group/README' }, - items: [ - 'reference/widgets/button-group/buttons' - ], - }, - 'reference/widgets/camera', - 'reference/widgets/category-slider', - 'reference/widgets/chart', - 'reference/widgets/checkbox', - 'reference/widgets/checkbox-group', - 'reference/widgets/code-scanner', - 'reference/widgets/container', - 'reference/widgets/currency-input', - 'reference/widgets/custom', - 'reference/widgets/datepicker', - 'reference/widgets/divider', - 'reference/widgets/document-viewer', - 'reference/widgets/form', - 'reference/widgets/filepicker', - 'reference/widgets/icon-button', - 'reference/widgets/iframe', - 'reference/widgets/image', - 'reference/widgets/input', - 'reference/widgets/json-form', - 'reference/widgets/list', - 'reference/widgets/maps', - 'reference/widgets/map-chart', - { - type: 'category', - label: 'Menu Button', - link: { type: 'doc', id: 'reference/widgets/menu/README' }, - items: [ - 'reference/widgets/menu/menu-items' - ], - }, - 'reference/widgets/modal', - 'reference/widgets/multiselect', - 'reference/widgets/multi-tree-select', - 'reference/widgets/number-slider', - 'reference/widgets/phone-input', - 'reference/widgets/progress', - 'reference/widgets/radio-group', - 'reference/widgets/range-slider', - 'reference/widgets/rating', - 'reference/widgets/rich-text-editor', - 'reference/widgets/select', - 'reference/widgets/stat-box', - 'reference/widgets/switch', - 'reference/widgets/switch-group', - 'reference/widgets/tabs', - { - type: 'category', - label: 'Table', - link: { type: 'doc', id: 'reference/widgets/table/README' }, - items: [ - 'reference/widgets/table/column-settings' - ], - }, - 'reference/widgets/text', - 'reference/widgets/tree-select', - 'reference/widgets/video', - ], - }, - - 'core-concepts/building-ui/designing-an-application/app-theming', - 'learning-and-resources/sample-apps' - ], - }, //Reference End - ] - }, //Build Apps end - - { // WRITE CODE start - type: 'category', collapsed: false, - label: 'Write Code', items: [ - 'write-code/overview', - { - type: 'category', - collapsed: true, - label: 'How-to Guides', - link: { type: 'doc', id: 'write-code/how-to-guides/README' }, - items: [ - 'core-concepts/writing-code/javascript-promises', - 'advanced-concepts/sharing-data-across-pages', - 'core-concepts/writing-code/ext-libraries' - ] - }, - { - //Reference start - type: 'category', - collapsed: false, - label: 'Reference', - link: { type: 'doc', id: 'write-code/reference/overview' }, - items: [{ - type: 'category', - collapsed: true, - label: 'Global Objects', - link: { type: 'doc', id: 'write-code/reference/README' }, - items: [ - 'reference/appsmith-framework/query-object', - 'reference/appsmith-framework/context-object', - 'reference/appsmith-framework/console-object', - ], - }, - { - type: 'category', - label: 'Global Functions', - link: { - type: 'doc', - id: 'reference/appsmith-framework/widget-actions/README', - }, - items: [ - 'reference/appsmith-framework/widget-actions/navigate-to', - 'reference/appsmith-framework/widget-actions/show-alert', - 'reference/appsmith-framework/widget-actions/show-modal', - 'reference/appsmith-framework/widget-actions/close-modal', - 'reference/appsmith-framework/widget-actions/store-value', - 'reference/appsmith-framework/widget-actions/remove-value', - 'reference/appsmith-framework/widget-actions/clear-store', - 'reference/appsmith-framework/widget-actions/download', - 'reference/appsmith-framework/widget-actions/copy-to-clipboard', - 'reference/appsmith-framework/widget-actions/reset-widget', - 'reference/appsmith-framework/widget-actions/intervals-time-events', - 'reference/appsmith-framework/widget-actions/clear-interval', - 'reference/appsmith-framework/widget-actions/set-timeout', - 'reference/appsmith-framework/widget-actions/post-message', - 'reference/appsmith-framework/widget-actions/window-message-listener', - 'reference/appsmith-framework/widget-actions/unlisten-window-message' - ] - }, - 'write-code/reference/Built-in-JS-Libraries', - 'write-code/reference/Fetch-API' - ], - }, //Reference End - { - type: 'category', - collapsed: true, - label: 'Concepts', - link: { - type: 'doc', - id: 'write-code/concepts/overview', - }, - items: [ - 'core-concepts/writing-code/javascript-editor-beta/README', - 'write-code/concepts/execute-onpageload', - ], - }, - `write-code/best-practices`, + 'training/session-1', + 'training/session-2' ] - }, //CODE end - //module start - { - type: 'category', - collapsed: false, - label: 'Packages (Beta)', - items: [ - 'packages/overview', - - { - type: 'category', - label: 'Tutorial', - items: [ - 'packages/tutorial/query-module', - 'packages/tutorial/js-module' - ], - }, - ] - }, //module end - //Workflows start - { - type: 'category', - collapsed: false, - label: 'Workflows (Beta)', - items: [ - 'workflows/README', - //category- Api - { - type: 'category', - label: 'Tutorial', - link: { - type: 'doc', - id: 'workflows/tutorials/create-workflow', - }, - items: [ - ], - }, - { - type: 'category', - label: 'How-to Guides', - link: { - type: 'doc', - id: 'workflows/how-to-guides/README', - }, - items: [ - 'workflows/how-to-guides/create-approval-workflow', - 'workflows/how-to-guides/trigger-workflow-from-appsmith-app', - 'workflows/how-to-guides/set-up-automatic-processing', - ], - }, - { - type: 'category', - collapsed: false, - label: 'Reference', - items: [ - 'workflows/reference/workflow-queries', - 'workflows/reference/workflow-functions' - ], - } - ] - - }, //Workflows end - { - //Advanced Concepts Start - type: 'category', - collapsed: false, - label: 'Manage Apps and Users', - items: [ - { - type: 'category', - label: 'Embed Appsmith', - link: { type: 'doc', id: 'advanced-concepts/embed-appsmith-into-existing-application', }, - items: [ - 'build-apps/how-to-guides/send-messages-between-your-app-and-appsmith', - ] - }, - 'advanced-concepts/invite-users', - { - type: 'category', - label: 'Granular Access Control', - link: { type: 'doc', id: 'advanced-concepts/granular-access-control/README', }, - items: [ - 'advanced-concepts/granular-access-control/roles', - ] - }, - `advanced-concepts/user-provisioning-group-sync`, - { - type: 'category', - label: 'Version Control with Git', - link: { - type: 'doc', - id: 'advanced-concepts/version-control-with-git/README', - }, - items: [ - { - type: 'category', - label: 'Connect to a Git Repository', - link: { - type: 'doc', - id: 'advanced-concepts/version-control-with-git/connecting-to-git-repository', - }, - items: ['advanced-concepts/version-control-with-git/updating-local-file-path',], - }, - 'advanced-concepts/version-control-with-git/working-with-branches', - 'advanced-concepts/version-control-with-git/commit-and-push', - 'advanced-concepts/version-control-with-git/merging-branches', - 'advanced-concepts/version-control-with-git/revert-changes', - 'advanced-concepts/version-control-with-git/import-from-repository', - 'advanced-concepts/version-control-with-git/environments-with-git', - ], - }, - - 'advanced-concepts/more/backup-restore', - 'advanced-concepts/audit-logs', - 'advanced-concepts/branding', - ], - }, //Advanced Concepts end - { - // Help & Support start - type: 'category', - collapsed: false, - label: 'Troubleshooting', - items: [ - 'help-and-support/troubleshooting-guide/README', - { - // Help & Support start - type: 'category', - label: 'Self-hosting Errors', - link: { - type: 'doc', - id: 'help-and-support/troubleshooting-guide/deployment-errors', - }, - items: [ - "help-and-support/troubleshooting-guide/deployment-error-guides/mongodb-startup-error-postv5", - "help-and-support/troubleshooting-guide/deployment-error-guides/schema-mismatch-error", - "help-and-support/troubleshooting-guide/deployment-error-guides/k8s-helm3.0.4-upgrade-error", - "help-and-support/troubleshooting-guide/backup-restore-errors" - ], - }, - { - // Help & Support start - type: 'category', - label: 'Application Errors', - link: { - type: 'doc', - id: 'help-and-support/troubleshooting-guide/application-errors', - }, - items: [ - 'help-and-support/troubleshooting-guide/action-errors/datasource-errors', - 'help-and-support/troubleshooting-guide/action-errors/README' - ], - }, - // 'help-and-support/troubleshooting-guide/js-errors', - // 'help-and-support/troubleshooting-guide/query-errors', - // 'help-and-support/troubleshooting-guide/widget-errors', - ], - }, // Help & Support end - { - // Product Start - type: 'category', - collapsed: false, - label: 'Product', - items: [ - 'getting-started/faq', - 'product/security', - 'product/telemetry', - { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/appsmithorg/appsmith/releases', // The external URL - }, - { - type: 'link', - label: 'Contribute', // The link label - href: 'https://github.com/appsmithorg/appsmith/blob/release/CONTRIBUTING.md', // The external URL - }, - ], - }, // Product End + }, //training end ], }; diff --git a/website/src/theme/DocItem/Footer/index.js b/website/src/theme/DocItem/Footer/index.js old mode 100644 new mode 100755 index 4d32797b8a..141b0520c4 --- a/website/src/theme/DocItem/Footer/index.js +++ b/website/src/theme/DocItem/Footer/index.js @@ -6,8 +6,6 @@ export default function FooterWrapper(props) { return ( <>
- -
); diff --git a/website/src/theme/SearchBar.js b/website/src/theme/SearchBar.js old mode 100644 new mode 100755 index 508e6b3b46..0ef3d57a28 --- a/website/src/theme/SearchBar.js +++ b/website/src/theme/SearchBar.js @@ -4,7 +4,7 @@ import CustomSearchBar from '../components/custom-search/CustomSearchBar'; export default function SearchBarWrapper(props) { return ( <> - + ); } From 83b35ac7d99c343858669f2883412f3fd937defc Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Mon, 18 Mar 2024 14:41:20 +0530 Subject: [PATCH 03/43] Minor changes related to the sessions --- website/docs/training/sample.md | 0 website/docs/training/session-1.md | 13 +++++++------ website/docs/training/session-2.md | 4 +++- 3 files changed, 10 insertions(+), 7 deletions(-) delete mode 100644 website/docs/training/sample.md diff --git a/website/docs/training/sample.md b/website/docs/training/sample.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index 9cab3a92e1..63283f6559 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -48,18 +48,18 @@ hide_title: false ## Widgets -1. Table Widget +1. **Table Widget**
* Introduce a Table widget * Connect it to your datasource -* Checkout the auto generated CRUD queries +* Go to the **Queries** Tab on the left and check out the Appsmith generated CRUD queries * See how the table supports Server Side Pagination * Play around with the inline editing and add row to table
-2. Button Widget +2. **Button Widget**
* Introduce a Button widget on top of the table placed on the right @@ -68,20 +68,21 @@ hide_title: false
-3. Select Widget +3. **Select Widget**
* Introduce a Select widget * Enable JS binding, and hardcode inside it to have label and value for male and female * Update the Table’s Select query to have an additional Where clause to filter based on gender ```jsx -WHERE “name” ilike ‘%{{Table1.searchText}}%’ AND “gender” ilike '{{Select1.selectedOptionValue}}%' +WHERE “name” ilike ‘%{{Table1.searchText}}%’ +AND “gender” ilike '{{Select1.selectedOptionValue}}%' ``` * Connect the onChange of the Select Widget to trigger the Table’s Select Query
-4. Container Widget +4. **Container Widget**
* Place the 3 widgets Table, Button and Select as per your choice diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index da9aa6ca19..2226f45639 100644 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -75,7 +75,9 @@ WHERE "id"= {{Table1.updatedRow.id}}; * Create a new Page * Introduce a Chart on the canvas * Create a Query to show all the males and females distribution -`SELECT gender, COUNT(*) FROM public."users" group by gender;` +```jsx +SELECT gender, COUNT(*) FROM public."users" group by gender; +``` * Notice that chart that takes values only in x,y format. * Create a JSObject and call it **Utils**. Introduce a function that formats the Query’s data in x & y format ```jsx From 18de547f9e0ed45afa07982424999c91cc6d2a8d Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Mon, 18 Mar 2024 16:35:47 +0530 Subject: [PATCH 04/43] Updated the training instance link to optum-training.app.appsmith.com --- website/docs/training/session-1.md | 2 +- website/docs/training/session-2.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index 63283f6559..adef7828b6 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -7,7 +7,7 @@ hide_title: false ## Getting Started -1. Sign up on this instance: [Optum Demo Instance](https://optum-demo.app.appsmith.com/) (Ignore if already done) +1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/) (Ignore if already done) 2. Create a workspace of your own and name it as **\-Training-Workspace** diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index 2226f45639..8ae7b4e7a4 100644 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -7,7 +7,7 @@ hide_title: false ## Getting Started -1. Sign up on this instance: [Optum Demo Instance](https://optum-demo.app.appsmith.com/) (Ignore if already done) +1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/) (Ignore if already done) 2. Create a workspace of your own and name it as **\-Training-Workspace** From 32074a2e368644f626a902f3640e015bec357537 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Mon, 18 Mar 2024 17:45:04 +0530 Subject: [PATCH 05/43] Added Show Hints as well to the Session content --- website/docs/training/session-1.md | 14 +++++--- website/docs/training/session-2.md | 58 +++++++++++++++++++----------- website/sidebars.js | 2 +- 3 files changed, 49 insertions(+), 25 deletions(-) diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index adef7828b6..ca33ca7f82 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -74,10 +74,16 @@ hide_title: false * Introduce a Select widget * Enable JS binding, and hardcode inside it to have label and value for male and female * Update the Table’s Select query to have an additional Where clause to filter based on gender -```jsx -WHERE “name” ilike ‘%{{Table1.searchText}}%’ -AND “gender” ilike '{{Select1.selectedOptionValue}}%' -``` +
+ Show Hint +
+ ```jsx + WHERE “name” ilike ‘%{{Table1.searchText}}%’ + AND “gender” ilike '{{Select1.selectedOptionValue}}%' + ``` +
+
+ * Connect the onChange of the Select Widget to trigger the Table’s Select Query
diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index 8ae7b4e7a4..8c230f7d0f 100644 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -29,11 +29,17 @@ getUserData: () ⇒ { }, ``` * Introduce a function to get current age from date of birth -```jsx -getUserAge: (dob) ⇒ { - return moment(this.currentDate).dif(moment(dob), ‘years’) -} -``` +
+ Show Hint +
+ ```jsx + getUserAge: (dob) ⇒ { + return moment(this.currentDate).diff(moment(dob), ‘years’) + } + ``` +
+
+ * Add new column in table widget and name it **Age** * Connect the value of the column to the getUserAge function `{{Utils.getUserAge(currentRow.dob)}}` @@ -51,17 +57,23 @@ Name, Gender, Date of Birth, Phone, Email and Country ``` * Rename the widgets inside the Form for better reference * Change the existing **Update Users** Query to use the Form data instead -```jsx -UPDATE public.users SET -"gender"= '{{Form1.data.gender}}', -"dob"= '{{Form1.data.dob}}', -"phone"= '{{Form1.data.phone}}', -"email"= '{{Form1.data.email}}', -"country"= '{{Form1.data.country}}', -"name"= '{{Form1.data.name}}', -"updated_at"= '{{new Date()}}' -WHERE "id"= {{Table1.updatedRow.id}}; -``` +
+ Show Hint +
+ ```jsx + UPDATE public.users SET + "gender"= '{{Form1.data.gender}}', + "dob"= '{{Form1.data.dob}}', + "phone"= '{{Form1.data.phone}}', + "email"= '{{Form1.data.email}}', + "country"= '{{Form1.data.country}}', + "name"= '{{Form1.data.name}}', + "updated_at"= '{{new Date()}}' + WHERE "id"= {{Table1.updatedRow.id}}; + ``` +
+
+ * Rename the button label inside the Form to `Update Details` * Connect the onClick of the button to the Update Query * Inside the success of the onClick, connect it to Select Query @@ -74,10 +86,16 @@ WHERE "id"= {{Table1.updatedRow.id}}; * Create a new Page * Introduce a Chart on the canvas -* Create a Query to show all the males and females distribution -```jsx -SELECT gender, COUNT(*) FROM public."users" group by gender; -``` +* Write an SQL query to show all the males and females distribution of users in the database +
+ Show Hint +
+ ```jsx + SELECT gender, COUNT(*) FROM public."users" group by gender; + ``` +
+
+ * Notice that chart that takes values only in x,y format. * Create a JSObject and call it **Utils**. Introduce a function that formats the Query’s data in x & y format ```jsx diff --git a/website/sidebars.js b/website/sidebars.js index 55af191773..4b610b9580 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -4,7 +4,7 @@ const sidebars = { //training start { type: 'category', - label: 'Training', + label: 'Appsmith Training 101', collapsed: false, items: [ 'training/session-1', From bda16898f5d67d54ef84fb77568a1e5906c61825 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Mon, 18 Mar 2024 18:32:33 +0530 Subject: [PATCH 06/43] Minor markdown changes. --- website/docs/training/session-1.md | 2 +- website/docs/training/session-2.md | 22 ++++++++++++++-------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index ca33ca7f82..de6d4a2f42 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -7,7 +7,7 @@ hide_title: false ## Getting Started -1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/) (Ignore if already done) +1. Sign up on this instance: [Optum Training Instance](https://training.app.appsmith.com/) (Ignore if already done) 2. Create a workspace of your own and name it as **\-Training-Workspace** diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index 8c230f7d0f..03820d7247 100644 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -7,7 +7,7 @@ hide_title: false ## Getting Started -1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/) (Ignore if already done) +1. Sign up on this instance: [Optum Training Instance](https://training.app.appsmith.com/) (Ignore if already done) 2. Create a workspace of your own and name it as **\-Training-Workspace** @@ -86,7 +86,7 @@ Name, Gender, Date of Birth, Phone, Email and Country * Create a new Page * Introduce a Chart on the canvas -* Write an SQL query to show all the males and females distribution of users in the database +* Write an SQL query **getGenderRatioQuery** to show all the males and females distribution of users in the database
Show Hint
@@ -97,12 +97,18 @@ Name, Gender, Date of Birth, Phone, Email and Country
* Notice that chart that takes values only in x,y format. -* Create a JSObject and call it **Utils**. Introduce a function that formats the Query’s data in x & y format -```jsx -getChartDataByGender: () => { - return Query1.data.map(item => ({ x: item.gender, y: item.count }); -} -``` +* Create a JSObject and call it **Utils**. Introduce a function called **getChartDataByGender** that formats the Query’s data in x & y format +
+ Show Hint +
+ ```jsx + getChartDataByGender: () => { + return getGenderRatioQuery.data.map(item => ({ x: item.gender, y: item.count }); + } + ``` +
+
+ * Connect the JS Object function directly to the Chart’s source data `{{Utils.getChartDataByGender()}}` From c60c8fa1444de8aa0a350eadd5ba6dacf49ae0d1 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Mon, 18 Mar 2024 22:01:33 +0530 Subject: [PATCH 07/43] Corrections to the code and references. --- website/docs/training/session-2.md | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index 03820d7247..af96b6f2cf 100644 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -22,10 +22,10 @@ hide_title: false ```jsx currentDate: new Date(), ``` -* Introduce a function to get Select Querys data +* Introduce a function to get **Select_public_users1** data ```jsx getUserData: () ⇒ { - return SelectQuery.data + return Select_public_users1.data }, ``` * Introduce a function to get current age from date of birth @@ -56,7 +56,7 @@ getUserData: () ⇒ { Name, Gender, Date of Birth, Phone, Email and Country ``` * Rename the widgets inside the Form for better reference -* Change the existing **Update Users** Query to use the Form data instead +* Change the existing **Update_public_users1** Query to use the Form data instead
Show Hint
@@ -69,14 +69,14 @@ Name, Gender, Date of Birth, Phone, Email and Country "country"= '{{Form1.data.country}}', "name"= '{{Form1.data.name}}', "updated_at"= '{{new Date()}}' - WHERE "id"= {{Table1.updatedRow.id}}; + WHERE "id"= {{Table1.selectedRow.id}}; ```
* Rename the button label inside the Form to `Update Details` -* Connect the onClick of the button to the Update Query -* Inside the success of the onClick, connect it to Select Query +* Connect the onClick of the button to the **Update_public_users1** Query +* Inside the success of the onClick, connect it to the **Select_public_users1** Query @@ -103,7 +103,12 @@ Name, Gender, Date of Birth, Phone, Email and Country
```jsx getChartDataByGender: () => { - return getGenderRatioQuery.data.map(item => ({ x: item.gender, y: item.count }); + return getGenderRatioQuery.data.map(item => { + return { + x: item.gender, + y: item.count + }; + ) } ```
From c3fa8f55394312cffe1d6d03ed1485aeb3b44f80 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 19 Mar 2024 10:16:23 +0530 Subject: [PATCH 08/43] Changes in content to be more specific for trainees. --- website/docs/training/session-1.md | 12 ++++++++++-- website/docs/training/session-2.md | 9 ++++++--- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index de6d4a2f42..96a4002aac 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -7,9 +7,9 @@ hide_title: false ## Getting Started -1. Sign up on this instance: [Optum Training Instance](https://training.app.appsmith.com/) (Ignore if already done) +1. Sign up on this instance: [Optum Training Instance](https://training.app.appsmith.com/user/signup) (Ignore if already done) -2. Create a workspace of your own and name it as **\-Training-Workspace** +2. Now you will be guided through the Onboarding. Select your profiency with Appsmith. ## Datasources 1. **REST API** @@ -46,6 +46,14 @@ hide_title: false +## Workspaces and Apps + +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 or what workspaces you have access to. And also see what all Apps are accessible for you. +4. On the 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 **\-Training-Workspace** + ## Widgets 1. **Table Widget** diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index af96b6f2cf..f640c78b7b 100644 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -5,13 +5,15 @@ hide_title: false -## Getting Started +## Getting Started -1. Sign up on this instance: [Optum Training Instance](https://training.app.appsmith.com/) (Ignore if already done) +**Ignore this if you were able to attend the previous Session, create a Workspace with your name and already have an App called Activity 1.** + +1. Sign up on this instance: [Optum Training Instance](https://training.app.appsmith.com/user/signup) 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Go to this Workspace and fork **Activty 1** App to your Workspace (Ignore if you already having existing App) +3. Go to this [Training Workspace](https://training.app.appsmith.com/applications?workspaceId=65f83394a687aa57eb42cf0b) and fork **Activity 1** App to your newly created Workspace. ## JSObjects @@ -71,6 +73,7 @@ Name, Gender, Date of Birth, Phone, Email and Country "updated_at"= '{{new Date()}}' WHERE "id"= {{Table1.selectedRow.id}}; ``` + The above is just a sample solution. Ensure you correctly refer to the widgets' names you had renamed inside the Form, inside this **Query** after copy pasting it. From 37bdba1dff0ce62ac42bfbfb75c1717793e76f19 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 19 Mar 2024 12:54:35 +0530 Subject: [PATCH 09/43] Corrected the equals operator in the code. --- website/docs/training/session-2.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index f640c78b7b..e48d352bb9 100644 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -26,7 +26,7 @@ currentDate: new Date(), ``` * Introduce a function to get **Select_public_users1** data ```jsx -getUserData: () ⇒ { +getUserData: () => { return Select_public_users1.data }, ``` @@ -35,7 +35,7 @@ getUserData: () ⇒ { Show Hint
```jsx - getUserAge: (dob) ⇒ { + getUserAge: (dob) => { return moment(this.currentDate).diff(moment(dob), ‘years’) } ``` From 7c5a1b1e2bd0f2ae00524e36260cc0ef42d658e5 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 19 Mar 2024 14:55:10 +0530 Subject: [PATCH 10/43] hiding session 2 --- website/sidebars.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/sidebars.js b/website/sidebars.js index 4b610b9580..e31cbb6461 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -8,7 +8,7 @@ const sidebars = { collapsed: false, items: [ 'training/session-1', - 'training/session-2' + /*'training/session-2'*/ ] }, //training end ], From d876c82a864c06604c5366181bd4374ba6c72b13 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 19 Mar 2024 17:09:28 +0530 Subject: [PATCH 11/43] Enabling session 2 --- website/sidebars.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/sidebars.js b/website/sidebars.js index e31cbb6461..4b610b9580 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -8,7 +8,7 @@ const sidebars = { collapsed: false, items: [ 'training/session-1', - /*'training/session-2'*/ + 'training/session-2' ] }, //training end ], From 5761fd674ef0a3fcad57a827a089280ca5e237a9 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Wed, 3 Apr 2024 20:24:12 +0530 Subject: [PATCH 12/43] Added Training 201 with Session 3 for GIT. --- website/docs/training/session-1.md | 2 +- website/docs/training/session-2.md | 4 +- website/docs/training/session-3.md | 40 +++++++++ website/docs/training/session-4.md | 134 +++++++++++++++++++++++++++++ website/sidebars.js | 8 ++ 5 files changed, 185 insertions(+), 3 deletions(-) mode change 100644 => 100755 website/docs/training/session-2.md create mode 100755 website/docs/training/session-3.md create mode 100755 website/docs/training/session-4.md diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index 96a4002aac..4c865400d9 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -7,7 +7,7 @@ hide_title: false ## Getting Started -1. Sign up on this instance: [Optum Training Instance](https://training.app.appsmith.com/user/signup) (Ignore if already done) +1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/user/signup) (Ignore if already done) 2. Now you will be guided through the Onboarding. Select your profiency with Appsmith. diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md old mode 100644 new mode 100755 index e48d352bb9..e35c7235f3 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -9,11 +9,11 @@ hide_title: false **Ignore this if you were able to attend the previous Session, create a Workspace with your name and already have an App called Activity 1.** -1. Sign up on this instance: [Optum Training Instance](https://training.app.appsmith.com/user/signup) +1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/user/signup) 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Go to this [Training Workspace](https://training.app.appsmith.com/applications?workspaceId=65f83394a687aa57eb42cf0b) and fork **Activity 1** App to your newly created Workspace. +3. Go to this [Training Workspace](https://optum-training.app.appsmith.com/applications?workspaceId=66053dafa476fb4189c2713d) and fork **Activity 1** App to your newly created Workspace. ## JSObjects diff --git a/website/docs/training/session-3.md b/website/docs/training/session-3.md new file mode 100755 index 0000000000..20906782f2 --- /dev/null +++ b/website/docs/training/session-3.md @@ -0,0 +1,40 @@ +--- +title: Session 3 +hide_title: false +--- + + + +## Getting Started + +1. Sign up on this instance: [Optum Training Instance](https://optum-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. Next you need to head to this [Training Workspace](https://optum-training.app.appsmith.com/applications?workspaceId=66053dafa476fb4189c2713d) + +## Development with GIT Branch + +
+ +* You will see the App made available to you. Hover on top of it and click on edit to land on the editor page of the App. +* On the bottom left you will notice that you are currently in the **develop** branch of the App. +* Now click on it and a popover will show up listing all the branches the App has so far, both locally and in the remote GIT. +* Enter a branch name, call the branch as **\-dev**, and you will create a feature branch on top of the develop branch. +* Make some changes as you wish on the page. Introduce or remove some widgets, align it however across the page. You can also add a new page and make changes. +* Now click on the + button next to the branch name, and a modal will popup showing you the **Deploy** Tab. +* You will be able to review the changes. Additionally add a note on what are the changes you have made for future reference, and click the **Commit & Push** button to commit these changes and push it your remote branch. +* Great, you have successfully commited your changes to your very own dev branch of this Application. + +
+ +## Merge Dev Branch to Master + +
+ +* Next, lets go back to the same Modal by clicking on the + symbol button on the bottom left. +* This time lets head to the **Merge** Tab. +* Select the branch you want to merge your dev branch's changes to. In this case it will be the **master** branch. +* Now lets see if you are all good to merge or will there be any conflicts. + +
\ No newline at end of file diff --git a/website/docs/training/session-4.md b/website/docs/training/session-4.md new file mode 100755 index 0000000000..49654a575d --- /dev/null +++ b/website/docs/training/session-4.md @@ -0,0 +1,134 @@ +--- +title: Session 4 +hide_title: false +--- + + + +## Getting Started + +**Ignore this if you were able to attend the previous Session, create a Workspace with your name and already have an App called Activity 1.** + +1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/user/signup) + +2. Create a workspace of your own and name it as **\-Training-Workspace** + +3. Go to this [Training Workspace](https://optum-training.app.appsmith.com/applications?workspaceId=66053dafa476fb4189c2713d) and fork **Activity 1** App to your newly created Workspace. + +## JSObjects + +
+ +* Create a JSObject function and name it as **Utils** +* Introduce a variable with some initial value inside it +```jsx +currentDate: new Date(), +``` +* Introduce a function to get **Select_public_users1** data +```jsx +getUserData: () => { + return Select_public_users1.data +}, +``` +* Introduce a function to get current age from date of birth +
+ Show Hint +
+ ```jsx + getUserAge: (dob) => { + return moment(this.currentDate).diff(moment(dob), ‘years’) + } + ``` +
+
+ +* Add new column in table widget and name it **Age** +* Connect the value of the column to the getUserAge function +`{{Utils.getUserAge(currentRow.dob)}}` + +
+ +## Forms + +
+ +* Introduce a Form onto the canvas and align it on the right side of the Table +* Add input and select widgets for all the relevant Table columns you would want to update for like +```jsx +Name, Gender, Date of Birth, Phone, Email and Country +``` +* Rename the widgets inside the Form for better reference +* Change the existing **Update_public_users1** Query to use the Form data instead +
+ Show Hint +
+ ```jsx + UPDATE public.users SET + "gender"= '{{Form1.data.gender}}', + "dob"= '{{Form1.data.dob}}', + "phone"= '{{Form1.data.phone}}', + "email"= '{{Form1.data.email}}', + "country"= '{{Form1.data.country}}', + "name"= '{{Form1.data.name}}', + "updated_at"= '{{new Date()}}' + WHERE "id"= {{Table1.selectedRow.id}}; + ``` + The above is just a sample solution. Ensure you correctly refer to the widgets' names you had renamed inside the Form, inside this **Query** after copy pasting it. +
+
+ +* Rename the button label inside the Form to `Update Details` +* Connect the onClick of the button to the **Update_public_users1** Query +* Inside the success of the onClick, connect it to the **Select_public_users1** Query + +
+ +## Charts + +
+ +* Create a new Page +* Introduce a Chart on the canvas +* Write an SQL query **getGenderRatioQuery** to show all the males and females distribution of users in the database +
+ Show Hint +
+ ```jsx + SELECT gender, COUNT(*) FROM public."users" group by gender; + ``` +
+
+ +* Notice that chart that takes values only in x,y format. +* Create a JSObject and call it **Utils**. Introduce a function called **getChartDataByGender** that formats the Query’s data in x & y format +
+ Show Hint +
+ ```jsx + getChartDataByGender: () => { + return getGenderRatioQuery.data.map(item => { + return { + x: item.gender, + y: item.count + }; + ) + } + ``` +
+
+ +* Connect the JS Object function directly to the Chart’s source data `{{Utils.getChartDataByGender()}}` + +
+ +## Deploy the App +Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made + +## Share App +Share the App (If not done already earlier) +
+ +- Share to [tom@appsmith.com](mailto:tom@appsmith.com) and [sujoy@appsmith.com](mailto:sujoy@appsmith.com) as App Viewer +- Also try making it a public App by enabling **Make application public** and try opening it in incognito mode + +
\ No newline at end of file diff --git a/website/sidebars.js b/website/sidebars.js index 4b610b9580..d50589f34d 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -10,6 +10,14 @@ const sidebars = { 'training/session-1', 'training/session-2' ] + },{ + type: 'category', + label: 'Appsmith Training 201', + collapsed: false, + items: [ + 'training/session-3', + 'training/session-4' + ] }, //training end ], }; From e3841defae38c45ffb2144b805bbba3489596200 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Thu, 4 Apr 2024 09:16:42 +0530 Subject: [PATCH 13/43] Added best practices and few minor changes for session 3. --- website/docs/training/session-3.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/website/docs/training/session-3.md b/website/docs/training/session-3.md index 20906782f2..c8963f44d9 100755 --- a/website/docs/training/session-3.md +++ b/website/docs/training/session-3.md @@ -28,13 +28,19 @@ hide_title: false -## Merge Dev Branch to Master +## Merge your feature branch
* Next, lets go back to the same Modal by clicking on the + symbol button on the bottom left. * This time lets head to the **Merge** Tab. -* Select the branch you want to merge your dev branch's changes to. In this case it will be the **master** branch. +* Select the branch you want to merge your dev branch's changes to. In this case it will be the **develop** branch. * Now lets see if you are all good to merge or will there be any conflicts. -
\ No newline at end of file + + +## Best practices + +When you are working as team and collaborating using Version Control, some best practices need to be followed to ensure consistency and synchronisation across your org. + +Here is a [documentation](https://www.appsmith.com/blog/appsmith-git-internal-tools-3) stating some of these practices that you can follow. From 33202d9b472d078f331b5261d644483ded14a704 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Thu, 4 Apr 2024 13:55:33 +0530 Subject: [PATCH 14/43] Added session4 packages as well to the document. --- website/docs/training/session-4.md | 142 ++++++++++------------------- 1 file changed, 48 insertions(+), 94 deletions(-) diff --git a/website/docs/training/session-4.md b/website/docs/training/session-4.md index 49654a575d..d1613df423 100755 --- a/website/docs/training/session-4.md +++ b/website/docs/training/session-4.md @@ -15,111 +15,65 @@ hide_title: false 3. Go to this [Training Workspace](https://optum-training.app.appsmith.com/applications?workspaceId=66053dafa476fb4189c2713d) and fork **Activity 1** App to your newly created Workspace. -## JSObjects +## Creating a Package
-* Create a JSObject function and name it as **Utils** -* Introduce a variable with some initial value inside it +* On the workspace page, Click on **Create New** button and select New Package. +* Once inside the package, name this package as **Utils**. +* Then click on **New Module** and select JS Module and name it as **DateFns**. +* Now you will see a main file created for your DateFns module. +* Inside that introduce a function called **formatDate** that takes an argument dateString, and returns it formatted to **DD/MM/YYYY** ```jsx -currentDate: new Date(), +formatDate: (dateString) => { + const date = new Date(dateString); + const options = { + day: '2-digit', + month: '2-digit', + year: 'numeric', + }; + return date.toLocaleString('en-GB', options); +} ``` -* Introduce a function to get **Select_public_users1** data -```jsx -getUserData: () => { - return Select_public_users1.data -}, -``` -* Introduce a function to get current age from date of birth -
- Show Hint -
- ```jsx - getUserAge: (dob) => { - return moment(this.currentDate).diff(moment(dob), ‘years’) - } - ``` -
-
- -* Add new column in table widget and name it **Age** -* Connect the value of the column to the getUserAge function -`{{Utils.getUserAge(currentRow.dob)}}` +* Now publish this package by clicking the button on the top right.
-## Forms - -
+## Connecting a package to your App -* Introduce a Form onto the canvas and align it on the right side of the Table -* Add input and select widgets for all the relevant Table columns you would want to update for like +* Now go to the edit mode of your App, and clicking on the JS tab on left sidebar. +* Click on new JS Object, and you will be able to find your module **DateFns** that can be added under the Package **Utils**. +* Click on the **DateFns** and it will connect the newly created module to your App. +* Now head to your Table widget and go to any date column such as the dob. +* In the settings of this column, inside the Computed value, surround it by your module's function. +Example below ```jsx -Name, Gender, Date of Birth, Phone, Email and Country +DateFns1.formateDate(currentRow.dob) ``` -* Rename the widgets inside the Form for better reference -* Change the existing **Update_public_users1** Query to use the Form data instead -
- Show Hint -
- ```jsx - UPDATE public.users SET - "gender"= '{{Form1.data.gender}}', - "dob"= '{{Form1.data.dob}}', - "phone"= '{{Form1.data.phone}}', - "email"= '{{Form1.data.email}}', - "country"= '{{Form1.data.country}}', - "name"= '{{Form1.data.name}}', - "updated_at"= '{{new Date()}}' - WHERE "id"= {{Table1.selectedRow.id}}; - ``` - The above is just a sample solution. Ensure you correctly refer to the widgets' names you had renamed inside the Form, inside this **Query** after copy pasting it. -
-
- -* Rename the button label inside the Form to `Update Details` -* Connect the onClick of the button to the **Update_public_users1** Query -* Inside the success of the onClick, connect it to the **Select_public_users1** Query - -
- -## Charts - -
- -* Create a new Page -* Introduce a Chart on the canvas -* Write an SQL query **getGenderRatioQuery** to show all the males and females distribution of users in the database -
- Show Hint -
- ```jsx - SELECT gender, COUNT(*) FROM public."users" group by gender; - ``` -
-
- -* Notice that chart that takes values only in x,y format. -* Create a JSObject and call it **Utils**. Introduce a function called **getChartDataByGender** that formats the Query’s data in x & y format -
- Show Hint -
- ```jsx - getChartDataByGender: () => { - return getGenderRatioQuery.data.map(item => { - return { - x: item.gender, - y: item.count - }; - ) - } - ``` -
-
- -* Connect the JS Object function directly to the Chart’s source data `{{Utils.getChartDataByGender()}}` - -
+* Now you should be seeing the dob column formatted with date type DD/MM/YYYY inside the Table. +* Lets also head to the **List View** Page from the side bar, and do the same changes for the date inside the text widget. +* Go ahead and click on the Deploy button on the top right to deploy your App and view it with the new changes you have made. + +## Republishing a package + +* Let us also try changing the date format inside the package and see how the changes are reflected across these pages. +* Head back to the workspace and click on Edit of your **Utils** package. +* Inside the main file of your **DateFns** module, lets update the function to show the format as **Day Month Year** instead of DD/MM/YYYY. You can do this by modifying the month inside options to use **'long'** instead of '2-digit'. +* Now lets publish and head back to the Edit mode of your Application, and you will already see your changes being reflected inside the Editor for both pages **Table View** and **List View**. +* Click on deploy button again to start seeing your changes. +* Great, you have successfully created a package with a module and reused it across multiple pages of your App. + +## Adding a Query to a Package + +* We showed how to create a module inside a package, now lets exploring how to add a query to a package. +* Now lets go to the editor page of the App, and head to the **Table View** page. +* Here click on the Queries Tab on the left side bar, and you will see the Query **Select_public_users1**. Hover over it and click on the 3 dots next to it. +* Now click on the **Create a Module** and select **Add to Utils package**. +* You will see that your query has been automatically added to your existing Package and its reference is being used in the Page. You will also notice that it is auto filled with the arguments needed. +* Now you can go to the **List View** page, and go to the Queries tab on the side and click **New query/API**. +* Click on the **Select_public_users1** from **Utils** package and have it added to your Page. +* Now go to the List widget, and in its settings, connect the Items field to use the Query module you had recently added from the package. +* And thats it, you have successfully converted your Query in Table View page as a module, and reused it inside your List View page as well. ## Deploy the App Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made From 62ea48917e24c8d9792ed68df61f7e43c11414e3 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 25 Feb 2025 12:06:58 +0530 Subject: [PATCH 15/43] Modified training material based on Day 1 Agenda. Also added a markdown to show the agenda. --- website/docs/training/day-1-agenda.md | 63 +++++++++++++++++++++++++++ website/docs/training/session-1.md | 57 +++++++++++++----------- website/docs/training/session-2.md | 38 ++++++++-------- website/sidebars.js | 9 ++-- 4 files changed, 117 insertions(+), 50 deletions(-) create mode 100644 website/docs/training/day-1-agenda.md diff --git a/website/docs/training/day-1-agenda.md b/website/docs/training/day-1-agenda.md new file mode 100644 index 0000000000..91610b5160 --- /dev/null +++ b/website/docs/training/day-1-agenda.md @@ -0,0 +1,63 @@ +--- +title: "Appsmith Training Agenda - Day 1: Introduction and Core Concepts" +hide_title: false +--- + +# Appsmith Training Agenda + +## Day 1: Introduction and Core Concepts + +### 1. Introduction to Appsmith +
+ +- **Overview:** Discover what Appsmith is, its key features, and how it empowers you to build applications quickly. + +
+ +### 2. Connecting and Managing Datasources +
+ +- **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. + +
+ +### 3. Widget Essentials and Displaying Data +
+ +- **Core Widgets:** Explore essential widgets like Table, Button, Select, and Container. +- **Data Binding:** Understand how to bind data to widgets for dynamic display and interactivity. + +
+ +### 4. Customizing and Enhancing Functionality with Code +
+ +- **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. + +
+ +### 5. Building Interactive Dashboards and CRUD Interfaces +
+ +- **Dashboard Assembly:** Combine multiple widgets to create a cohesive, interactive dashboard. +- **CRUD Operations:** Implement Create, Read, Update, and Delete functionalities using Appsmith’s auto-generated queries. + +
+ +### 6. Task: Create a Basic App +
+ +- **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. + +
+ +### 7. Day 2 Preview: Get a sneak peek into Git Integration and Custom Widgets +
+ + - **Git Integration:** Understand version control for collaborative development. + - **Custom Widgets:** Learn how to create your own widget + +
diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index 4c865400d9..fd07a8c473 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -7,17 +7,17 @@ hide_title: false ## Getting Started -1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/user/signup) (Ignore if already done) +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. -## Datasources +## Connecting and Managing Datasources 1. **REST API**
* Go to Data on the sidebar and Click on the button **Bring your data** and select Datasource **REST API**. * Enter **https://mock-api.appsmith.com** in the field -* Click **Save it as a datasource** and you will be taken to the Datasource configuration page +* 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 @@ -38,32 +38,37 @@ hide_title: false User: users Password: new-users-db-pass ``` -* Also rename this Datasource as **Postgres** 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 inside each table. -* Now click on the button **New Query** on the top right +* 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
-## Workspaces and Apps +## Workspaces and Sharing Access 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 or what workspaces you have access to. And also see what all Apps are accessible for you. -4. On the rightmost, next to the **Create new** button, you will see a three-dot menu. Click on it and you will see your workspace name. +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 **\-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. -## Widgets +## Widget Essentials and Displaying Data 1. **Table Widget**
-* Introduce a Table widget -* Connect it to your datasource -* Go to the **Queries** Tab on the left and check out the Appsmith generated CRUD queries -* See how the table supports Server Side Pagination +* Introduce a Table widget from the Widget pane on the left. +* Connect it to your datasource by 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 +* 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 +* Customise the columns like setting visibility, re-ordering the columns and even changing the column type
@@ -79,9 +84,18 @@ hide_title: false 3. **Select Widget**
-* Introduce a Select widget -* Enable JS binding, and hardcode inside it to have label and value for male and female -* Update the Table’s Select query to have an additional Where clause to filter based on gender +* Create an SQL query named **getGenderValues** that retrieves all the distinct values of the table from the “gender“ column +
+ Show Hint +
+ ```jsx + Select DISTINCT(gender) from public.users + ``` +
+
+ +* 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
Show Hint
@@ -116,13 +130,4 @@ hide_title: false
## Deploy App -Go ahead and click on the Deploy button on the top right and see your App in deployed mode - -## Share App - -
- -- Share to [tom@appsmith.com](mailto:tom@appsmith.com) and [sujoy@appsmith.com](mailto:sujoy@appsmith.com) as App Viewer -- Also try making it a public App by enabling **Make application public** and try opening it in incognito mode - -
\ No newline at end of file +Go ahead and click on the Deploy button on the top right and see your App in deployed mode \ No newline at end of file diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index e35c7235f3..a1081409cd 100755 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -7,26 +7,30 @@ hide_title: false ## Getting Started -**Ignore this if you were able to attend the previous Session, create a Workspace with your name and already have an App called Activity 1.** +**Ignore this if you were able to attend the previous Session.** -1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/user/signup) +1. Sign up on this instance: [Training Instance](https://training.app.appsmith.com/user/signup) (Ignore if already done) 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Go to this [Training Workspace](https://optum-training.app.appsmith.com/applications?workspaceId=66053dafa476fb4189c2713d) and fork **Activity 1** App to your newly created Workspace. +3. Go to this [Training Workspace](https://training.app.appsmith.com/applications?workspaceId=67bc411d08cb0b5962026d57) and fork **Activity 1** App to your newly created Workspace. -## JSObjects +## Customizing and Enhancing Functionality with Code + +1. **Inline JS** + +2. **JSObjects**
-* Create a JSObject function and name it as **Utils** +* From the left sidebar, click on **JS** and create a **New JS object** and name it as **Utils** * Introduce a variable with some initial value inside it ```jsx currentDate: new Date(), ``` * Introduce a function to get **Select_public_users1** data ```jsx -getUserData: () => { +getUserData() { return Select_public_users1.data }, ``` @@ -35,7 +39,7 @@ getUserData: () => { Show Hint
```jsx - getUserAge: (dob) => { + getUserAge(dob) { return moment(this.currentDate).diff(moment(dob), ‘years’) } ``` @@ -48,7 +52,9 @@ getUserData: () => {
-## Forms +## Building Interactive Dashboards and CRUD Interfaces + +1. **Forms**
@@ -58,6 +64,7 @@ getUserData: () => { Name, Gender, Date of Birth, Phone, Email and Country ``` * Rename the widgets inside the Form for better reference +* You can set which all fields that are required for Form submittion, and even add validations to it. * Change the existing **Update_public_users1** Query to use the Form data instead
Show Hint @@ -73,7 +80,7 @@ Name, Gender, Date of Birth, Phone, Email and Country "updated_at"= '{{new Date()}}' WHERE "id"= {{Table1.selectedRow.id}}; ``` - The above is just a sample solution. Ensure you correctly refer to the widgets' names you had renamed inside the Form, inside this **Query** after copy pasting it. + The above is just a sample solution. Ensure you correctly refer to the widgets' names you had renamed in the Form, within this **Query** when you copy pasting it.
@@ -83,7 +90,7 @@ Name, Gender, Date of Birth, Phone, Email and Country -## Charts +2. **Charts**
@@ -122,13 +129,4 @@ Name, Gender, Date of Birth, Phone, Email and Country
## Deploy the App -Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made - -## Share App -Share the App (If not done already earlier) -
- -- Share to [tom@appsmith.com](mailto:tom@appsmith.com) and [sujoy@appsmith.com](mailto:sujoy@appsmith.com) as App Viewer -- Also try making it a public App by enabling **Make application public** and try opening it in incognito mode - -
\ No newline at end of file +Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made \ No newline at end of file diff --git a/website/sidebars.js b/website/sidebars.js index d50589f34d..00638e9f1e 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -4,21 +4,22 @@ const sidebars = { //training start { type: 'category', - label: 'Appsmith Training 101', + label: 'Appsmith Training Day 1', collapsed: false, items: [ + 'training/day-1-agenda', 'training/session-1', 'training/session-2' ] - },{ + }/*,{ type: 'category', - label: 'Appsmith Training 201', + label: 'Appsmith Training Day 2', collapsed: false, items: [ 'training/session-3', 'training/session-4' ] - }, //training end + }, //training end */ ], }; From 201833f8a705817a46c999d0efbe70d608960ec0 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 25 Feb 2025 12:47:19 +0530 Subject: [PATCH 16/43] Minor change in agenda markdown. --- website/docs/training/day-1-agenda.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/website/docs/training/day-1-agenda.md b/website/docs/training/day-1-agenda.md index 91610b5160..e683c5e5ea 100644 --- a/website/docs/training/day-1-agenda.md +++ b/website/docs/training/day-1-agenda.md @@ -1,11 +1,10 @@ --- -title: "Appsmith Training Agenda - Day 1: Introduction and Core Concepts" +title: "Agenda" hide_title: false --- -# Appsmith Training Agenda - -## Day 1: Introduction and Core Concepts +# Day 1: Appsmith Training Agenda +## Introduction and Core Concepts ### 1. Introduction to Appsmith
From c50da5f1bf28df221e2d27b335e7285340fcc009 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 25 Feb 2025 15:57:31 +0530 Subject: [PATCH 17/43] Added hyperlinks for the items in the Agenda --- website/docs/training/day-1-agenda.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/website/docs/training/day-1-agenda.md b/website/docs/training/day-1-agenda.md index e683c5e5ea..65e7903f7e 100644 --- a/website/docs/training/day-1-agenda.md +++ b/website/docs/training/day-1-agenda.md @@ -13,7 +13,7 @@ hide_title: false
-### 2. Connecting and Managing Datasources +### [2. Connecting and Managing Datasources](/training/session-1#connecting-and-managing-datasources)
- **Datasource Setup:** Learn to connect various datasources such as REST APIs and databases. @@ -21,7 +21,7 @@ hide_title: false
-### 3. Widget Essentials and Displaying Data +### [3. Widget Essentials and Displaying Data](/training/session-1#widget-essentials-and-displaying-data)
- **Core Widgets:** Explore essential widgets like Table, Button, Select, and Container. @@ -29,7 +29,7 @@ hide_title: false
-### 4. Customizing and Enhancing Functionality with Code +### [4. Customizing and Enhancing Functionality with Code](/training/session-2#customizing-and-enhancing-functionality-with-code)
- **Custom Code Integration:** Use JavaScript to extend widget functionality and manipulate data. @@ -37,7 +37,7 @@ hide_title: false
-### 5. Building Interactive Dashboards and CRUD Interfaces +### [5. Building Interactive Dashboards and CRUD Interfaces](/training/session-2#building-interactive-dashboards-and-crud-interfaces)
- **Dashboard Assembly:** Combine multiple widgets to create a cohesive, interactive dashboard. From 38773cdd1e068317649246c7cbfa70529f7b8bd5 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 25 Feb 2025 17:35:42 +0530 Subject: [PATCH 18/43] Updated the content for the training. --- website/docs/training/day-1-agenda.md | 16 ++++++------ website/docs/training/session-1.md | 36 ++++++++++++++++++--------- website/docs/training/session-2.md | 15 ++++++++++- 3 files changed, 45 insertions(+), 22 deletions(-) diff --git a/website/docs/training/day-1-agenda.md b/website/docs/training/day-1-agenda.md index 65e7903f7e..01f8430f84 100644 --- a/website/docs/training/day-1-agenda.md +++ b/website/docs/training/day-1-agenda.md @@ -5,15 +5,13 @@ hide_title: false # Day 1: Appsmith Training Agenda ## Introduction and Core Concepts - -### 1. Introduction to Appsmith
-- **Overview:** Discover what Appsmith is, its key features, and how it empowers you to build applications quickly. +Discover what Appsmith is, its key features, and how it empowers you to build applications quickly.
-### [2. Connecting and Managing Datasources](/training/session-1#connecting-and-managing-datasources) +### [1. Connecting and Managing Datasources](/training/session-1#connecting-and-managing-datasources)
- **Datasource Setup:** Learn to connect various datasources such as REST APIs and databases. @@ -21,7 +19,7 @@ hide_title: false
-### [3. Widget Essentials and Displaying Data](/training/session-1#widget-essentials-and-displaying-data) +### [2. Widget Essentials and Displaying Data](/training/session-1#widget-essentials-and-displaying-data)
- **Core Widgets:** Explore essential widgets like Table, Button, Select, and Container. @@ -29,7 +27,7 @@ hide_title: false
-### [4. Customizing and Enhancing Functionality with Code](/training/session-2#customizing-and-enhancing-functionality-with-code) +### [3. Customizing and Enhancing Functionality with Code](/training/session-2#customizing-and-enhancing-functionality-with-code)
- **Custom Code Integration:** Use JavaScript to extend widget functionality and manipulate data. @@ -37,7 +35,7 @@ hide_title: false
-### [5. Building Interactive Dashboards and CRUD Interfaces](/training/session-2#building-interactive-dashboards-and-crud-interfaces) +### [4. Building CRUD Interfaces and Interactive Dashboards](/training/session-2#building-crud-interfaces-and-interactive-dashboards)
- **Dashboard Assembly:** Combine multiple widgets to create a cohesive, interactive dashboard. @@ -45,7 +43,7 @@ hide_title: false
-### 6. Task: Create a Basic App +### 5. Task: Create a Basic App
- **Hands-On Challenge:** Build a basic application integrating datasources, widgets, and custom code. @@ -53,7 +51,7 @@ hide_title: false
-### 7. Day 2 Preview: Get a sneak peek into Git Integration and Custom Widgets +### 6. Get a sneak peek into Day 2 Agenda
- **Git Integration:** Understand version control for collaborative development. diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index fd07a8c473..724838a104 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -63,7 +63,7 @@ hide_title: false
* Introduce a Table widget from the Widget pane on the left. -* Connect it to your datasource by select the datasource **Postgres DB** which we just created. +* 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 * See how the table is connected to your Data and that it supports Server Side Pagination @@ -72,16 +72,26 @@ hide_title: false
-2. **Button Widget** +2. **Text Widget** + +
+ +* 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** + +3. **Button Widget**
-* Introduce a Button widget on top of the table placed on the right -* Name the button as Refresh, and possibly find an icon from the style to suit the Action -* Connect the onClick of the widget to the Table’s Select Query +* 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
-3. **Select Widget** +4. **Select Widget**
* Create an SQL query named **getGenderValues** that retrieves all the distinct values of the table from the “gender“ column @@ -106,17 +116,18 @@ hide_title: false -* Connect the onChange of the Select Widget to trigger the Table’s Select Query +* Connect the onOptionChange event of the Select Widget to trigger the Table’s **Select_public_users1** query
-4. **Container Widget** +5. **Container Widget**
-* Place the 3 widgets Table, Button and Select as per your choice -* Click and highlight all the widgets to select them, and you will see a minibar popup -* Select the last option, ie the Container widget to wrap these widgets inside a container -* Now move it around the canvas to align it centrally +* 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**
@@ -126,6 +137,7 @@ hide_title: false * 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 diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index a1081409cd..aabc53ae74 100755 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -19,10 +19,23 @@ hide_title: false 1. **Inline JS** +
+ +* You can write javascript code inside any widget's fields that has **JS** symbol next to it, by using the **Moustsache {{}}** operator +* This allows you to logically customise a widget's functionality and styling based on some conditions +* Introduce a checkbox and rename the Label as **Allow Filters** +* Now go to the settings of the Select widget, and click on **JS** next to the Visible field +* Bind the status of the Checkbox to that field like this **{{Checkbox1.isChecked}}** +* Click on the Preview **:arrow_forward:** symbol next to the Share button on the top +* Now toggle the checkbox to see the Select widget's visibility changing based on your selection + +
+ 2. **JSObjects**
+* You can also write functions and create variables to bind it to a widget's Data or an Event * From the left sidebar, click on **JS** and create a **New JS object** and name it as **Utils** * Introduce a variable with some initial value inside it ```jsx @@ -52,7 +65,7 @@ getUserData() {
-## Building Interactive Dashboards and CRUD Interfaces +## Building CRUD Interfaces and Interactive Dashboards 1. **Forms** From c947d3ffb82e765e1bfb65f3b68a3b91aefad7fa Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 25 Feb 2025 21:22:24 +0530 Subject: [PATCH 19/43] Minor changes and linked the task to App url. --- website/docs/training/day-1-agenda.md | 2 +- website/docs/training/session-2.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/training/day-1-agenda.md b/website/docs/training/day-1-agenda.md index 01f8430f84..aa52da91a3 100644 --- a/website/docs/training/day-1-agenda.md +++ b/website/docs/training/day-1-agenda.md @@ -43,7 +43,7 @@ Discover what Appsmith is, its key features, and how it empowers you to build ap -### 5. Task: Create a Basic App +### [5. Task: Create a Basic App](https://training.app.appsmith.com/app/task-1/home-67bdd31349bf245ac087e8fe)
- **Hands-On Challenge:** Build a basic application integrating datasources, widgets, and custom code. diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index aabc53ae74..bfc40a8d87 100755 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -9,7 +9,7 @@ hide_title: false **Ignore this if you were able to attend the previous Session.** -1. Sign up on this instance: [Training Instance](https://training.app.appsmith.com/user/signup) (Ignore if already done) +1. Sign up on this instance: [Training Instance](https://training.app.appsmith.com/user/signup) 2. Create a workspace of your own and name it as **\-Training-Workspace** From d5ebcc660e891e5f65ea5d11f83fff1cfa3ae57f Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 25 Feb 2025 21:24:38 +0530 Subject: [PATCH 20/43] Fixed issues in formatting. --- website/docs/training/session-1.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index 724838a104..abba595265 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -50,6 +50,8 @@ hide_title: false ## Workspaces and Sharing Access +
+ 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 or what workspaces you have access to. And also see what all Apps are accessible for you. @@ -57,9 +59,12 @@ hide_title: false 5. Click on the Edit icon next to it and rename your workspace as **\-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. +
+ ## Widget Essentials and Displaying Data 1. **Table Widget** +
* Introduce a Table widget from the Widget pane on the left. @@ -81,7 +86,10 @@ hide_title: false * 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** +
+ 3. **Button Widget** +
* Introduce a Button widget on to the canvas @@ -92,6 +100,7 @@ hide_title: false
4. **Select Widget** +
* Create an SQL query named **getGenderValues** that retrieves all the distinct values of the table from the “gender“ column @@ -121,6 +130,7 @@ hide_title: false
5. **Container Widget** +
* Drag and place the 4 widgets Table, Text, Button and Select on the canvas however you want From bbf38c83c1c1785d424ba667a5e475d4b956a59e Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 25 Feb 2025 21:36:12 +0530 Subject: [PATCH 21/43] Minor fixes across the content. --- website/docs/training/session-1.md | 1 + website/docs/training/session-2.md | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index abba595265..2f2ca9365f 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -58,6 +58,7 @@ hide_title: false 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 **\-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
diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index bfc40a8d87..59a9fd8751 100755 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -13,7 +13,9 @@ hide_title: false 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Go to this [Training Workspace](https://training.app.appsmith.com/applications?workspaceId=67bc411d08cb0b5962026d57) and fork **Activity 1** App to your newly created Workspace. +3. Share access to this workspace to **Training Admin** as Administrator + +4. Fromt the workspace, click on the top right info icon 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 ## Customizing and Enhancing Functionality with Code @@ -26,7 +28,7 @@ hide_title: false * Introduce a checkbox and rename the Label as **Allow Filters** * Now go to the settings of the Select widget, and click on **JS** next to the Visible field * Bind the status of the Checkbox to that field like this **{{Checkbox1.isChecked}}** -* Click on the Preview **:arrow_forward:** symbol next to the Share button on the top +* Click on the Preview symbol next to the Share button on the top * Now toggle the checkbox to see the Select widget's visibility changing based on your selection From 284e3d3ebda44825e8115d1b691bb0905e7a1dbf Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 25 Feb 2025 21:40:48 +0530 Subject: [PATCH 22/43] Fixed markdown breaking due to the double braces. --- website/docs/training/session-2.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index 59a9fd8751..c1794271d0 100755 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -23,11 +23,11 @@ hide_title: false
-* You can write javascript code inside any widget's fields that has **JS** symbol next to it, by using the **Moustsache {{}}** operator +* You can write javascript code inside any widget's fields that has **JS** symbol next to it, by using the `Moustache {{}}` operator * This allows you to logically customise a widget's functionality and styling based on some conditions * Introduce a checkbox and rename the Label as **Allow Filters** * Now go to the settings of the Select widget, and click on **JS** next to the Visible field -* Bind the status of the Checkbox to that field like this **{{Checkbox1.isChecked}}** +* Bind the status of the Checkbox to that field like this `{{Checkbox1.isChecked}}` * Click on the Preview symbol next to the Share button on the top * Now toggle the checkbox to see the Select widget's visibility changing based on your selection From d38db35adbeb986ab2165ef7c0bbf36653b73ee5 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Wed, 26 Feb 2025 18:20:00 +0530 Subject: [PATCH 23/43] Changes based on dry run - 1 --- website/docs/training/day-1-agenda.md | 4 ++-- website/docs/training/session-1.md | 11 +++++++---- website/docs/training/session-2.md | 2 +- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/website/docs/training/day-1-agenda.md b/website/docs/training/day-1-agenda.md index aa52da91a3..9119daacce 100644 --- a/website/docs/training/day-1-agenda.md +++ b/website/docs/training/day-1-agenda.md @@ -22,7 +22,7 @@ Discover what Appsmith is, its key features, and how it empowers you to build ap ### [2. Widget Essentials and Displaying Data](/training/session-1#widget-essentials-and-displaying-data)
-- **Core Widgets:** Explore essential widgets like Table, Button, Select, and Container. +- **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.
@@ -38,8 +38,8 @@ Discover what Appsmith is, its key features, and how it empowers you to build ap ### [4. Building CRUD Interfaces and Interactive Dashboards](/training/session-2#building-crud-interfaces-and-interactive-dashboards)
-- **Dashboard Assembly:** Combine multiple widgets to create a cohesive, interactive dashboard. - **CRUD Operations:** Implement Create, Read, Update, and Delete functionalities using Appsmith’s auto-generated queries. +- **Dashboard Assembly:** Combine multiple widgets to create a cohesive, interactive dashboard.
diff --git a/website/docs/training/session-1.md b/website/docs/training/session-1.md index 2f2ca9365f..7b956ddaf3 100755 --- a/website/docs/training/session-1.md +++ b/website/docs/training/session-1.md @@ -11,17 +11,20 @@ hide_title: false 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**
-* Go to Data on the sidebar and Click on the button **Bring your data** and select Datasource **REST API**. +* 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 API Datasource and a Query on top of it +* Great!! You have successfully created an REST API Datasource and ran an API on top of it
@@ -54,7 +57,7 @@ hide_title: false 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 or what workspaces you have access to. And also see what all Apps are accessible for you. +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 **\-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. @@ -72,9 +75,9 @@ hide_title: false * 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 -* Customise the columns like setting visibility, re-ordering the columns and even changing the column type diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index c1794271d0..4a4119abed 100755 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -15,7 +15,7 @@ hide_title: false 3. Share access to this workspace to **Training Admin** as Administrator -4. Fromt the workspace, click on the top right info icon 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 +4. From the workspace, click on the top right info icon. Then click on **Chat with us**. This is our support assistant that can help you on any issues. Go ahead and send a test message ## Customizing and Enhancing Functionality with Code From 24622302ffd4b325daaef212bb46142d3e754a6f Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Wed, 26 Feb 2025 20:44:18 +0530 Subject: [PATCH 24/43] Minor changes in agenda content. --- website/docs/training/day-1-agenda.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/training/day-1-agenda.md b/website/docs/training/day-1-agenda.md index 9119daacce..87ca718351 100644 --- a/website/docs/training/day-1-agenda.md +++ b/website/docs/training/day-1-agenda.md @@ -38,8 +38,8 @@ Discover what Appsmith is, its key features, and how it empowers you to build ap ### [4. Building CRUD Interfaces and Interactive Dashboards](/training/session-2#building-crud-interfaces-and-interactive-dashboards)
-- **CRUD Operations:** Implement Create, Read, Update, and Delete functionalities using Appsmith’s auto-generated queries. -- **Dashboard Assembly:** Combine multiple widgets to create a cohesive, interactive dashboard. +- **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
From e23a1c982e25e872b7a78f1937cffa8708f1cc7a Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Mon, 3 Mar 2025 14:10:02 +0530 Subject: [PATCH 25/43] AMAdded Day 2 agenda. And modified sessions 3, 4 topics for Day 2. --- website/docs/training/day-2-agenda.md | 71 +++++++++++++++++++++ website/docs/training/session-3.md | 16 +++-- website/docs/training/session-4.md | 37 +++-------- website/docs/training/session-5.md | 90 +++++++++++++++++++++++++++ 4 files changed, 180 insertions(+), 34 deletions(-) create mode 100644 website/docs/training/day-2-agenda.md create mode 100755 website/docs/training/session-5.md diff --git a/website/docs/training/day-2-agenda.md b/website/docs/training/day-2-agenda.md new file mode 100644 index 0000000000..68c7461194 --- /dev/null +++ b/website/docs/training/day-2-agenda.md @@ -0,0 +1,71 @@ +--- +title: "Agenda" +hide_title: false +--- + +# Day 2: Appsmith Training Agenda +## Advanced Development and Collaboration +
+ +Enhance your Appsmith skills by exploring version control, CI/CD, advanced integrations, and custom widgets. + +
+ +### [1. Version Control: Development Process and Collaboration](/training/session-3#version-control-development-process-and-collaboration) +
+ +- **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. + +
+ +### [2. Configuring Multiple Environments and Setting Up CI/CD Pipelines](/training/session-3#configuring-multiple-environments-and-setting-up-ci-cd-pipelines) +
+ +- **Environment Variables:** Learn how to configure multiple environments like Development, Staging, and Production. +- **CI/CD Pipelines:** Automate deployments and manage changes across different environments. + +
+ +### [3. Advanced JavaScript and API Integrations](/training/session-4#advanced-javascript-and-api-integrations) +
+ +- **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 JavaScript. + +
+ +### [4. Embedding Appsmith Applications and Facilitating Communication](/training/session-4#embedding-appsmith-applications-and-facilitating-communication) +
+ +- **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. + +
+ +### [5. Creating Custom Widgets](/training/session-4#creating-custom-widgets) +
+ +- **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. + +
+ +### [6. Hands-On Task](https://training.app.appsmith.com/app/task-2/home-67bdd31349bf245ac087e8fe) +
+ +- **Objective:** Build an advanced app incorporating Git, custom JavaScript, and custom widgets. +- **Challenge:** Implement a feature using multiple environments and integrate with a third-party API. + +
+ +### 7. Get a sneak peek into Day 3 Agenda +
+ +- **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. + +
diff --git a/website/docs/training/session-3.md b/website/docs/training/session-3.md index c8963f44d9..f4b6bb4882 100755 --- a/website/docs/training/session-3.md +++ b/website/docs/training/session-3.md @@ -5,15 +5,19 @@ hide_title: false -## Getting Started +## Getting Started -1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/user/signup) (Ignore if already done) +**Ignore this if you were able to attend the previous Session.** -2. Now you will be guided through the Onboarding. Select your profiency with Appsmith. +1. Sign up on this instance: [Training Instance](https://training.app.appsmith.com/user/signup) -3. Next you need to head to this [Training Workspace](https://optum-training.app.appsmith.com/applications?workspaceId=66053dafa476fb4189c2713d) +2. Create a workspace of your own and name it as **\-Training-Workspace** -## Development with GIT Branch +3. Share access to this workspace to **Training Admin** as Administrator + +4. From the workspace, click on the top right info icon. Then click on **Chat with us**. This is our support assistant that can help you on any issues. Go ahead and send a test message + +## Version Control: Development Process and Collaboration
@@ -28,7 +32,7 @@ hide_title: false
-## Merge your feature branch +## Configuring Multiple Environments and Setting Up CI/CD Pipelines
diff --git a/website/docs/training/session-4.md b/website/docs/training/session-4.md index d1613df423..3dd7dc5c85 100755 --- a/website/docs/training/session-4.md +++ b/website/docs/training/session-4.md @@ -7,15 +7,17 @@ hide_title: false ## Getting Started -**Ignore this if you were able to attend the previous Session, create a Workspace with your name and already have an App called Activity 1.** +**Ignore this if you were able to attend the previous Session.** -1. Sign up on this instance: [Optum Training Instance](https://optum-training.app.appsmith.com/user/signup) +1. Sign up on this instance: [Training Instance](https://training.app.appsmith.com/user/signup) 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Go to this [Training Workspace](https://optum-training.app.appsmith.com/applications?workspaceId=66053dafa476fb4189c2713d) and fork **Activity 1** App to your newly created Workspace. +3. Share access to this workspace to **Training Admin** as Administrator -## Creating a Package +4. From the workspace, click on the top right info icon. Then click on **Chat with us**. This is our support assistant that can help you on any issues. Go ahead and send a test message + +## Advanced JavaScript and API Integrations
@@ -39,7 +41,7 @@ formatDate: (dateString) => {
-## Connecting a package to your App +## Embedding Appsmith Applications and Facilitating Communication * Now go to the edit mode of your App, and clicking on the JS tab on left sidebar. * Click on new JS Object, and you will be able to find your module **DateFns** that can be added under the Package **Utils**. @@ -54,7 +56,7 @@ DateFns1.formateDate(currentRow.dob) * Lets also head to the **List View** Page from the side bar, and do the same changes for the date inside the text widget. * Go ahead and click on the Deploy button on the top right to deploy your App and view it with the new changes you have made. -## Republishing a package +## Creating Custom Widgets * Let us also try changing the date format inside the package and see how the changes are reflected across these pages. * Head back to the workspace and click on Edit of your **Utils** package. @@ -63,26 +65,5 @@ DateFns1.formateDate(currentRow.dob) * Click on deploy button again to start seeing your changes. * Great, you have successfully created a package with a module and reused it across multiple pages of your App. -## Adding a Query to a Package - -* We showed how to create a module inside a package, now lets exploring how to add a query to a package. -* Now lets go to the editor page of the App, and head to the **Table View** page. -* Here click on the Queries Tab on the left side bar, and you will see the Query **Select_public_users1**. Hover over it and click on the 3 dots next to it. -* Now click on the **Create a Module** and select **Add to Utils package**. -* You will see that your query has been automatically added to your existing Package and its reference is being used in the Page. You will also notice that it is auto filled with the arguments needed. -* Now you can go to the **List View** page, and go to the Queries tab on the side and click **New query/API**. -* Click on the **Select_public_users1** from **Utils** package and have it added to your Page. -* Now go to the List widget, and in its settings, connect the Items field to use the Query module you had recently added from the package. -* And thats it, you have successfully converted your Query in Table View page as a module, and reused it inside your List View page as well. - ## Deploy the App -Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made - -## Share App -Share the App (If not done already earlier) -
- -- Share to [tom@appsmith.com](mailto:tom@appsmith.com) and [sujoy@appsmith.com](mailto:sujoy@appsmith.com) as App Viewer -- Also try making it a public App by enabling **Make application public** and try opening it in incognito mode - -
\ No newline at end of file +Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made \ No newline at end of file diff --git a/website/docs/training/session-5.md b/website/docs/training/session-5.md new file mode 100755 index 0000000000..09bee69463 --- /dev/null +++ b/website/docs/training/session-5.md @@ -0,0 +1,90 @@ +--- +title: Session 4 +hide_title: false +--- + + + +## Getting Started + +**Ignore this if you were able to attend the previous Session.** + +1. Sign up on this instance: [Training Instance](https://training.app.appsmith.com/user/signup) + +2. Create a workspace of your own and name it as **\-Training-Workspace** + +3. Share access to this workspace to **Training Admin** as Administrator + +4. From the workspace, click on the top right info icon. Then click on **Chat with us**. This is our support assistant that can help you on any issues. Go ahead and send a test message + +## Creating a Package + +
+ +* On the workspace page, Click on **Create New** button and select New Package. +* Once inside the package, name this package as **Utils**. +* Then click on **New Module** and select JS Module and name it as **DateFns**. +* Now you will see a main file created for your DateFns module. +* Inside that introduce a function called **formatDate** that takes an argument dateString, and returns it formatted to **DD/MM/YYYY** +```jsx +formatDate: (dateString) => { + const date = new Date(dateString); + const options = { + day: '2-digit', + month: '2-digit', + year: 'numeric', + }; + return date.toLocaleString('en-GB', options); +} +``` +* Now publish this package by clicking the button on the top right. + +
+ +## Connecting a package to your App + +* Now go to the edit mode of your App, and clicking on the JS tab on left sidebar. +* Click on new JS Object, and you will be able to find your module **DateFns** that can be added under the Package **Utils**. +* Click on the **DateFns** and it will connect the newly created module to your App. +* Now head to your Table widget and go to any date column such as the dob. +* In the settings of this column, inside the Computed value, surround it by your module's function. +Example below +```jsx +DateFns1.formateDate(currentRow.dob) +``` +* Now you should be seeing the dob column formatted with date type DD/MM/YYYY inside the Table. +* Lets also head to the **List View** Page from the side bar, and do the same changes for the date inside the text widget. +* Go ahead and click on the Deploy button on the top right to deploy your App and view it with the new changes you have made. + +## Republishing a package + +* Let us also try changing the date format inside the package and see how the changes are reflected across these pages. +* Head back to the workspace and click on Edit of your **Utils** package. +* Inside the main file of your **DateFns** module, lets update the function to show the format as **Day Month Year** instead of DD/MM/YYYY. You can do this by modifying the month inside options to use **'long'** instead of '2-digit'. +* Now lets publish and head back to the Edit mode of your Application, and you will already see your changes being reflected inside the Editor for both pages **Table View** and **List View**. +* Click on deploy button again to start seeing your changes. +* Great, you have successfully created a package with a module and reused it across multiple pages of your App. + +## Adding a Query to a Package + +* We showed how to create a module inside a package, now lets exploring how to add a query to a package. +* Now lets go to the editor page of the App, and head to the **Table View** page. +* Here click on the Queries Tab on the left side bar, and you will see the Query **Select_public_users1**. Hover over it and click on the 3 dots next to it. +* Now click on the **Create a Module** and select **Add to Utils package**. +* You will see that your query has been automatically added to your existing Package and its reference is being used in the Page. You will also notice that it is auto filled with the arguments needed. +* Now you can go to the **List View** page, and go to the Queries tab on the side and click **New query/API**. +* Click on the **Select_public_users1** from **Utils** package and have it added to your Page. +* Now go to the List widget, and in its settings, connect the Items field to use the Query module you had recently added from the package. +* And thats it, you have successfully converted your Query in Table View page as a module, and reused it inside your List View page as well. + +## Deploy the App +Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made + +## Share App +Share the App (If not done already earlier) +
+ +- Share to [tom@appsmith.com](mailto:tom@appsmith.com) and [sujoy@appsmith.com](mailto:sujoy@appsmith.com) as App Viewer +- Also try making it a public App by enabling **Make application public** and try opening it in incognito mode + +
\ No newline at end of file From f8db4130da34ec8cbd0c0e0330fa88eb700691ae Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Mon, 3 Mar 2025 19:17:09 +0530 Subject: [PATCH 26/43] Minor changes across basic instructions and added steps for the Session 3. --- website/docs/training/day-2-agenda.md | 2 +- website/docs/training/session-2.md | 4 +- website/docs/training/session-3.md | 99 +++++++++++++++++++++++---- website/docs/training/session-4.md | 4 +- website/docs/training/session-5.md | 2 +- website/sidebars.js | 1 + 6 files changed, 93 insertions(+), 19 deletions(-) diff --git a/website/docs/training/day-2-agenda.md b/website/docs/training/day-2-agenda.md index 68c7461194..e898e3613c 100644 --- a/website/docs/training/day-2-agenda.md +++ b/website/docs/training/day-2-agenda.md @@ -20,7 +20,7 @@ Enhance your Appsmith skills by exploring version control, CI/CD, advanced integ -### [2. Configuring Multiple Environments and Setting Up CI/CD Pipelines](/training/session-3#configuring-multiple-environments-and-setting-up-ci-cd-pipelines) +### [2. Configuring Multiple Environments and Setting Up CI/CD Pipelines](/training/session-3#configuring-multiple-environments-and-setting-up-cicd-pipelines)
- **Environment Variables:** Learn how to configure multiple environments like Development, Staging, and Production. diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index 4a4119abed..8037927cd1 100755 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -13,9 +13,9 @@ hide_title: false 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Share access to this workspace to **Training Admin** as Administrator +3. Share access to this workspace to **Training Admin** as an Administrator -4. From the workspace, click on the top right info icon. Then click on **Chat with us**. This is our support assistant that can help you on any issues. Go ahead and send a test message +4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. ## Customizing and Enhancing Functionality with Code diff --git a/website/docs/training/session-3.md b/website/docs/training/session-3.md index f4b6bb4882..a8c89016aa 100755 --- a/website/docs/training/session-3.md +++ b/website/docs/training/session-3.md @@ -13,33 +13,106 @@ hide_title: false 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Share access to this workspace to **Training Admin** as Administrator +3. Share access to this workspace to **Training Admin** as an Administrator -4. From the workspace, click on the top right info icon. Then click on **Chat with us**. This is our support assistant that can help you on any issues. Go ahead and send a test message +4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. ## Version Control: Development Process and Collaboration +1. **Setting up your GIT branches** + +
+ +* Open the **Git-connected App** in your workspace and click **Edit** to enter the Editor mode. +* Look at the **bottom-left corner**; you will see that you are currently on the **master** branch. +* Click on the branch name, and a popover will appear listing all branches (both local and remote). +* Create a new branch: + - Enter **\-prod** as the branch name. + - This will create a **production branch** from the master branch. +* After switching to the **prod** branch: + - Click the **Cog icon ⚙️** on the bottom bar to open Git settings. + - Under the **Branch tab**, set **\-prod** as the default branch. +* Now, create another branch: + - Open the branch list, type **\-dev**, and create a **development branch** from your production branch. + +
+ +2. **Making changes and commiting to GIT** +
-* You will see the App made available to you. Hover on top of it and click on edit to land on the editor page of the App. -* On the bottom left you will notice that you are currently in the **develop** branch of the App. -* Now click on it and a popover will show up listing all the branches the App has so far, both locally and in the remote GIT. -* Enter a branch name, call the branch as **\-dev**, and you will create a feature branch on top of the develop branch. -* Make some changes as you wish on the page. Introduce or remove some widgets, align it however across the page. You can also add a new page and make changes. -* Now click on the + button next to the branch name, and a modal will popup showing you the **Deploy** Tab. -* You will be able to review the changes. Additionally add a note on what are the changes you have made for future reference, and click the **Commit & Push** button to commit these changes and push it your remote branch. +* Make some changes in your app: + - Add new widgets, update styling, or create a new page. +* Once you are done, Click the **+ button** next to the branch name and a modal will pop up. +* In the modal, go to the **Deploy Tab**: + - Review the changes. + - Add a commit message to describe your changes. + - Click **Commit & Push** to push changes to your remote branch. * Great, you have successfully commited your changes to your very own dev branch of this Application. +* You can preview the deployed version by + - Click on **Deploy > Latest deployed preview** + - By changing value of branch to `?branch=` in your app's URL. + +
+ +3. **Merging your changes** + +
+ +* Click the **+ button** again to open the modal. +* Navigate to the **Merge Tab**. +* Select **\-prod** as the target branch to merge your **dev** branch changes. +* Check for merge conflicts before proceeding. +* After merging: + - Switch to the **prod** branch from the GIT branches list. + - Click the **down arrow** (⬇) next to the branch name to pull the latest changes. + - Click **Deploy > Latest deployed preview** to see the updated app in production. + +
+ +4. **Resolving conflicts** + +
+ +* Merge conflicts occur when two users make conflicting changes to the same part of an app. Here's how to resolve them: +* If there is a **conflict warning** during merge, you will need to go to the Github repo and create a Pull Request from your develop to prod branch +* In the PR you will see the same conflicts, and based on it, would get option to resolve it from Github itself +* In the case where there are major conflicts, Github will recommend to checkout the repository in your local and resolve them manually
## Configuring Multiple Environments and Setting Up CI/CD Pipelines +### 1. Creating and Managing Multiple Environments +
+ +* Open your **Application** and navigate to the **Datasources** page (bottom-left corner). +* Click on any **existing datasource** and select **Edit**. +* On the right panel, you will notice: + - **Production Environment** is already configured as the default. + - **Staging Environment** can be configured manually. +* Click on **Manage Environments** at the bottom. +* Here, you can: + - Create new environments (e.g., **Development, QA, UAT**). + - View how many datasources are already configured for each environment across your workspace. + +
+ +### 2. Automating Deployments with CI/CD
-* Next, lets go back to the same Modal by clicking on the + symbol button on the bottom left. -* This time lets head to the **Merge** Tab. -* Select the branch you want to merge your dev branch's changes to. In this case it will be the **develop** branch. -* Now lets see if you are all good to merge or will there be any conflicts. +* Open the **Application** for which you want to set up CI/CD, preferably the one in the production instance/workspace. +* Click the **⚙️ (Cog icon)** to open **Git Settings** and go to the **Continuous Delivery** tab. +* Here, you'll see setup instructions along with a **cURL command** for the master branch. +* Click **Generate Bearer Token** to create an authentication token. +* Open the [Appsmith CI/CD documentation](https://docs.appsmith.com/advanced-concepts/version-control-with-git/cd-with-git) and choose a deployment tool (e.g., **GitHub Actions**). +* Follow the instructions to create a **GitHub Action** and copy-paste the YAML code. +* Replace the cURL command in the YAML file with: + - The command generated for your application. + - The **Bearer Token** from Appsmith. +* **Best Practice:** Store the **Bearer Token** as a **GitHub Secret** and reference it in your YAML file instead of hardcoding it. +* After saving the changes to your YAML file, check the confirmation box and click **Finish Setup**. +* Now, any time changes are merged, pushed, or committed to the **master branch**, the application will automatically redeploy with the latest updates.
diff --git a/website/docs/training/session-4.md b/website/docs/training/session-4.md index 3dd7dc5c85..a2c87b7c30 100755 --- a/website/docs/training/session-4.md +++ b/website/docs/training/session-4.md @@ -13,9 +13,9 @@ hide_title: false 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Share access to this workspace to **Training Admin** as Administrator +3. Share access to this workspace to **Training Admin** as an Administrator -4. From the workspace, click on the top right info icon. Then click on **Chat with us**. This is our support assistant that can help you on any issues. Go ahead and send a test message +4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. ## Advanced JavaScript and API Integrations diff --git a/website/docs/training/session-5.md b/website/docs/training/session-5.md index 09bee69463..3300063943 100755 --- a/website/docs/training/session-5.md +++ b/website/docs/training/session-5.md @@ -15,7 +15,7 @@ hide_title: false 3. Share access to this workspace to **Training Admin** as Administrator -4. From the workspace, click on the top right info icon. Then click on **Chat with us**. This is our support assistant that can help you on any issues. Go ahead and send a test message +4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. ## Creating a Package diff --git a/website/sidebars.js b/website/sidebars.js index 00638e9f1e..6ea7049e91 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -16,6 +16,7 @@ const sidebars = { label: 'Appsmith Training Day 2', collapsed: false, items: [ + 'training/day-2-agenda', 'training/session-3', 'training/session-4' ] From 9a10d3ef6ad8f5262c88010e42a1d1bb6d59ce1e Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Mon, 3 Mar 2025 21:26:04 +0530 Subject: [PATCH 27/43] Made first draft for the content for Session 4. --- website/docs/training/day-2-agenda.md | 2 +- website/docs/training/session-4.md | 87 ++++++++++++++++----------- 2 files changed, 53 insertions(+), 36 deletions(-) diff --git a/website/docs/training/day-2-agenda.md b/website/docs/training/day-2-agenda.md index e898e3613c..719d6c3423 100644 --- a/website/docs/training/day-2-agenda.md +++ b/website/docs/training/day-2-agenda.md @@ -33,7 +33,7 @@ Enhance your Appsmith skills by exploring version control, CI/CD, advanced integ - **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 JavaScript. +- **Error Handling & Debugging:** Learn best practices for handling API failures and debugging in Appsmith. diff --git a/website/docs/training/session-4.md b/website/docs/training/session-4.md index a2c87b7c30..da4c45a104 100755 --- a/website/docs/training/session-4.md +++ b/website/docs/training/session-4.md @@ -19,51 +19,68 @@ hide_title: false ## Advanced JavaScript and API Integrations +1. **Custom JS Libraries** + +
+ +* Click on the Libraries icon, second last from the bottom on the left pane +* Here, you will find pre-installed libraries like **lodash** and **moment.js**, along with an option to **Add new libraries**. +* Browse through the **Recommended Libraries** or search for other libraries via [jsDelivr](https://www.jsdelivr.com). +* You will also see an option to add other libraries from the site [jsDelivr](https://www.jsdelivr.com) +* Search for **currency.js** and select it. +* Copy the URL from the **src** tag or use the direct link below: + +
+ Show library url +
+ ```jsx + https://cdn.jsdelivr.net/npm/currency.js@2.0.4/dist/currency.min.js + ``` +
+
+ +* Paste the copied link into the Add JS Library input field and click Install. +* Once installed, you can now use the currency.js functions anywhere in your Appsmith app. +* Example: + - Drag and drop a Text widget. + - Enter a large numeric value with moustache brackets `{{}}` + - Surround the value with the currency function to display the amount in a properly formatted currency. + ```jsx currency(value).format()``` + +
+ +2. **API Chaining and Error handling with Javascript** +
-* On the workspace page, Click on **Create New** button and select New Package. -* Once inside the package, name this package as **Utils**. -* Then click on **New Module** and select JS Module and name it as **DateFns**. -* Now you will see a main file created for your DateFns module. -* Inside that introduce a function called **formatDate** that takes an argument dateString, and returns it formatted to **DD/MM/YYYY** -```jsx -formatDate: (dateString) => { - const date = new Date(dateString); - const options = { - day: '2-digit', - month: '2-digit', - year: 'numeric', - }; - return date.toLocaleString('en-GB', options); -} -``` -* Now publish this package by clicking the button on the top right. +* Use async/await to chain multiple API calls and queries in a controlled sequence. +* Implement try/catch or .then/.catch for error handling to manage failures gracefully. +* Utilize Promises to run multiple actions in parallel while maintaining control over their execution flow. + +
+ +3. **Debugger** + +
+ +* Click the Debug button at the bottom-right corner of the Editor to open the Debugger Console +* The Logs section displays: + - Actions triggered by widgets (e.g., button clicks). + - API requests and responses, including success/failure status. +* The Linter tab highlights widgets with issues and clicking on an error will navigate directly to the affected widget for quick fixes +* Open the Network Tab in the Developer tool of the Browser. Whenever an API/Query is triggered, the tab shows the follow details + - API requests wrapped in executeAction (in Edit mode). + - Sent parameters and the endpoint being called in the requests + - In View mode, the API request is seen but additional details like endpoint and parameters are hidden for security reasons.
## Embedding Appsmith Applications and Facilitating Communication -* Now go to the edit mode of your App, and clicking on the JS tab on left sidebar. -* Click on new JS Object, and you will be able to find your module **DateFns** that can be added under the Package **Utils**. -* Click on the **DateFns** and it will connect the newly created module to your App. -* Now head to your Table widget and go to any date column such as the dob. -* In the settings of this column, inside the Computed value, surround it by your module's function. -Example below -```jsx -DateFns1.formateDate(currentRow.dob) -``` -* Now you should be seeing the dob column formatted with date type DD/MM/YYYY inside the Table. -* Lets also head to the **List View** Page from the side bar, and do the same changes for the date inside the text widget. -* Go ahead and click on the Deploy button on the top right to deploy your App and view it with the new changes you have made. ## Creating Custom Widgets -* Let us also try changing the date format inside the package and see how the changes are reflected across these pages. -* Head back to the workspace and click on Edit of your **Utils** package. -* Inside the main file of your **DateFns** module, lets update the function to show the format as **Day Month Year** instead of DD/MM/YYYY. You can do this by modifying the month inside options to use **'long'** instead of '2-digit'. -* Now lets publish and head back to the Edit mode of your Application, and you will already see your changes being reflected inside the Editor for both pages **Table View** and **List View**. -* Click on deploy button again to start seeing your changes. -* Great, you have successfully created a package with a module and reused it across multiple pages of your App. + ## Deploy the App Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made \ No newline at end of file From 1f48e16b604a665b5e6056ac246b87989abdf8ed Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 4 Mar 2025 08:45:47 +0530 Subject: [PATCH 28/43] Added content for Embedding and communication. --- website/docs/training/day-2-agenda.md | 7 +++--- website/docs/training/session-4.md | 33 ++++++++++++++++++++++++--- 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/website/docs/training/day-2-agenda.md b/website/docs/training/day-2-agenda.md index 719d6c3423..06763fd042 100644 --- a/website/docs/training/day-2-agenda.md +++ b/website/docs/training/day-2-agenda.md @@ -53,11 +53,12 @@ Enhance your Appsmith skills by exploring version control, CI/CD, advanced integ -### [6. Hands-On Task](https://training.app.appsmith.com/app/task-2/home-67bdd31349bf245ac087e8fe) +### [6. Hands-On Task](https://community.appsmith.com/tutorial/how-create-your-own-custom-navigation-bar-nested-items-and-icons)
-- **Objective:** Build an advanced app incorporating Git, custom JavaScript, and custom widgets. -- **Challenge:** Implement a feature using multiple environments and integrate with a third-party API. +* **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)
diff --git a/website/docs/training/session-4.md b/website/docs/training/session-4.md index da4c45a104..1225578282 100755 --- a/website/docs/training/session-4.md +++ b/website/docs/training/session-4.md @@ -33,9 +33,7 @@ hide_title: false
Show library url
- ```jsx - https://cdn.jsdelivr.net/npm/currency.js@2.0.4/dist/currency.min.js - ``` + ```https://cdn.jsdelivr.net/npm/currency.js@2.0.4/dist/currency.min.js```
@@ -77,6 +75,35 @@ hide_title: false ## Embedding Appsmith Applications and Facilitating Communication +1. **Embedding applications** + +
+ +* Click on the **Share** button in the top-right corner to open the **Share Modal**. +* Navigate to the **Embed** tab to view the **Embed URL** and a **Preview embedded app** option. +* Configure embed settings based on access requirements: + - **Public Embed:** Making the App public allows anyone to access the embedded app. + - **Private Embed:** Requires authentication to access the embedded content. +* For **private embeds**, you can also pass an **SSO method** in the embed URL to authenticate users seamlessly. + +
+ +2. **Communicating between Appsmith Embeds and Parent page** + +
+ +* Appsmith provides methods to enable two-way communication between the **embedded app** and the **parent page** +* Use `postWindowMessage()` to send data or events from Appsmith to the parent page. + ```postWindowMessage("Appsmith Ready", { status: "initialized" });``` +* Use `windowMessageListener()` in Appsmith to listen for messages from the parent page and trigger actions accordingly. + ```jsx + windowMessageListener((message) => { + if (message.data === "refresh") { + getData.run(); // Trigger an action inside Appsmith + } + }); + ``` +
## Creating Custom Widgets From 85d2fb00e30fb797be95d30b71c941016bf2aff7 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 4 Mar 2025 11:26:02 +0530 Subject: [PATCH 29/43] RAdded content for the changes related to Custom widget. --- website/docs/training/session-4.md | 63 +++++++++++++++++++++++++++--- 1 file changed, 57 insertions(+), 6 deletions(-) diff --git a/website/docs/training/session-4.md b/website/docs/training/session-4.md index 1225578282..53f92589ab 100755 --- a/website/docs/training/session-4.md +++ b/website/docs/training/session-4.md @@ -63,13 +63,13 @@ hide_title: false * Click the Debug button at the bottom-right corner of the Editor to open the Debugger Console * The Logs section displays: - - Actions triggered by widgets (e.g., button clicks). - - API requests and responses, including success/failure status. + - Actions triggered by widgets (e.g., button clicks). + - API requests and responses, including success/failure status. * The Linter tab highlights widgets with issues and clicking on an error will navigate directly to the affected widget for quick fixes * Open the Network Tab in the Developer tool of the Browser. Whenever an API/Query is triggered, the tab shows the follow details - - API requests wrapped in executeAction (in Edit mode). - - Sent parameters and the endpoint being called in the requests - - In View mode, the API request is seen but additional details like endpoint and parameters are hidden for security reasons. + - API requests wrapped in executeAction (in Edit mode). + - Sent parameters and the endpoint being called in the requests + - In View mode, the API request is seen but additional details like endpoint and parameters are hidden for security reasons. @@ -107,7 +107,58 @@ hide_title: false ## Creating Custom Widgets +1. **Configuring Custom Widget** +
+ +* Drag and drop a **Custom Widget** from the **Widgets pane** onto the canvas. +* In the widget settings, click **Go to Source Editor** to open the **Custom Widget Editor**. +* The editor provides three coding tabs: **HTML, CSS, and JS**, along with an **AI tab** where our AI Copilot helps you generate code. +* Click on **Editable Data Grid Widget** in the **AI Copilot**, and it will auto-generate code across the tabs for the custom widget. +* Review the generated code to understand how it works. + +
+ +2. **Connecting data model** + +
+ +* Return to the **Main Editor** and select the **Custom Widget** to open its settings. +* Locate the **Default Model** section, which contains dummy data. +* Modify the **Default Model** to fetch data from one of your existing queries. Below is an example for a query named as getUsers.data + ```jsx + {{ + { + data: getUsers.data + } + }} + ``` +* The widget will automatically re-render when the data updates, thanks to the onModelChange event in the Custom widget. +* The onModelChange event ensures that the component updates whenever the Data Model changes + ```jsx + appsmith.onModelChange((model, prevModel) => { + if (JSON.stringify(model.data) !== JSON.stringify(prevModel?.data)) { + setData(model.data && Array.isArray(model.data) ? model.data : fallbackData); + } + }); + ``` + +
+ +3. **Configuring Custom Events** + +
+ +* Inside the Settings panel, navigate to Events and add a new event named onCellEdit. +* Configure the action to Show Alert, and set the message as ```{{`Cell to Update: Column ${column}, Row: ${rowIndex}, Value: ${value}`}}``` +* Now, go back to the Custom Widget Editor and locate the following line of code like ```appsmith.triggerEvent```. This will trigger any event that you have configured if you pass the event name, and the data as an object. Below it calls the onCellEdit and passes the column, rowIndex and value +```appsmith.triggerEvent("onCellEdit", { column: columList[col], rowIndex: row, value: newValue.data });``` +* Ensure that the event name matches the one you created in the settings. If different, update either the event name or the custom widget code accordingly. +* You have successfully configured a Custom Widget and linked it with your app's data. + - Experiment with additional functionalities and customization options. + - For more details, refer to the [documentation](https://docs.appsmith.com/reference/widgets/custom) + +
## Deploy the App -Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made \ No newline at end of file +Go ahead and click on the Deploy button on the top right. This time you will have to commit your changes. Post that you can view the App with the latest changes you have made. \ No newline at end of file From 01cd22924db1538d3f978dc6a3a181518c6aac5d Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 4 Mar 2025 16:20:30 +0530 Subject: [PATCH 30/43] Minor updates. --- website/docs/training/session-4.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/website/docs/training/session-4.md b/website/docs/training/session-4.md index 53f92589ab..a8efacaaaf 100755 --- a/website/docs/training/session-4.md +++ b/website/docs/training/session-4.md @@ -43,7 +43,7 @@ hide_title: false - Drag and drop a Text widget. - Enter a large numeric value with moustache brackets `{{}}` - Surround the value with the currency function to display the amount in a properly formatted currency. - ```jsx currency(value).format()``` + ```jsx currency(10899.99, { symbol: "$", precision: 0 }).format()``` @@ -154,11 +154,12 @@ hide_title: false * Now, go back to the Custom Widget Editor and locate the following line of code like ```appsmith.triggerEvent```. This will trigger any event that you have configured if you pass the event name, and the data as an object. Below it calls the onCellEdit and passes the column, rowIndex and value ```appsmith.triggerEvent("onCellEdit", { column: columList[col], rowIndex: row, value: newValue.data });``` * Ensure that the event name matches the one you created in the settings. If different, update either the event name or the custom widget code accordingly. -* You have successfully configured a Custom Widget and linked it with your app's data. - - Experiment with additional functionalities and customization options. - - For more details, refer to the [documentation](https://docs.appsmith.com/reference/widgets/custom) +Congratulations :tada: You have successfully configured a Custom Widget and linked it with your app's data. + - Experiment with additional functionalities and customization options. + - For more details, refer to the [documentation](https://docs.appsmith.com/reference/widgets/custom) + ## Deploy the App Go ahead and click on the Deploy button on the top right. This time you will have to commit your changes. Post that you can view the App with the latest changes you have made. \ No newline at end of file From e4d242585652d64648889fddc87cfef1ec96ccf4 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 4 Mar 2025 17:46:17 +0530 Subject: [PATCH 31/43] AEnabling Day 2 training topics. --- website/sidebars.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/sidebars.js b/website/sidebars.js index 6ea7049e91..5197a06d7f 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -11,7 +11,7 @@ const sidebars = { 'training/session-1', 'training/session-2' ] - }/*,{ + },{ type: 'category', label: 'Appsmith Training Day 2', collapsed: false, @@ -20,7 +20,7 @@ const sidebars = { 'training/session-3', 'training/session-4' ] - }, //training end */ + }, //training end ], }; From fb3a906024611e8d650ec945a01dcc2a9b19ef74 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Tue, 4 Mar 2025 22:50:22 +0530 Subject: [PATCH 32/43] minor fixes. --- website/docs/training/session-3.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/training/session-3.md b/website/docs/training/session-3.md index a8c89016aa..2c503738af 100755 --- a/website/docs/training/session-3.md +++ b/website/docs/training/session-3.md @@ -50,8 +50,8 @@ hide_title: false - Click **Commit & Push** to push changes to your remote branch. * Great, you have successfully commited your changes to your very own dev branch of this Application. * You can preview the deployed version by - - Click on **Deploy > Latest deployed preview** - - By changing value of branch to `?branch=` in your app's URL. + - Click on **Deploy > Latest deployed preview** + - By changing value of branch to `?branch=` in your app's URL. From c5565bdbb7dcade3cb2af7cdf9f20600a68e2d87 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Thu, 6 Mar 2025 12:26:35 +0530 Subject: [PATCH 33/43] Added Day 3 and its respective session 5. --- website/docs/training/day-3-agenda.md | 46 ++++++++++++ website/docs/training/session-2.md | 2 +- website/docs/training/session-3.md | 2 +- website/docs/training/session-4.md | 2 +- website/docs/training/session-5.md | 101 +++++++++++++++----------- website/sidebars.js | 10 ++- 6 files changed, 117 insertions(+), 46 deletions(-) create mode 100644 website/docs/training/day-3-agenda.md diff --git a/website/docs/training/day-3-agenda.md b/website/docs/training/day-3-agenda.md new file mode 100644 index 0000000000..0570329eb1 --- /dev/null +++ b/website/docs/training/day-3-agenda.md @@ -0,0 +1,46 @@ +--- +title: "Agenda" +hide_title: false +--- + +# Day 3: Appsmith Training Agenda +## Enterprise Features +
+ +Enhance your Appsmith expertise by exploring **reusability**, **workflow automation**, **access control**, and **audit logging** to build secure, scalable applications. + +
+ +### [1. Reusability with Appsmith Packages](/training/session-3#reusability-with-appsmith-packages) +
+ +* **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. + +
+ +### [2. Designing and Managing Complex Workflows](/training/session-3#designing-and-managing-complex-workflows) +
+ +* **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 + +
+ +### [3. Implementing Granular Access Control and Programmatic Permissions](/training/session-3#implementing-granular-access-control-and-programmatic-permissions) +
+ +* **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 + +
+ +### [4. Utilizing Audit Logs for Monitoring and Compliance](/training/session-3#utilizing-audit-logs-for-monitoring-and-compliance) +
+ +* **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. + +
diff --git a/website/docs/training/session-2.md b/website/docs/training/session-2.md index 8037927cd1..ab8c932358 100755 --- a/website/docs/training/session-2.md +++ b/website/docs/training/session-2.md @@ -13,7 +13,7 @@ hide_title: false 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Share access to this workspace to **Training Admin** as an Administrator +3. Share access to your workspace to **Training Admin** as an Administrator 4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. diff --git a/website/docs/training/session-3.md b/website/docs/training/session-3.md index 2c503738af..96739ca441 100755 --- a/website/docs/training/session-3.md +++ b/website/docs/training/session-3.md @@ -13,7 +13,7 @@ hide_title: false 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Share access to this workspace to **Training Admin** as an Administrator +3. Share access to your workspace to **Training Admin** as an Administrator 4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. diff --git a/website/docs/training/session-4.md b/website/docs/training/session-4.md index a8efacaaaf..28cc88e669 100755 --- a/website/docs/training/session-4.md +++ b/website/docs/training/session-4.md @@ -13,7 +13,7 @@ hide_title: false 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Share access to this workspace to **Training Admin** as an Administrator +3. Share access to your workspace to **Training Admin** as an Administrator 4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. diff --git a/website/docs/training/session-5.md b/website/docs/training/session-5.md index 3300063943..b4795e6601 100755 --- a/website/docs/training/session-5.md +++ b/website/docs/training/session-5.md @@ -13,78 +13,95 @@ hide_title: false 2. Create a workspace of your own and name it as **\-Training-Workspace** -3. Share access to this workspace to **Training Admin** as Administrator +3. Share access to your workspace to **Training Admin** as Administrator 4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. -## Creating a Package +## Reusability with Appsmith Packages + +1. **Creating a Package**
* On the workspace page, Click on **Create New** button and select New Package. -* Once inside the package, name this package as **Utils**. -* Then click on **New Module** and select JS Module and name it as **DateFns**. -* Now you will see a main file created for your DateFns module. -* Inside that introduce a function called **formatDate** that takes an argument dateString, and returns it formatted to **DD/MM/YYYY** +* Once inside the package, name this package from the top as **My Package**. +* Then click on **New Module** and select JS Module. +* Now you will see a JSObject created. Name this as **DateFns**. +* Inside that introduce a function called **getUserAge** that takes an argument **dateString**, and returns the age ```jsx -formatDate: (dateString) => { - const date = new Date(dateString); - const options = { - day: '2-digit', - month: '2-digit', - year: 'numeric', - }; - return date.toLocaleString('en-GB', options); +getUserAge: (dateString) => { + return moment().diff(moment(dateString, 'years')); } ``` * Now publish this package by clicking the button on the top right.
-## Connecting a package to your App +2. **Connecting a package to your App** + +
* Now go to the edit mode of your App, and clicking on the JS tab on left sidebar. -* Click on new JS Object, and you will be able to find your module **DateFns** that can be added under the Package **Utils**. -* Click on the **DateFns** and it will connect the newly created module to your App. -* Now head to your Table widget and go to any date column such as the dob. -* In the settings of this column, inside the Computed value, surround it by your module's function. +* Click on new JS Object, and you will be able to add your module **DateFns** to your App. +* Now head to your Table widget which is connected to user data. Go to the age column you had created before, else create a custom column +* In the settings of this column, inside the Computed value field, surround it with your module's function. Example below ```jsx -DateFns1.formateDate(currentRow.dob) +DateFns1.getUserAge(currentRow.dob) ``` -* Now you should be seeing the dob column formatted with date type DD/MM/YYYY inside the Table. -* Lets also head to the **List View** Page from the side bar, and do the same changes for the date inside the text widget. +* Now you should be seeing the column on Table having ages for all users. * Go ahead and click on the Deploy button on the top right to deploy your App and view it with the new changes you have made. -## Republishing a package +
+ +3. **Republishing a package** -* Let us also try changing the date format inside the package and see how the changes are reflected across these pages. -* Head back to the workspace and click on Edit of your **Utils** package. -* Inside the main file of your **DateFns** module, lets update the function to show the format as **Day Month Year** instead of DD/MM/YYYY. You can do this by modifying the month inside options to use **'long'** instead of '2-digit'. -* Now lets publish and head back to the Edit mode of your Application, and you will already see your changes being reflected inside the Editor for both pages **Table View** and **List View**. +
+ +* Let us also try making some changes inside the package and see how the changes are reflected across in your Apps. +* Head back to the workspace and click on edit on package named **My Package**. +* Inside the main file of your **DateFns** module, lets update the function to show the text **years** along with the age. +```return moment().diff(moment(dateString, 'years')) + " years";``` +* Now lets publish and head back to the Edit mode of your Application, and you will already see your changes being reflected inside the Editor in your Table widget. * Click on deploy button again to start seeing your changes. * Great, you have successfully created a package with a module and reused it across multiple pages of your App. -## Adding a Query to a Package +
-* We showed how to create a module inside a package, now lets exploring how to add a query to a package. -* Now lets go to the editor page of the App, and head to the **Table View** page. -* Here click on the Queries Tab on the left side bar, and you will see the Query **Select_public_users1**. Hover over it and click on the 3 dots next to it. -* Now click on the **Create a Module** and select **Add to Utils package**. +4. **Converting a Query/JSObject into a Package** + +
+ +* We showed how to create a module inside a package, now lets explore how to add a query to a package. +* Now lets go to the editor page of the App, and head to the queries in the page. +* You will see the Query **Select_public_users1** or the equivalent of it in your App. Hover over it and click on the 3 dots next to it. +* Now click on the **Create a Module** and select **Add to My Package**. * You will see that your query has been automatically added to your existing Package and its reference is being used in the Page. You will also notice that it is auto filled with the arguments needed. -* Now you can go to the **List View** page, and go to the Queries tab on the side and click **New query/API**. -* Click on the **Select_public_users1** from **Utils** package and have it added to your Page. -* Now go to the List widget, and in its settings, connect the Items field to use the Query module you had recently added from the package. -* And thats it, you have successfully converted your Query in Table View page as a module, and reused it inside your List View page as well. +* And thats it, you have successfully converted your Query as a module + +
+ +## Utilizing Audit Logs for Monitoring and Compliance + +1. **Viewing Audit Logs** -## Deploy the App -Go ahead and click on the Deploy button on the top right and redeploy your App and view it with the new changes you have made +
+ +* Navigate to **Admin Settings → Audit Logs**. + *(Ensure you have the necessary permissions granted by your instance administrator.)* +* Here you can view: + - **User Activity:** Logins, sign-ups, and invitations. + - **Application Modifications:** Changes in queries, deployments, and settings. + - **Access Logs:** Identify who viewed, edited, or modified the application. + +
-## Share App -Share the App (If not done already earlier) +2. **Filtering and Analyzing Logs**
-- Share to [tom@appsmith.com](mailto:tom@appsmith.com) and [sujoy@appsmith.com](mailto:sujoy@appsmith.com) as App Viewer -- Also try making it a public App by enabling **Make application public** and try opening it in incognito mode +* Use filters such as **Events**, **Users**, or **Date Range** to refine log records. +* Example: + - Find instances where a specific query was executed by multiple users within a selected time period. +* Click the **three-dot menu** (top-right) to **⬇ Download** the audit logs for further analysis or compliance review.
\ No newline at end of file diff --git a/website/sidebars.js b/website/sidebars.js index 5197a06d7f..c3b4f91e7f 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -20,7 +20,15 @@ const sidebars = { 'training/session-3', 'training/session-4' ] - }, //training end + },/*{ + type: 'category', + label: 'Appsmith Training Day 3', + collapsed: false, + items: [ + 'training/day-3-agenda', + 'training/session-5' + ] + } //training end*/ ], }; From 7afecae9f8376de91217cd4c9801a18624dc7698 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Thu, 6 Mar 2025 16:39:11 +0530 Subject: [PATCH 34/43] Added content for workflows. Added another session 6 and minor changes. --- website/docs/training/day-3-agenda.md | 8 +- website/docs/training/session-5.md | 104 ++++++++++++++++++++++---- website/docs/training/session-6.md | 43 +++++++++++ website/sidebars.js | 3 +- 4 files changed, 138 insertions(+), 20 deletions(-) create mode 100644 website/docs/training/session-6.md diff --git a/website/docs/training/day-3-agenda.md b/website/docs/training/day-3-agenda.md index 0570329eb1..0b5f6aa539 100644 --- a/website/docs/training/day-3-agenda.md +++ b/website/docs/training/day-3-agenda.md @@ -11,7 +11,7 @@ Enhance your Appsmith expertise by exploring **reusability**, **workflow automat -### [1. Reusability with Appsmith Packages](/training/session-3#reusability-with-appsmith-packages) +### [1. Reusability with Appsmith Packages](/training/session-5#reusability-with-appsmith-packages)
* **Introduction to Appsmith Packages:** Learn how to create and use reusable JS Objects and Queries. @@ -20,7 +20,7 @@ Enhance your Appsmith expertise by exploring **reusability**, **workflow automat
-### [2. Designing and Managing Complex Workflows](/training/session-3#designing-and-managing-complex-workflows) +### [2. Designing and Managing Complex Workflows](/training/session-5#designing-and-managing-complex-workflows)
* **Human-in-the-Loop Workflows:** Implement workflows where manual approvals or interventions are required before proceeding. @@ -28,7 +28,7 @@ Enhance your Appsmith expertise by exploring **reusability**, **workflow automat
-### [3. Implementing Granular Access Control and Programmatic Permissions](/training/session-3#implementing-granular-access-control-and-programmatic-permissions) +### [3. Implementing Granular Access Control and Programmatic Permissions](/training/session-6#implementing-granular-access-control-and-programmatic-permissions)
* **Role-Based Access Control (RBAC):** Configure user roles and permissions for better security. @@ -36,7 +36,7 @@ Enhance your Appsmith expertise by exploring **reusability**, **workflow automat
-### [4. Utilizing Audit Logs for Monitoring and Compliance](/training/session-3#utilizing-audit-logs-for-monitoring-and-compliance) +### [4. Utilizing Audit Logs for Monitoring and Compliance](/training/session-6#utilizing-audit-logs-for-monitoring-and-compliance)
* **Understanding Audit Logs:** Track user activities and changes made within the application. diff --git a/website/docs/training/session-5.md b/website/docs/training/session-5.md index b4795e6601..592928aa25 100755 --- a/website/docs/training/session-5.md +++ b/website/docs/training/session-5.md @@ -1,5 +1,5 @@ --- -title: Session 4 +title: Session 5 hide_title: false --- @@ -81,27 +81,101 @@ DateFns1.getUserAge(currentRow.dob)
-## Utilizing Audit Logs for Monitoring and Compliance +## Designing and Managing Complex Workflows -1. **Viewing Audit Logs** +1. Creating a Basic Workflow
-* Navigate to **Admin Settings → Audit Logs**. - *(Ensure you have the necessary permissions granted by your instance administrator.)* -* Here you can view: - - **User Activity:** Logins, sign-ups, and invitations. - - **Application Modifications:** Changes in queries, deployments, and settings. - - **Access Logs:** Identify who viewed, edited, or modified the application. +* On the **Workspace** page, click **Create new** and select **Workflow**. +* You will be directed to the **Workflow Editor**. Name the workflow **My Workflow**. +* The editor contains a main file with a predefined function `executeWorkflow(data)`, where `data` is the input argument. +* Create a query named **getUsers** to fetch users from the database, filtering by name: +```Select * from public.users Where name ilike '{{this.params.name}}'``` +* Call the query inside executeWorkflow, passing an object with the name parameter: +```await getUsers.run({ name: data.name });``` +* Add a console statement like ```console.log('getUsers response', getUsers.data)``` and also ensure that the last line of the function is ```return true``` +* Run the function directly from the Workflow Editor: + - In the input field, enter the test object: +```{ "name": "Rose" }``` + - Observe the execution steps and responses on the right panel. Expand each step for details. +* Click Deploy (top-right), then navigate to a new application within the same workspace. +* Add a Query from the sidebar and select Workflows Query. +* Choose the workflow name from the list and set the Request Type to Trigger Workflow. +* Pass the same input object as before and click Run. You can also bind this query to a Button Widget to trigger it. +* Return to the Workflow Editor, go to Run History, and verify if the workflow execution was triggered successfully.
-2. **Filtering and Analyzing Logs** +2. Creating an Approval Workflow + +
+ +* Create a new workflow and name it **My Approval Workflow** +* In the workflow editor, assign an approval request inside the function using the below snippet of code: + ```jsx + let response = await appsmith.workflows.assignRequest({ + requestName: "Approval Process", + message: "Testing Approval Process", + requestToUsers: "", + requestToGroups: "", + metadata: data, + resolutions: ["Approve", "Reject"] + }) + ``` +* This creates an approval request with the specified resolutions and assigns it to the respective users or groups. +* The data argument is passed as metadata to the approval request. +* Next, handle the resolution when a user approves or rejects the request: + ```jsx + if ( response.resolution === "Approve" ) { + console.log("The request was approved"); + } else if ( response.resolution === "Reject" ) { + console.log("The request was rejected"); + } + ``` +* Click Deploy, and proceed to set up the application for this workflow. + +
+ +3. Creating an Approval Request from the App +
-* Use filters such as **Events**, **Users**, or **Date Range** to refine log records. -* Example: - - Find instances where a specific query was executed by multiple users within a selected time period. -* Click the **three-dot menu** (top-right) to **⬇ Download** the audit logs for further analysis or compliance review. +* Create a new Application and add a JSONForm Widget. +* Click on JS next to the Source Data and insert a JSON object with attributes: + ```firstName, lastName, address, email and department``` +* Navigate to the Query Tab, add a **Workflow Query** named ```submitRequest```, and select the workflow created earlier. +* Set the Request Type to **Trigger Request** +* Inside the Metadata field, pass the entire form data: + ```{{JSONForm1.formData}}``` +* In the JSONForm settings, set the **onSubmit** event to run this query. +* Fill out the form and click Submit to initiate a workflow request. +* To verify, go back to the **Workflow Editor -> Run History** to see the latest request in a pending state. + +
+ +4. Resolving the Request from the App + +
-
\ No newline at end of file +* Go back to the Application and create a new Page. +* Add a new Workflow Query named ```getPendingRequests```, select the Workflow, and use Request Type: **Get Requests** +* Run the query to retrieve the pending approval requests +* Click **Display on UI** and bind the data to a Table Widget. +* The table will display request details like name, message, created time, and metadata containing the form details. +* Add a Custom Column, name it Action, and set the Column Type to Button. +* Configure the **onClick** event of this column to **Show Modal**, then click **+ New Modal**. +* Inside the modal: + - Add an Input Field with the label and name Comment. + - Add two buttons named Approve and Reject. +* Next, create a Workflow Query named ```resolveRequest``` and set the following fields as below: + - Request Type: Resolve Request + - Request Id: ```{{Table1.triggeredRow.id}}``` + - Resolution: ```{{this.params.resolution}}``` + - Metadata (for comments): ```{{Comment.text}}``` +* Bind this query to both Approve and Reject buttons, ensuring the Params field sends: + - For Approve button: ```{ resolution: "Approve" }``` + - For Reject button: ```{ resolution: "Reject" }``` +* Set onSuccess of this query to run **getPendingRequests** and onFailure to show an alert message. +* Now, go to the UI, click the **Action** button to open the **Modal**, enter a comment, and click Approve or Reject. +* Return to the **Workflow Editor -> Run History**, and verify that the workflow is completed with the selected resolution and console message. \ No newline at end of file diff --git a/website/docs/training/session-6.md b/website/docs/training/session-6.md new file mode 100644 index 0000000000..ace47c645b --- /dev/null +++ b/website/docs/training/session-6.md @@ -0,0 +1,43 @@ +--- +title: Session 5 +hide_title: false +--- + + + +## Getting Started + +**Ignore this if you were able to attend the previous Session.** + +1. Sign up on this instance: [Training Instance](https://training.app.appsmith.com/user/signup) + +2. Create a workspace of your own and name it as **\-Training-Workspace** + +3. Share access to your workspace to **Training Admin** as Administrator + +4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. + +## Utilizing Audit Logs for Monitoring and Compliance + +1. **Viewing Audit Logs** + +
+ +* Navigate to **Admin Settings → Audit Logs**. + *(Ensure you have the necessary permissions granted by your instance administrator.)* +* Here you can view: + - **User Activity:** Logins, sign-ups, and invitations. + - **Application Modifications:** Changes in queries, deployments, and settings. + - **Access Logs:** Identify who viewed, edited, modified the application or triggered some actions. + +
+ +2. **Filtering and Analyzing Logs** +
+ +* Use filters such as **Events**, **Users**, or **Date Range** to refine log records. +* Example: + - Find logs where a specific query was executed by multiple users within a selected time period. +* Click the **three-dot menu** (top-right) to **⬇ Download** the audit logs for further analysis or compliance review. + +
\ No newline at end of file diff --git a/website/sidebars.js b/website/sidebars.js index c3b4f91e7f..fe37721eb4 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -26,7 +26,8 @@ const sidebars = { collapsed: false, items: [ 'training/day-3-agenda', - 'training/session-5' + 'training/session-5', + 'training/session-6' ] } //training end*/ ], From d00542e9952c5fb1c69ebe56a8a3f3d51536f6f3 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Thu, 6 Mar 2025 16:42:05 +0530 Subject: [PATCH 35/43] Fixed minor issue with closing tag. --- website/docs/training/session-5.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/website/docs/training/session-5.md b/website/docs/training/session-5.md index 592928aa25..12b283f14d 100755 --- a/website/docs/training/session-5.md +++ b/website/docs/training/session-5.md @@ -178,4 +178,6 @@ DateFns1.getUserAge(currentRow.dob) - For Reject button: ```{ resolution: "Reject" }``` * Set onSuccess of this query to run **getPendingRequests** and onFailure to show an alert message. * Now, go to the UI, click the **Action** button to open the **Modal**, enter a comment, and click Approve or Reject. -* Return to the **Workflow Editor -> Run History**, and verify that the workflow is completed with the selected resolution and console message. \ No newline at end of file +* Return to the **Workflow Editor -> Run History**, and verify that the workflow is completed with the selected resolution and console message. + + \ No newline at end of file From 43bd91d512ac80fe981d51cdec980714756784fc Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Thu, 6 Mar 2025 18:20:05 +0530 Subject: [PATCH 36/43] Added content for Granular Access Control. --- website/docs/training/session-6.md | 50 ++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/website/docs/training/session-6.md b/website/docs/training/session-6.md index ace47c645b..a14ccae68c 100644 --- a/website/docs/training/session-6.md +++ b/website/docs/training/session-6.md @@ -17,6 +17,56 @@ hide_title: false 4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. +## Implementing Granular Access Control and Programmatic Permissions + +1. **Role-Based Access Control** + +
+ +* Every workspace comes with three default roles: **Administrator, Developer, and App Viewer**. +* Custom **Groups** and **Roles** can also be created to define access more precisely. +* Here is an example of how to set Custom Groups and Roles: + - Navigate to **Admin Settings → Groups** under **Access Control**. + - Click **Create Group**, name it **Agents**, and assign users to this group. + - Switch to the **Roles** tab and create a new role named **Agent Role**. + - Configure the role by assigning specific permissions. +* Here are the main permissions you can assign to a Role + - **Workspace Access** – Define who can access or modify workspace settings. + - **App Access** – Control view and edit rights for applications. + - **Page Access** – Restrict or grant access to specific pages within an app. + - **JSObjects & Queries** – Allow or deny execution/edit permissions on queries and JavaScript objects. + - **Datasource & Workflow Access** – Set permissions on which datasources and workflows users can interact with. +* Below are some of the additional permission you can assign as well + - Who can **create workspaces**. + - Who can **invite users** to a workspace or application. + - Who can **create Groups and Roles**. + - Who can **view Audit Logs** for tracking user activity. +* Finally after saving the changes made to your new Role, go back to the Group and assign this Role. +* You can assign the Role either to a Group of users or at a user level as well + +
+ +2. **Programmatic Permissions** + +
+ +* Ensure that **Programmatic Access Control** is enabled in **Admin Settings**. +* Once enabled, you can dynamically manage user access within your application using logic based on user groups. +* **Examples of Programmatic Access:** + - **Show or hide UI elements** based on user groups: + ```appsmith.user.groups.includes("")``` + *(User this to control visibility of tables, forms, buttons, etc dynamically)* + - **Conditionally execute actions** based on user roles: + ```jsx + if (appsmith.user.groups.includes("Agents")) { + submitData.run(); + } else { + showAlert("You do not have permission to perform this action."); + } + ``` + +
+ ## Utilizing Audit Logs for Monitoring and Compliance 1. **Viewing Audit Logs** From a47c35bfd3ea89b614d60c4bea13555aa41b18be Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Thu, 6 Mar 2025 20:16:42 +0530 Subject: [PATCH 37/43] Enabled day 3 topics for session. --- website/sidebars.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/sidebars.js b/website/sidebars.js index fe37721eb4..e7ba8fdd45 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -20,7 +20,7 @@ const sidebars = { 'training/session-3', 'training/session-4' ] - },/*{ + },{ type: 'category', label: 'Appsmith Training Day 3', collapsed: false, @@ -29,7 +29,7 @@ const sidebars = { 'training/session-5', 'training/session-6' ] - } //training end*/ + } //training end ], }; From 4fc3120a22fb988f2836a3fbee2bb91817f0c8f7 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Thu, 6 Mar 2025 20:59:40 +0530 Subject: [PATCH 38/43] Minor change. --- website/docs/training/session-6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/training/session-6.md b/website/docs/training/session-6.md index a14ccae68c..554947108c 100644 --- a/website/docs/training/session-6.md +++ b/website/docs/training/session-6.md @@ -1,5 +1,5 @@ --- -title: Session 5 +title: Session 6 hide_title: false --- From f240d51b161821e534e8f42296a4281a51e113db Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Thu, 6 Mar 2025 21:25:21 +0530 Subject: [PATCH 39/43] corrected momentjs code. --- website/docs/training/session-5.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/training/session-5.md b/website/docs/training/session-5.md index 12b283f14d..6d4da5341a 100755 --- a/website/docs/training/session-5.md +++ b/website/docs/training/session-5.md @@ -30,7 +30,7 @@ hide_title: false * Inside that introduce a function called **getUserAge** that takes an argument **dateString**, and returns the age ```jsx getUserAge: (dateString) => { - return moment().diff(moment(dateString, 'years')); + return moment().diff(moment(dateString), 'years')); } ``` * Now publish this package by clicking the button on the top right. From b4265f27aeb670e3418b48018c6855779e62ed26 Mon Sep 17 00:00:00 2001 From: Tom Jose Date: Thu, 6 Mar 2025 21:40:28 +0530 Subject: [PATCH 40/43] Correction in the code snippet. --- website/docs/training/session-5.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/training/session-5.md b/website/docs/training/session-5.md index 6d4da5341a..7165155c86 100755 --- a/website/docs/training/session-5.md +++ b/website/docs/training/session-5.md @@ -30,7 +30,7 @@ hide_title: false * Inside that introduce a function called **getUserAge** that takes an argument **dateString**, and returns the age ```jsx getUserAge: (dateString) => { - return moment().diff(moment(dateString), 'years')); + return moment().diff(moment(dateString), 'years'); } ``` * Now publish this package by clicking the button on the top right. From 77f32aa7ff15e340e7b9a8879561175644a263a4 Mon Sep 17 00:00:00 2001 From: Luis Sebastian Ibarra Date: Thu, 21 Aug 2025 18:27:32 -0500 Subject: [PATCH 41/43] feat: add support training session --- website/docs/training/day-5-agenda.md | 58 +++++++++ website/docs/training/session-8.md | 176 ++++++++++++++++++++++++++ website/sidebars.js | 54 ++++---- 3 files changed, 266 insertions(+), 22 deletions(-) create mode 100644 website/docs/training/day-5-agenda.md create mode 100644 website/docs/training/session-8.md diff --git a/website/docs/training/day-5-agenda.md b/website/docs/training/day-5-agenda.md new file mode 100644 index 0000000000..b926a8a379 --- /dev/null +++ b/website/docs/training/day-5-agenda.md @@ -0,0 +1,58 @@ +--- +title: "Agenda" +hide_title: false +--- + +# Day 5: Appsmith Training Agenda +## Application Support +
+ +Learn essential debugging and troubleshooting techniques for Appsmith applications, including console debugging, server-side log analysis, and support workflows. + +
+ +### [1. Debugging with Consoles & Browser Tools](/training/session-8#debugging-with-consoles--browser-tools) +
+ +- **Appsmith In-App Console:** Master the editor console for real-time debugging of queries, JS objects, and bindings. +- **Browser Developer Tools:** Learn when and how to use Chrome DevTools for deeper investigation. +- **Network Tab Deep Dive:** Export HAR files and analyze API requests/responses. +- **Application Tab:** Inspect local storage and session data for state-related issues. + +
+ +### [2. Accessing Server-Side Logs & Instance Health](/training/session-8#accessing-server-side-logs--instance-health) +
+ +- **Quick Instance Checks:** Use built-in endpoints like `/info`, `/api/v1/health`, and consolidated API views. +- **Container Log Collection:** Follow best practices for gathering server-side logs. +- **Log Analysis:** Identify error patterns, timestamps, and service context in logs. + +
+ +### [3. Checking for Existing Issues](/training/session-8#checking-for-existing-issues) +
+ +- **GitHub Issues Search:** Efficiently search Appsmith's issue tracker before escalating problems. +- **Filtering Techniques:** Use labels, status, and keywords to find relevant discussions. +- **Finding Workarounds:** Locate temporary solutions and status updates for known issues. + +
+ +### [4. Connecting with Appsmith Support](/training/session-8#connecting-with-appsmith-support) +
+ +- **Support Channels:** Understand available support options and escalation paths. +- **Information Gathering:** Learn what details to include for effective support requests. +- **Best Practices:** Follow proper procedures for timely assistance. + +
+ +### [5. Using Audit Logs](/training/session-8#using-audit-logs-for-debugging) +
+ +- **Audit Log Access:** Navigate to Settings → Audit Logs and understand permission requirements. +- **Filtering Strategies:** Use Event Type, User ID, Time Range, and Resource ID filters effectively. +- **Troubleshooting with Logs:** Identify failed calls, high latency, and unauthorized attempts. + +
diff --git a/website/docs/training/session-8.md b/website/docs/training/session-8.md new file mode 100644 index 0000000000..c2586243fa --- /dev/null +++ b/website/docs/training/session-8.md @@ -0,0 +1,176 @@ +--- +title: Session 8 +hide_title: false +--- + + + +## Debugging with Consoles & Browser Tools + +1. **Appsmith In-App Console (Editor Console)** + +
+ +* The **Appsmith Console** inside the editor is the first stop when debugging an app: + - Open the Appsmith editor → bottom panel → **Console** tab. +* **What it shows:** + - Logs generated by `showAlert()` or `console.log()` calls inside queries and JS objects. + - API & DB query responses (success, failure, latency). + - Evaluation errors for bindings (e.g., "Cannot read property of undefined"). +* **How to use it effectively:** + - Reproduce the issue and watch for red errors in real time. + - Use the **filter** controls to narrow logs by severity. + - Expand query responses to inspect returned JSON. +* **Best practice:** Always check the Appsmith Console first — it often surfaces the error without needing browser DevTools. + +
+ +2. **Browser Developer Tools — When to Go Deeper** + +
+ +* If the Appsmith Console doesn't provide enough detail, move to **browser DevTools**. +* **Steps to gather HAR & Console logs:** + - Navigate to the app and stop just before reproducing the issue. + - Open Chrome Developer Tools: Right-click → **Inspect** or **Ctrl+Shift+I** (Win/Linux) / **Cmd+Opt+I** (Mac). + - **Network Tab:** Check **"Preserve log"** at the top, reproduce the issue, export the HAR file (⬇ icon). + - **Console Tab:** Right-click → **Save as…** to export console logs. +* **Network Tab Deep Dive:** + - Focus on **XHR / Fetch** requests and filter for **`execute`** to isolate API calls made by the app. + - Inspect: request URL, status codes, response body, headers, timings. + - **Note:** Request body inspection is only available in **Edit mode**, not in **View mode**. +* **Console Tab Deep Dive:** + - Look for red errors (critical) and yellow warnings. + - Expand logs for context and use search to filter logs. + +
+ +3. **Application Tab — Local Storage** + +
+ +* Inspect **Local Storage** for persisted state (`appsmith.store`) and **Session Storage** for transient state. +* **Identify which app data belongs to:** + - Grab the `applicationId`: Open the app → **Network** pane from debugger tools → Refresh page → Search for **`applicationId`** → Copy ID from payload. + - Filter Local Storage keys with that `applicationId`. +* Useful when debugging why certain stored values aren't loading or persisting correctly. + +
+ +## Accessing Server-Side Logs & Instance Health + +1. **Quick Instance Checks** + +
+ +* Before diving into container logs, use Appsmith's built-in endpoints: + - **`/info`** — Shows the **Appsmith version** the instance is running. Helps confirm if the issue could be version-specific. + - **`/api/v1/health`** — Monitor the availability and status of a self-hosted Appsmith instance. Helps detect downtime early and ensures the system is running as expected. + - **`/api/v1/consolidated-api/view`** — Provides insights into API response times, user session details, feature flag statuses, and system configuration. +* These endpoints are especially helpful when debugging **customer environments** before escalating to support. + +
+ +2. **Getting Container Logs** + +
+ +* Follow the documentation: [Get Container Logs](https://docs.appsmith.com/getting-started/setup/instance-management/how-to-get-container-logs) +* **What to Look For in Logs:** + - **Timestamp alignment:** correlate logs with when the issue occurred. + - **Error-related keywords:** e.g., `Exception`, `Timeout`, `Connection refused`, Out‑of‑memory, or container restarts. + - **Service context:** Identify which log (backend, editor, rts, etc.) is relevant to the failure. + +
+ +## Checking for Existing Issues + +1. **GitHub Issues Search Strategy** + +
+ +* Before spending time reproducing or escalating an issue, check the **Appsmith GitHub Issues** page: + - Go to: [https://github.com/appsmithorg/appsmith/issues](https://github.com/appsmithorg/appsmith/issues) +* **Use the Search bar to look for:** + - Error messages from your logs + - Feature name (e.g., "PostgreSQL plugin") + - Keywords related to the problem (e.g., "timeout", "deploy", "login") +* **Filter by:** + - **Open** issues (current bugs) + - **Closed** issues (to see if it was recently fixed) + - **Label** for categorization +* **Review the discussion for:** + - Workarounds + - Status updates + - Links to fixes in upcoming releases + +
+ +## Connecting with Appsmith Support + +1. **Support Channels and Best Practices** + +
+ +* When users need help with Appsmith, prompt access to support is crucial. +* Follow the documentation: [Appsmith Support](https://docs.appsmith.com/product/support) +* **Information to include for effective support requests:** + - Clear description of the issue and steps to reproduce + - Appsmith version and deployment type + - Browser console logs and HAR files (when applicable) + - Server-side logs (for self-hosted instances) + - Screenshots or screen recordings demonstrating the issue + +
+ +## Using Audit Logs for Debugging + +1. **Accessing and Filtering Audit Logs** + +
+ +* Navigate to **Settings → Audit Logs** + *(Note: While typically accessed by Admins, **users/developers can also be granted audit log access only** without needing full admin rights.)* +* **Key Filters for Debugging:** + - **Event Type** = API Call + - **User ID** = End user affected + - **Time Range** = When issue happened + - **Resource ID** = The specific API/Query ID (found in the **URL** when the query/API page is open in **Edit mode**) + +
+ +2. **Analyzing Audit Logs for Issues** + +
+ +* **Look for:** + - Failed calls + - High latency + - Unauthorized attempts +* **Documentation:** [Audit Logs Guide](https://docs.appsmith.com/advanced-concepts/audit-logs) +* Use audit logs in combination with other debugging techniques for comprehensive troubleshooting. + +
+ +## Debugging Flow Recommendation + +1. **Systematic Debugging Approach** + +
+ +* **Step 1: Start with Appsmith Console (in-App Editor)** + - Quickest method with app-context logs +* **Step 2: If unresolved → Browser DevTools Console** + - For runtime JS errors outside Appsmith logs +* **Step 3: If API/data issues → Browser Network tab** + - For request/response details, HAR export +* **Step 4: If state issues → Application tab** + - Inspect local storage for `appsmith.store` entries +* **Step 5: Check GitHub Issues** + - Search for known issues before escalating +* **Step 6: Gather server logs if needed** + - Use health endpoints and container logs +* **Step 7: Use Audit Logs for user activity** + - When debugging user-specific or permission-related issues + +
diff --git a/website/sidebars.js b/website/sidebars.js index e7ba8fdd45..0effb15644 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -1,35 +1,45 @@ - const sidebars = { tutorialSidebar: [ //training start { - type: 'category', - label: 'Appsmith Training Day 1', + type: "category", + label: "Appsmith Training Day 1", + collapsed: false, + items: [ + "training/day-1-agenda", + "training/session-1", + "training/session-2", + ], + }, + { + type: "category", + label: "Appsmith Training Day 2", collapsed: false, items: [ - 'training/day-1-agenda', - 'training/session-1', - 'training/session-2' - ] - },{ - type: 'category', - label: 'Appsmith Training Day 2', + "training/day-2-agenda", + "training/session-3", + "training/session-4", + ], + }, + { + type: "category", + label: "Appsmith Training Day 3", collapsed: false, items: [ - 'training/day-2-agenda', - 'training/session-3', - 'training/session-4' - ] - },{ - type: 'category', - label: 'Appsmith Training Day 3', + "training/day-3-agenda", + "training/session-5", + "training/session-6", + ], + }, + { + type: "category", + label: "Appsmith Training Day 5", collapsed: false, items: [ - 'training/day-3-agenda', - 'training/session-5', - 'training/session-6' - ] - } //training end + "training/day-5-agenda", + "training/session-8", + ], + }, //training end ], }; From b25a7b56010e116fc5c64980d63211269b64b839 Mon Sep 17 00:00:00 2001 From: pranavkanade Date: Wed, 27 Aug 2025 16:32:05 +0530 Subject: [PATCH 42/43] Refactor training session documentation for clarity and formatting improvements --- website/docs/training/session-3.md | 122 +++++++++++++++++------------ 1 file changed, 70 insertions(+), 52 deletions(-) diff --git a/website/docs/training/session-3.md b/website/docs/training/session-3.md index 96739ca441..a80ac6aa89 100755 --- a/website/docs/training/session-3.md +++ b/website/docs/training/session-3.md @@ -5,35 +5,42 @@ hide_title: false -## Getting Started +## Getting Started **Ignore this if you were able to attend the previous Session.** -1. Sign up on this instance: [Training Instance](https://training.app.appsmith.com/user/signup) +1. Sign up on this instance: + [Training Instance](https://training.app.appsmith.com/user/signup) 2. Create a workspace of your own and name it as **\-Training-Workspace** 3. Share access to your workspace to **Training Admin** as an Administrator -4. From the workspace, click on the top-right **info icon**, then select **Chat with us**. This is Appsmith’s support assistant that can help you with any issues. Send a test message to familiarize yourself with the support feature. +4. From the workspace, click on the top-right **info icon**, then select **Chat + with us**. This is Appsmith’s support assistant that can help you with any + issues. Send a test message to familiarize yourself with the support feature. -## Version Control: Development Process and Collaboration +## Version Control: Development Process and Collaboration 1. **Setting up your GIT branches**
-* Open the **Git-connected App** in your workspace and click **Edit** to enter the Editor mode. -* Look at the **bottom-left corner**; you will see that you are currently on the **master** branch. -* Click on the branch name, and a popover will appear listing all branches (both local and remote). -* Create a new branch: +- Open the **Git-connected App** in your workspace and click **Edit** to enter + the Editor mode. +- Look at the **bottom-left corner**; you will see that you are currently on the + **master** branch. +- Click on the branch name, and a popover will appear listing all branches (both + local and remote). +- Create a new branch: - Enter **\-prod** as the branch name. - This will create a **production branch** from the master branch. -* After switching to the **prod** branch: +- After switching to the **prod** branch: - Click the **Cog icon ⚙️** on the bottom bar to open Git settings. - Under the **Branch tab**, set **\-prod** as the default branch. -* Now, create another branch: - - Open the branch list, type **\-dev**, and create a **development branch** from your production branch. +- Now, create another branch: + - Open the branch list, type **\-dev**, and create a **development + branch** from your production branch.
@@ -41,15 +48,17 @@ hide_title: false
-* Make some changes in your app: +- Make some changes in your app: - Add new widgets, update styling, or create a new page. -* Once you are done, Click the **+ button** next to the branch name and a modal will pop up. -* In the modal, go to the **Deploy Tab**: +- Once you are done, Click the **+ button** next to the branch name and a modal + will pop up. +- In the modal, go to the **Deploy Tab**: - Review the changes. - Add a commit message to describe your changes. - Click **Commit & Push** to push changes to your remote branch. -* Great, you have successfully commited your changes to your very own dev branch of this Application. -* You can preview the deployed version by +- Great, you have successfully commited your changes to your very own dev branch + of this Application. +- You can preview the deployed version by - Click on **Deploy > Latest deployed preview** - By changing value of branch to `?branch=` in your app's URL. @@ -59,65 +68,74 @@ hide_title: false
-* Click the **+ button** again to open the modal. -* Navigate to the **Merge Tab**. -* Select **\-prod** as the target branch to merge your **dev** branch changes. -* Check for merge conflicts before proceeding. -* After merging: +- Click the **+ button** again to open the modal. +- Navigate to the **Merge Tab**. +- Select **\-prod** as the target branch to merge your **dev** branch + changes. +- Check for merge conflicts before proceeding. +- After merging: - Switch to the **prod** branch from the GIT branches list. - - Click the **down arrow** (⬇) next to the branch name to pull the latest changes. - - Click **Deploy > Latest deployed preview** to see the updated app in production. - -
- -4. **Resolving conflicts** - -
- -* Merge conflicts occur when two users make conflicting changes to the same part of an app. Here's how to resolve them: -* If there is a **conflict warning** during merge, you will need to go to the Github repo and create a Pull Request from your develop to prod branch -* In the PR you will see the same conflicts, and based on it, would get option to resolve it from Github itself -* In the case where there are major conflicts, Github will recommend to checkout the repository in your local and resolve them manually + - Click the **down arrow** (⬇) next to the branch name to pull the latest + changes. + - Click **Deploy > Latest deployed preview** to see the updated app in + production.
## Configuring Multiple Environments and Setting Up CI/CD Pipelines ### 1. Creating and Managing Multiple Environments +
-* Open your **Application** and navigate to the **Datasources** page (bottom-left corner). -* Click on any **existing datasource** and select **Edit**. -* On the right panel, you will notice: +- Open your **Application** and navigate to the **Datasources** page + (bottom-left corner). +- Click on any **existing datasource** and select **Edit**. +- On the right panel, you will notice: - **Production Environment** is already configured as the default. - **Staging Environment** can be configured manually. -* Click on **Manage Environments** at the bottom. -* Here, you can: +- Click on **Manage Environments** at the bottom. +- Here, you can: - Create new environments (e.g., **Development, QA, UAT**). - - View how many datasources are already configured for each environment across your workspace. + - View how many datasources are already configured for each environment across + your workspace.
### 2. Automating Deployments with CI/CD +
-* Open the **Application** for which you want to set up CI/CD, preferably the one in the production instance/workspace. -* Click the **⚙️ (Cog icon)** to open **Git Settings** and go to the **Continuous Delivery** tab. -* Here, you'll see setup instructions along with a **cURL command** for the master branch. -* Click **Generate Bearer Token** to create an authentication token. -* Open the [Appsmith CI/CD documentation](https://docs.appsmith.com/advanced-concepts/version-control-with-git/cd-with-git) and choose a deployment tool (e.g., **GitHub Actions**). -* Follow the instructions to create a **GitHub Action** and copy-paste the YAML code. -* Replace the cURL command in the YAML file with: +- Open the **Application** for which you want to set up CI/CD, preferably the + one in the production instance/workspace. +- Click the **⚙️ (Cog icon)** to open **Git Settings** and go to the + **Continuous Delivery** tab. +- Here, you'll see setup instructions along with a **cURL command** for the + master branch. +- Click **Generate Bearer Token** to create an authentication token. +- Open the + [Appsmith CI/CD documentation](https://docs.appsmith.com/advanced-concepts/version-control-with-git/cd-with-git) + and choose a deployment tool (e.g., **GitHub Actions**). +- Follow the instructions to create a **GitHub Action** and copy-paste the YAML + code. +- Replace the cURL command in the YAML file with: - The command generated for your application. - The **Bearer Token** from Appsmith. -* **Best Practice:** Store the **Bearer Token** as a **GitHub Secret** and reference it in your YAML file instead of hardcoding it. -* After saving the changes to your YAML file, check the confirmation box and click **Finish Setup**. -* Now, any time changes are merged, pushed, or committed to the **master branch**, the application will automatically redeploy with the latest updates. +- **Best Practice:** Store the **Bearer Token** as a **GitHub Secret** and + reference it in your YAML file instead of hardcoding it. +- After saving the changes to your YAML file, check the confirmation box and + click **Finish Setup**. +- Now, any time changes are merged, pushed, or committed to the **master + branch**, the application will automatically redeploy with the latest updates.
## Best practices -When you are working as team and collaborating using Version Control, some best practices need to be followed to ensure consistency and synchronisation across your org. +When you are working as team and collaborating using Version Control, some best +practices need to be followed to ensure consistency and synchronisation across +your org. -Here is a [documentation](https://www.appsmith.com/blog/appsmith-git-internal-tools-3) stating some of these practices that you can follow. +Here is a +[documentation](https://www.appsmith.com/blog/appsmith-git-internal-tools-3) +stating some of these practices that you can follow. From 477532f76f1dcf3af72dc8322abc5299338b30b4 Mon Sep 17 00:00:00 2001 From: Pranav Kanade Date: Mon, 12 Jan 2026 10:41:34 -0800 Subject: [PATCH 43/43] =?UTF-8?q?Remove=20commented-out=20section=20for=20?= =?UTF-8?q?Appsmith=20Training=20Day=205=20from=20sidebar=E2=80=A6=20(#298?= =?UTF-8?q?6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- website/sidebars.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/website/sidebars.js b/website/sidebars.js index 0effb15644..5ef1930a8a 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -31,15 +31,12 @@ const sidebars = { "training/session-6", ], }, - { - type: "category", - label: "Appsmith Training Day 5", - collapsed: false, - items: [ - "training/day-5-agenda", - "training/session-8", - ], - }, //training end + // { + // type: "category", + // label: "Appsmith Training Day 5", + // collapsed: false, + // items: ["training/day-5-agenda", "training/session-8"], + // }, //training end ], };