diff --git a/web/docs/guides/integrations/appsmith.mdx b/web/docs/guides/integrations/appsmith.mdx new file mode 100644 index 00000000000..21b346d012c --- /dev/null +++ b/web/docs/guides/integrations/appsmith.mdx @@ -0,0 +1,142 @@ +# Supabase Integration Doc + +This guide explains how to quickly build a Support Dashboard by connecting a Supabase back-end to an Appsmith front-end. + +[Appsmith](https://www.appsmith.com/) is an open-source framework for building internal tools. It lets you drag-and-drop UI components to build pages, connect to any API, database or GraphQL source and write logic with JavaScript objects. + +If you don’t have an Appsmith account, create one [here](https://app.appsmith.com/user/signup). + +Let’s get started! + +# Step 1: Set up your Backend on Supabase + +- On the [Supabase dashboard](https://app.supabase.io), click `New project` and set the name to **Support Dashboard** + +![create-project-supabase-01](/img/guides/integrations/appsmith/create-project-supabase-01.png) + +- Create a new table by clicking on the Create Table option on the side navigation. +- Supabase provides many ways to add data to the tables, from writing queries to creating schemas using UI to simply uploading CSV files. For our support dashboard, we will be creating the **tickets** table by uploading the [CSV file](https://raw.githubusercontent.com/vihar/datasets/master/tickets.csv) on Supabase. + +![create-table-supabase-02](/img/guides/integrations/appsmith/create-table-supabase-02.png) + +The database is now set up. + +# Step 2: Connect the database to Appsmith + +- Note down the database connection information under Project Settings in Supabase. + +![project-settings-supabase-03](/img/guides/integrations/appsmith/project-settings-supabase-03.png) + +- On Appsmith, create a new application under the dashboard under your preferred organization. +- Click on the `+` icon next to Datasources on the left navigation bar under Page1 +- Next, click on Create New tab and choose PostgreSQL datasource, you’ll see the following screenshot: + +![create-datasource-appsmith-04](/img/guides/integrations/appsmith/create-datasource-appsmith-04.png) + +- Fill out the form to connect to your Supabase instance. Click **Test** to test connection and then **Save** to save the datasource + +![connect-supabase-datasource-05](/img/guides/integrations/appsmith/connect-supabase-datasource-05.png) + +# Step 3: Build UI on Appsmith + +- Click on the + icon next to widgets and drag and drop a Tab widget. We can configure using the property pane by clicking on the cog icon on the top-right corner. +- As seen in the below screenshot, we have added four tabs to support the dashboard. + +![property-pane-appsmith-06](/img/guides/integrations/appsmith/property-pane-appsmith-06.png) + +- Add widgets to the **Home** tab to create the dashboard as shown in the screenshot below. For eg: **Critical Open Issues** is a **Text** widget and below it is an **Input** widget which we will bind later to display the number of open tickets. + +- Set up the **New** button to open a modal which will have a form to raise a new ticket. + +![bind-query-appsmith-07](/img/guides/integrations/appsmith/bind-query-appsmith-07.png) + +- In the modal widget, add a few widgets to accept input when creating a new ticket. Please refer to the screenshot below. + +![modal-appsmith-08](/img/guides/integrations/appsmith/modal-appsmith-08.png) + +# Step 4: Writing Queries in Appsmith and binding data to widgets + +- Click on the + icon next to Datasources on the navigation bar and click New Query next to the Supabase connection here to create a new query. + +![create-query-appsmith-09](/img/guides/integrations/appsmith/create-query-appsmith-09.png) + +- Rename the query to create_new_ticket under the query pane; here we can write SQL that can collect the data from the widgets using mustache templates. + +```jsx +INSERT INTO PUBLIC."tickets"("id","createdAt","user","updatedAt","description", +"status","priority","category","assignedTo") +VALUES('{{appsmith.store.ticket.id}}','{{moment().format('yyyy-mm-ddHH:MM:ss')}}','{{c_user.text}}', +'{{moment().format('yyyy-mm-ddHH:MM:ss')}}','{{c_description.text}}','{{c_status.selectedOptionValue}}', +'{{c_property.selectedOptionValue}}', +'{{c_category.selectedOptionValue}}','{{c_assignee.selectedOptionValue}}'); +``` + +- Click the **Confirm** button on the modal and under **Events**, set the **onClick** property to execute the create_new_ticket query. +- Create a second query named **get_tickets** that will list all the tickets. + + **** + +```jsx +SELECT * FROM public."tickets"; +``` + +- Drag and drop a table widget under the **Assigned To Me** tab. Open the property pane and add the following snippet under **Table Data** to bind the query results. + +```jsx +{{get_tickets.data.filter(t => t.assignedTo === 'confidence@appsmith.com' && t.status !== 'closed')}} +``` + +- Drag and drop a table widget under the **Resolved** tab. Open the property pane and add the following snippet under **Table Data** to bind the query results. + +```jsx +{{get_tickets.data.filter(t => t.status === 'open')}} +``` + +- Drag and drop a table widget under the **Closed** tab. Open the property pane and add the following snippet under **Table Data** to bind the query results. + +```jsx +{{get_tickets.data.filter(t => t.status === 'closed')}} +``` + +# Step 5: Creating Charts in Appsmith + +- On the **Home** tab, click on the first Chart widget. Add Title **Open Issues By Category**. Change the **Chart Type** property to **Column Chart**. +- Update the x-axis and y-axis Labels under **Axis** on the property pane. +- Add the following code snippet under the **Series Data** property to bind the data to be displayed on the x and y axes. + +```jsx +[ + { + "x": "Hardware", + "y": {{get_tickets.data.filter(t => t.status==='open' && t.category==='hardware').length}} + }, + { + "x": "Software", + "y": {{get_tickets.data.filter(t => t.status==='open' && t.category==='software').length}} + }, + { + "x": "Other", + "y": {{get_tickets.data.filter(t => t.status==='open' && t.category==='other').length}} + } +] +``` + +- The second chart will be a pie chart. Add the title, axes labels as mentioned above, +- Add the following code snippet under the **Series Data** property of the pie chart. + +```jsx +[ + { + "x": "High", + "y": {{get_tickets.data.filter(t => t.status==='open' && t.priority==='high').length}} + }, + { + "x": "Medium", + "y": {{get_tickets.data.filter(t => t.status==='open' && t.priority==='medium').length}} + }, + { + "x": "Low", + "y": {{get_tickets.data.filter(t => t.status==='open' && t.priority==='low').length}} + } +] +``` \ No newline at end of file diff --git a/web/sidebars.js b/web/sidebars.js index 6e11581c2cf..c38f7f542bc 100755 --- a/web/sidebars.js +++ b/web/sidebars.js @@ -168,6 +168,7 @@ module.exports = { label: 'Integrations', collapsed: false, items: [ + 'guides/integrations/appsmith', 'guides/integrations/auth0', 'guides/integrations/draftbit', 'guides/integrations/prisma', diff --git a/web/static/img/guides/integrations/appsmith/bind-query-appsmith-07.png b/web/static/img/guides/integrations/appsmith/bind-query-appsmith-07.png new file mode 100644 index 00000000000..296e1d4bda3 Binary files /dev/null and b/web/static/img/guides/integrations/appsmith/bind-query-appsmith-07.png differ diff --git a/web/static/img/guides/integrations/appsmith/connect-supabase-datasource-05.png b/web/static/img/guides/integrations/appsmith/connect-supabase-datasource-05.png new file mode 100644 index 00000000000..dabb2b6ad33 Binary files /dev/null and b/web/static/img/guides/integrations/appsmith/connect-supabase-datasource-05.png differ diff --git a/web/static/img/guides/integrations/appsmith/create-datasource-appsmith-04.png b/web/static/img/guides/integrations/appsmith/create-datasource-appsmith-04.png new file mode 100644 index 00000000000..04f72cb896f Binary files /dev/null and b/web/static/img/guides/integrations/appsmith/create-datasource-appsmith-04.png differ diff --git a/web/static/img/guides/integrations/appsmith/create-project-supabase-01.png b/web/static/img/guides/integrations/appsmith/create-project-supabase-01.png new file mode 100644 index 00000000000..aebd9cb1807 Binary files /dev/null and b/web/static/img/guides/integrations/appsmith/create-project-supabase-01.png differ diff --git a/web/static/img/guides/integrations/appsmith/create-query-appsmith-09.png b/web/static/img/guides/integrations/appsmith/create-query-appsmith-09.png new file mode 100644 index 00000000000..96d9989f99e Binary files /dev/null and b/web/static/img/guides/integrations/appsmith/create-query-appsmith-09.png differ diff --git a/web/static/img/guides/integrations/appsmith/create-table-supabase-02.png b/web/static/img/guides/integrations/appsmith/create-table-supabase-02.png new file mode 100644 index 00000000000..d9e87ae8799 Binary files /dev/null and b/web/static/img/guides/integrations/appsmith/create-table-supabase-02.png differ diff --git a/web/static/img/guides/integrations/appsmith/modal-appsmith-08.png b/web/static/img/guides/integrations/appsmith/modal-appsmith-08.png new file mode 100644 index 00000000000..18397732e60 Binary files /dev/null and b/web/static/img/guides/integrations/appsmith/modal-appsmith-08.png differ diff --git a/web/static/img/guides/integrations/appsmith/project-settings-supabase-03.png b/web/static/img/guides/integrations/appsmith/project-settings-supabase-03.png new file mode 100644 index 00000000000..1c428f09829 Binary files /dev/null and b/web/static/img/guides/integrations/appsmith/project-settings-supabase-03.png differ diff --git a/web/static/img/guides/integrations/appsmith/property-pane-appsmith-06.png b/web/static/img/guides/integrations/appsmith/property-pane-appsmith-06.png new file mode 100644 index 00000000000..69fe6f2df3f Binary files /dev/null and b/web/static/img/guides/integrations/appsmith/property-pane-appsmith-06.png differ