21
May
2021
Tutorial

Using the Notion API to Build a Content Management System

0
 minutes

At Appsmith, we use Notion to manage our content calendar. We also work with a few external agencies and freelancers for some of our content. It is impossible to create granular access control and develop a workflow on Notion to run the process smoothly and thus, as soon as Notion released their API, we decided to build an application that helps us manage our entire content management in one place while giving our collaborators the necessary access only.

Our application uses our Notion (mock) Table as a data source and lets you plant, submit and edit articles on the application, while at the same time has a provision for integrating with an email service of your choice (we use SendGrid here) to send reminder emails or updates to people in the project.

In this tutorial, we’ll build an essential Content Management System, which will let you:

  • Submit new content idea submissions from authors
  • Set deadlines for submissions
  • Follow up with authors directly with their Emails
  • Organise all data on a Notion page

Check out the live demo here. Here's a screenshot of how the app looks like:

Notion App Screenshot.png
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets, including charts, tables and forms, for building a UI fast.

Let’s dive right in!

Configuring the Notion API

Notion API lets us connect to Notion Pages and Databases. Now, let's look at how we can set up the API, gather all the required keys and connect to Appsmith.

  • Firstly, choose the workspace you want to work with on your Notion. If you want to test it, feel free to create a new workspace.
  • Now, open the workspace setting by clicking on the Settings and Members option on the left navigation bar. We should see a new modal with all the settings.
  • Find the select the Integrations option under Workspace options in the settings modal. This will redirect to the integrations tab.
  • Next, choose the Develop your integration option. Now we'll be redirected to our integration page.
Image One.png
  • On the integrations page, select the New integration option and add a name and associated workspace you want to work with and hit submit. This will create us a new secret key!
Image Two.png
Image Three.png
  • Now head back to our workspace, choose a specific page and click on the share option (we can find this on the top-right corner)
  • Next, hit the invite button, a new modal opens, here we can find our created integration. Select the integration and confirm the invite.
  • With this, we should be able to add an integration to a Notion page; also, make sure to save your integration key; we’ll have to use it for using the Notion API
In Notion, integration has a secret key; when added to a workspace, we could perform all the actions (create, read, update). We'll use the secret key of the integration to connect with third-party applications.

Setting up a Notion Page

To work with the Notion API, firstly, let’s create a database for our content calendar.

  • On your page, add a new table with the following fields that are required for our content manager:
Title: Text Field
Description: Text Field
Author: Text Field
Category: Text Field
Status: Dropdown Field
Notes: Text Field
Deadline: Date Field
Author Email: EMail Field

You can also use this Notion page of ours, which can be used as a mock database. You can click on this link duplicate to one of your workspaces. Also, make sure to add the integration to this page to use the Notion API.

Now that we have our page and integration-ready, we’ll start building an App on Appsmith.

Querying Data from Notion API

In this section, we’ll be querying data from Notion API. Follow the below steps:

  • Firstly, we should have an Appsmith account; if not, sign-up here (it's free)! Next, create a new application under an organisation by clicking on the Create New button.
  • We’ll now find Widgets, APIs, and DB Queries on the left navigation; we can use these features to build our application. We’ll start by creating a Notion API.
  • Click on the + icon next to the APIs and click on Create new and name the API as query_data_from_database
  • Now, add the following in the URL for the API:
https://api.notion.com/v1/databases//query
  • Here, db-id is the database id for a notion page. To find this, we’ll have to open our Notion Table as a page and pick the database id from the URL.
  • Following is an example URL showing the id of a Notion page.
https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
                                  |--------- Database ID --------|
  • Next, add the following keys under the Headers tab.
	Authorization: 
	Notion-Version: 2021-05-13
	Content-type: application/json

Below is a screenshot of how the configuration looks like:

Image Four.png
  • Lastly, hit the RUN button, and we can find all the data from our page in the Response Body pane.

Awesome, we now have the response from the Notion API; let’s bind this onto a List Widget.

Binding Notion APIs onto Appsmith

Now that we have an API containing data from the Notion Table let’s bind this onto a list widget to display all the details. Follow the below steps:

  • Select Page1 on the left navigation and click on the + icon next to the widgets section. Now we should see different UI widgets that we can use to build UI.
  • *Based on your preference, you can either choose a table widget or a list widget to bind the data from Notion API. In this example, we’ll be using a List widget.
  • Now drag and drop the list widget onto the canvas; we should see list items filled with Pokemon information. To inspect these, we can click on the cog icon on the top of the list widget and check out the data in the Items property. You can find more information from the docs here.
  • Now, we’ll be using the moustache syntax to write JS in Appsmith, replace the Items property on the list widget with the following code snippet:
In Appsmith, you can access the API’s anywhere inside the moustache syntax using the API name.
{
{
	query_data_from_database.data.results.map(
    	(item) => {
        	return (item.properties)
    	})
}
}

Here, we’re using the query_data_from_database and mapping it to return item properties. This how the response looks like:

Image Five.png

Awesome, now let’s add some widgets onto the list widget and show the details from the Notion API. Drag and drop six text widgets and set its Text property to the following:

- Title
- Description
- Status
- Author
- Email
- Deadline

Add six more text widgets next to them, where we’ll be binding their corresponding values from the Notion API.

Now in the text widget next to the Title text widget, set the Text property to the following:

{{ currentItem.Title.title[0].text.content }}

Here the currentItem corresponds to a unique item in the list widget, and next, we access the Title property from the Items on our list and parse the JSON. Below is the screenshot of how the response looks like:

Image Six.png

Great, we can now see our Titles from the Notion API on items of our list widget; similarly, let’s set the Text property of other text widgets to show the contents from the API:

  • Description text widget set the Text property to:
{{currentItem.Description.rich_text[0].text.content}}
  • Status text widget, set the Text property to:
{{currentItem.Description.rich_text[0].text.content}}
  • Author text widget, set the Text property to:
{{currentItem.Author.rich_text[0].text.content}}
  • EMail text widget set, the Text property to:
{{currentItem["Author Email"].email || "Not Added"}}
  • Deadline text widget set, the Text property to:
{{currentItem.Deadline.date.start}}
  • Category text widget set the Text property to:
{{currentItem.Category.rich_text.map(row => {return row.plain_text})[0]}}
The code for parsing through items changes based on the API response from the Notion API.

We’ve added some additional styles and added a button widget at the end so that admins can send Emails to the authors directly from Appsmith. Below is how the App looks like after we parse all the data from the Notion Table onto the Appsmith List widget:

Notion App Screenshot.png

We can also add a refresh button to the query_data_from_database query. For this, drag and drop the Button widget onto the canvas, set the Label property to Refresh. Next, open the onClick property, click the Call an API option, and select the query_data_from_database API. Now, whenever we click the refresh button, we should see all the new data updated on the Notion page.

Adding an Item into Notion Database

For our content calendar, we can list all the details from the Notion Table. Now let’s add a feature to add new items on the table from Appsmith. Follow the below steps.

  • First, let’s create a new page named “Author Submission” now drag and drop a form widget onto the canvas.
  • Inside the Form widget, let’s add some text widgets and input widgets from which the authors should submit their new content ideas.
  • This is how our form should look like:
Image Eight.png

Following are the fields we’ve created for reference:

Now, let’s name these widgets (so that we can use them to refer in the POST API method) to the following:

Title - titleInput
Description - descriptionInput
Author Name - authorInput
Email - emailInput
Category - categoryInput
Submission Date - dateInput

Let’s create a new API that’ll add a new value to the Notion page when making submissions from the Appsmith form. Follow the below steps:

  • First, create a new API under the Author Submission page and name it as add_an_item_to_database
  • Next, add the following keys under the Headers tab.
Authorization: 
Notion-Version: 2021-05-13
Content-type: application/json
  • Now in the body tab, paste the following code:
	"parent": { "database_id": "" },
 "properties": {
           "Author": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{authorInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Author Email": {
          "type": "email",
          "email": "{{emailInput.text}}"
        },
        "Category": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{categoryInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Status": {
          "type": "select",
          "select": {
            "name": "Not Started",
    "color": "blue"
          }
        },
        "Description": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{descriptionInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Deadline": {
          "type": "date",
          "date": {
            "start": "{{dateInput.selectedDate}}",
            "end": null
          }
        },
        "Title": {
          "type": "title",
          "title": [
            {
              "type": "text",
              "text": {
                "content": "{{titleInput.text}}",
                "link": null
              }
            }
          ]
        }
      }
  }

This is how Notion API allows us to add new items to a database. Here we'll also have to add the database id in the place of <db-id>. If we observe the body inside each property's content field, we added a moustache operation from which we'll take the input from the Appsmith input forms.

Now open the Submit button’s property pane, update the onClick property to Call an API, and choose add_an_item_to_database API. With this, we should add new data to the Notion table using the Appsmith form!

Send Grid Email Integration

Our content manager now shows all the data and also has a feature to add new content ideas. Now let’s add an email integration to communicate with Authors via Appsmith. We’ll be using Sendgrid to achieve this.

Creating a Modal for sending emails:

  • First, create a new modal when the Send Mail button is clicked on the list item. We can do this by setting the onClick property to Open Modal and selecting Create New.
  • Set the modal type to Form modal by toggle the option in the property pane.
  • Inside the Modal widget, let’s add some text widgets and input widgets from which we should send Emails.
  • Following are the fields we’ve created for reference:
Sending To: Input Widget
Email subject: Input Widget
Email content: Rich Text Editor Widget
  • Now, let’s name these widgets (so that we can use them to refer in the POST API method) to the following:
Sending To: emailInput
Email subject: subjectInput
Email content: contentInput

Below is a screenshot of how the Modal should look like:

Image Nine.png

Configuring the SendGrid API:

  • Firstly, we should have a SendGrid account, and if you don’t have one, you can create a free account here.
  • Next, navigate to the Integration Guide by clicking on the Email API on the left navigation pane.
  • Choose the Web API and choose the cURL language. Now you’ll be redirected to the verification tab.
  • On the verification, tab click on the Create API by giving it a name. With this, we should have our SendGrid API key.
  • Next, open Appsmith and create a new API under Page1, name it as send_email. Set the request type to POST and add the following under the URL form:

https://api.sendgrid.com/v3/mail/send

Authorization : Bearer 
Content-Type : application/json
  • Lastly, set the body to the following:
{"personalizations": [{"to": [{"email": "{{emailInput.text}}"}]}],"from": {"email": "test@example.com"},"subject": "{{subjectInput.text}}","content": [{"type": "text/plain", "value": "{{contentInput.text}}"}]}

This is the default configuration from SendGrid that lets us send Emails, but here we are dynamically passing the to-email, from-email, subject and content field from the widget’s we’ve created on the Modal. Now, set the onClick property of the form to Call an API and choose the send_email query. With this, we should be able to send Emails from Appsmith successfully!

Conclusion

Deploy your application on the cloud and share it with others, and that's it. We're done!

We've seen how easy it is to build an application on Appsmith, specifically a CMS with Notion as a backend. This guide covered how to create a CRM and connect it to a Notion API and how to create and read data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.

We have made a slightly more robust application public here; try it out and let us know what you think. You can also check the live demo of our app here.

Using the Notion API to Build a Content Management System

At Appsmith, we use Notion to manage our content calendar. We also work with a few external agencies and freelancers for some of our content. It is impossible to create granular access control and develop a workflow on Notion to run the process smoothly and thus, as soon as Notion released their API, we decided to build an application that helps us manage our entire content management in one place while giving our collaborators the necessary access only.

Our application uses our Notion (mock) Table as a data source and lets you plant, submit and edit articles on the application, while at the same time has a provision for integrating with an email service of your choice (we use SendGrid here) to send reminder emails or updates to people in the project.

In this tutorial, we’ll build an essential Content Management System, which will let you:

  • Submit new content idea submissions from authors
  • Set deadlines for submissions
  • Follow up with authors directly with their Emails
  • Organise all data on a Notion page

Check out the live demo here. Here's a screenshot of how the app looks like:

Notion App Screenshot.png
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets, including charts, tables and forms, for building a UI fast.

Let’s dive right in!

Configuring the Notion API

Notion API lets us connect to Notion Pages and Databases. Now, let's look at how we can set up the API, gather all the required keys and connect to Appsmith.

  • Firstly, choose the workspace you want to work with on your Notion. If you want to test it, feel free to create a new workspace.
  • Now, open the workspace setting by clicking on the Settings and Members option on the left navigation bar. We should see a new modal with all the settings.
  • Find the select the Integrations option under Workspace options in the settings modal. This will redirect to the integrations tab.
  • Next, choose the Develop your integration option. Now we'll be redirected to our integration page.
Image One.png
  • On the integrations page, select the New integration option and add a name and associated workspace you want to work with and hit submit. This will create us a new secret key!
Image Two.png
Image Three.png
  • Now head back to our workspace, choose a specific page and click on the share option (we can find this on the top-right corner)
  • Next, hit the invite button, a new modal opens, here we can find our created integration. Select the integration and confirm the invite.
  • With this, we should be able to add an integration to a Notion page; also, make sure to save your integration key; we’ll have to use it for using the Notion API
In Notion, integration has a secret key; when added to a workspace, we could perform all the actions (create, read, update). We'll use the secret key of the integration to connect with third-party applications.

Setting up a Notion Page

To work with the Notion API, firstly, let’s create a database for our content calendar.

  • On your page, add a new table with the following fields that are required for our content manager:
Title: Text Field
Description: Text Field
Author: Text Field
Category: Text Field
Status: Dropdown Field
Notes: Text Field
Deadline: Date Field
Author Email: EMail Field

You can also use this Notion page of ours, which can be used as a mock database. You can click on this link duplicate to one of your workspaces. Also, make sure to add the integration to this page to use the Notion API.

Now that we have our page and integration-ready, we’ll start building an App on Appsmith.

Querying Data from Notion API

In this section, we’ll be querying data from Notion API. Follow the below steps:

  • Firstly, we should have an Appsmith account; if not, sign-up here (it's free)! Next, create a new application under an organisation by clicking on the Create New button.
  • We’ll now find Widgets, APIs, and DB Queries on the left navigation; we can use these features to build our application. We’ll start by creating a Notion API.
  • Click on the + icon next to the APIs and click on Create new and name the API as query_data_from_database
  • Now, add the following in the URL for the API:
https://api.notion.com/v1/databases//query
  • Here, db-id is the database id for a notion page. To find this, we’ll have to open our Notion Table as a page and pick the database id from the URL.
  • Following is an example URL showing the id of a Notion page.
https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
                                  |--------- Database ID --------|
  • Next, add the following keys under the Headers tab.
	Authorization: 
	Notion-Version: 2021-05-13
	Content-type: application/json

Below is a screenshot of how the configuration looks like:

Image Four.png
  • Lastly, hit the RUN button, and we can find all the data from our page in the Response Body pane.

Awesome, we now have the response from the Notion API; let’s bind this onto a List Widget.

Binding Notion APIs onto Appsmith

Now that we have an API containing data from the Notion Table let’s bind this onto a list widget to display all the details. Follow the below steps:

  • Select Page1 on the left navigation and click on the + icon next to the widgets section. Now we should see different UI widgets that we can use to build UI.
  • *Based on your preference, you can either choose a table widget or a list widget to bind the data from Notion API. In this example, we’ll be using a List widget.
  • Now drag and drop the list widget onto the canvas; we should see list items filled with Pokemon information. To inspect these, we can click on the cog icon on the top of the list widget and check out the data in the Items property. You can find more information from the docs here.
  • Now, we’ll be using the moustache syntax to write JS in Appsmith, replace the Items property on the list widget with the following code snippet:
In Appsmith, you can access the API’s anywhere inside the moustache syntax using the API name.
{
{
	query_data_from_database.data.results.map(
    	(item) => {
        	return (item.properties)
    	})
}
}

Here, we’re using the query_data_from_database and mapping it to return item properties. This how the response looks like:

Image Five.png

Awesome, now let’s add some widgets onto the list widget and show the details from the Notion API. Drag and drop six text widgets and set its Text property to the following:

- Title
- Description
- Status
- Author
- Email
- Deadline

Add six more text widgets next to them, where we’ll be binding their corresponding values from the Notion API.

Now in the text widget next to the Title text widget, set the Text property to the following:

{{ currentItem.Title.title[0].text.content }}

Here the currentItem corresponds to a unique item in the list widget, and next, we access the Title property from the Items on our list and parse the JSON. Below is the screenshot of how the response looks like:

Image Six.png

Great, we can now see our Titles from the Notion API on items of our list widget; similarly, let’s set the Text property of other text widgets to show the contents from the API:

  • Description text widget set the Text property to:
{{currentItem.Description.rich_text[0].text.content}}
  • Status text widget, set the Text property to:
{{currentItem.Description.rich_text[0].text.content}}
  • Author text widget, set the Text property to:
{{currentItem.Author.rich_text[0].text.content}}
  • EMail text widget set, the Text property to:
{{currentItem["Author Email"].email || "Not Added"}}
  • Deadline text widget set, the Text property to:
{{currentItem.Deadline.date.start}}
  • Category text widget set the Text property to:
{{currentItem.Category.rich_text.map(row => {return row.plain_text})[0]}}
The code for parsing through items changes based on the API response from the Notion API.

We’ve added some additional styles and added a button widget at the end so that admins can send Emails to the authors directly from Appsmith. Below is how the App looks like after we parse all the data from the Notion Table onto the Appsmith List widget:

Notion App Screenshot.png

We can also add a refresh button to the query_data_from_database query. For this, drag and drop the Button widget onto the canvas, set the Label property to Refresh. Next, open the onClick property, click the Call an API option, and select the query_data_from_database API. Now, whenever we click the refresh button, we should see all the new data updated on the Notion page.

Adding an Item into Notion Database

For our content calendar, we can list all the details from the Notion Table. Now let’s add a feature to add new items on the table from Appsmith. Follow the below steps.

  • First, let’s create a new page named “Author Submission” now drag and drop a form widget onto the canvas.
  • Inside the Form widget, let’s add some text widgets and input widgets from which the authors should submit their new content ideas.
  • This is how our form should look like:
Image Eight.png

Following are the fields we’ve created for reference:

Now, let’s name these widgets (so that we can use them to refer in the POST API method) to the following:

Title - titleInput
Description - descriptionInput
Author Name - authorInput
Email - emailInput
Category - categoryInput
Submission Date - dateInput

Let’s create a new API that’ll add a new value to the Notion page when making submissions from the Appsmith form. Follow the below steps:

  • First, create a new API under the Author Submission page and name it as add_an_item_to_database
  • Next, add the following keys under the Headers tab.
Authorization: 
Notion-Version: 2021-05-13
Content-type: application/json
  • Now in the body tab, paste the following code:
	"parent": { "database_id": "" },
 "properties": {
           "Author": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{authorInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Author Email": {
          "type": "email",
          "email": "{{emailInput.text}}"
        },
        "Category": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{categoryInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Status": {
          "type": "select",
          "select": {
            "name": "Not Started",
    "color": "blue"
          }
        },
        "Description": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{descriptionInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Deadline": {
          "type": "date",
          "date": {
            "start": "{{dateInput.selectedDate}}",
            "end": null
          }
        },
        "Title": {
          "type": "title",
          "title": [
            {
              "type": "text",
              "text": {
                "content": "{{titleInput.text}}",
                "link": null
              }
            }
          ]
        }
      }
  }

This is how Notion API allows us to add new items to a database. Here we'll also have to add the database id in the place of <db-id>. If we observe the body inside each property's content field, we added a moustache operation from which we'll take the input from the Appsmith input forms.

Now open the Submit button’s property pane, update the onClick property to Call an API, and choose add_an_item_to_database API. With this, we should add new data to the Notion table using the Appsmith form!

Send Grid Email Integration

Our content manager now shows all the data and also has a feature to add new content ideas. Now let’s add an email integration to communicate with Authors via Appsmith. We’ll be using Sendgrid to achieve this.

Creating a Modal for sending emails:

  • First, create a new modal when the Send Mail button is clicked on the list item. We can do this by setting the onClick property to Open Modal and selecting Create New.
  • Set the modal type to Form modal by toggle the option in the property pane.
  • Inside the Modal widget, let’s add some text widgets and input widgets from which we should send Emails.
  • Following are the fields we’ve created for reference:
Sending To: Input Widget
Email subject: Input Widget
Email content: Rich Text Editor Widget
  • Now, let’s name these widgets (so that we can use them to refer in the POST API method) to the following:
Sending To: emailInput
Email subject: subjectInput
Email content: contentInput

Below is a screenshot of how the Modal should look like:

Image Nine.png

Configuring the SendGrid API:

  • Firstly, we should have a SendGrid account, and if you don’t have one, you can create a free account here.
  • Next, navigate to the Integration Guide by clicking on the Email API on the left navigation pane.
  • Choose the Web API and choose the cURL language. Now you’ll be redirected to the verification tab.
  • On the verification, tab click on the Create API by giving it a name. With this, we should have our SendGrid API key.
  • Next, open Appsmith and create a new API under Page1, name it as send_email. Set the request type to POST and add the following under the URL form:

https://api.sendgrid.com/v3/mail/send

Authorization : Bearer 
Content-Type : application/json
  • Lastly, set the body to the following:
{"personalizations": [{"to": [{"email": "{{emailInput.text}}"}]}],"from": {"email": "test@example.com"},"subject": "{{subjectInput.text}}","content": [{"type": "text/plain", "value": "{{contentInput.text}}"}]}

This is the default configuration from SendGrid that lets us send Emails, but here we are dynamically passing the to-email, from-email, subject and content field from the widget’s we’ve created on the Modal. Now, set the onClick property of the form to Call an API and choose the send_email query. With this, we should be able to send Emails from Appsmith successfully!

Conclusion

Deploy your application on the cloud and share it with others, and that's it. We're done!

We've seen how easy it is to build an application on Appsmith, specifically a CMS with Notion as a backend. This guide covered how to create a CRM and connect it to a Notion API and how to create and read data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.

We have made a slightly more robust application public here; try it out and let us know what you think. You can also check the live demo of our app here.

Square
Try Appsmith
Introducing Version Control with Git
3
June
2022
Announcement

Introducing Version Control with Git

Introducing Version Control with Git
Visahavel Parthasarathy
0
 minutes ↗
#
announcement
#
community
#
developer
Announcement

Today we're excited to announce the launch of Version Control with Git, so that developers can collaborate and version control their applications. This has been one of the most requested features from our community.

While low-code frameworks like Appsmith save a developer's time via easier application management, faster plugging in of data sources, and effortless creation of UI, there are still aspects of a developer's usual workflow that aren't native to low-code platforms.

Version Control with Git, enables us to take a big step towards that.

Here's a short video on how you can use Version Control with Git:

Version Control with Git Highlights

Version Control with Git allows multiple developers to add their work in a git branch, raise a pull request for code reviews, integrate with CI/CD pipelines so that their changes go live when their pull requests are approved, and provide a commit history to go back to a previous version if something were to go wrong. You can now also test a new addition to your app on a separate branch without breaking your deployed version.

You can connect to any popular version control tool of your liking: Github, Gitlab, Bitbucket, AWS Code Commit and more.

Furthermore, if you're a large organization using isolated environments for your production and test apps, you can now ensure that your applications can only be promoted to production via your CI/CD processes.

Version Control For All

Appsmith's Community Edition users will be able to connect unlimited public repos and up to 3 private repos.

In contrast, low-code frameworks in the market today either don't offer this functionality as part of their open source or free edition (and instead offer a simple auto-save), or push it deep into their most expensive pricing plans (like Retool).

Head over to our Version Control with Git documentation on how to set up version control with your favorite version control tools and get the most out of it.

May Round-up: App Theming, New Copy Paste Experience, and Product Updates
2
June
2022
Monthly Round-up

May Round-up: App Theming, New Copy Paste Experience, and Product Updates

May Round-up: App Theming, New Copy Paste Experience, and Product Updates
Vihar Kurama
0
 minutes ↗
#
announcement
#
developer
#
community
Monthly Round-up

If you’ve followed Appsmith for a while, you know that we can do a lot in 30 days! I am here to give you all the deets; follow along!

Application Theming [Beta]

One of our most awaited features — App Theming — is now out! Style your pages and widgets using global controls. We've also made it easy to change the visual layout with a single click.

Note that while all apps support theming, changing the theme or customizing the theme may not update the app entirely for older apps. We’ve done this to prevent overriding any changes you may have already made while styling your widgets. (Note that, this is a beta feature at the moment, and we are going to be improving it in the coming weeks).


Theming automatically updates multiple properties, including fonts, colors, borders, shadows, etc. All these properties can be configured from the property pane globally. Read the complete documentation here.

Discard Changes/ Delete Branch on Version Control

Version Control with Git is well-loved by Appsmith users, especially when working with teams. We’ve enhanced this feature by adding another option other than ‘commit’ to make it more flexible. Now you can discard changes on the current branch and reload the earlier, committed application. Additionally, you can also delete the stale or unused branches.

Allowing Camera and Microphone on iFrame

Are you communicating to other websites from Appsmith? Our latest improvements will help you get the most out of it. All you have to do is use allow="camera; microphone" on the attributes to be able to access the camera/microphone on the iframe.

Making it easy for you on Windows using WSL

Have trouble setting up the Appsmith server on Windows? Don’t worry. We’ve worked on some documentation to help you contribute to Appsmith on Windows operating systems that use WSL; check it out here. Prerequisite MongoDB is included, along with detailed notes on building/running the code and how to set up your code editor.

Improvements

New Copy Paste Experience

Duplicating widgets on Appsmith is now easier with the new-copy-paste experience. Here’s a quick summary of how it works:

When the layout widget is selected:

  • If the mouse pointer is not on the layout widget, the widget is pasted inside the layout widget at the bottom of the canvas.
  • If the mouse pointer is on the layout widget, the pasted widget will be aligned top-left of the mouse pointer inside the layout widget.

If the non-layout widget is selected, no matter where the mouse pointer is, It is pasted below the non-layout widget, and the widgets are aligned horizontally.

If the mouse pointer is on a widget and no widgets are selected, widgets will be posted below and are horizontally aligned.

More Pages? View them all at once!

We’ve added a new option to resize the entity explorer page to view more pages at once. Just find the expander and extend it based on your comfort :)

Total Records and Page Count on Table Header

More love to the table widget; we’ve just added total record count and page count on the table header.

CleanShot 2022-05-25 at 15.34.35@2x.png
Better Way of Running JS Objects

We’ve revamped the way we run JS Objects from the JS Editor. Just put the cursor inside the function and hit the RUN button. The editor automatically identifies which function you’re working on; you can always use the shortcuts to make this easier!

Additionally, the page load functions can be configured from the Settings tab, just like how we do it from queries!

CleanShot 2022-05-25 at 15.40.46@2x.png
Added top-level isValid property to JSONForm

Currently, the JSONForm widget has an isValid property inside the fieldState for each field. However, there is no top-level property to check all fields at once. With this update, we added an isValid property which can be used to check if the current form is valid (passes all validation) or not.

CleanShot 2022-05-25 at 15.47.07@2x.png
Enhanced Map Widget

We’ve added a new property to the Map widget that lets us enable search location from Map without entering the coordinates. You can search directly on the map and display searched fields on other widgets without clicking on the Map widget.

CleanShot 2022-05-25 at 15.48.29@2x.png

Collaborations, Technical Content, Videos & Tutorials

Last month was hectic! We’ve published a new video on how you can generate PDFs from Appsmith using APITemplate; not just this, we’ve successfully hosted a couple of live sessions.

  • In this Video, Confidence, our Developer Advocate, show us how you can build a workflow to generate PDFs from Appsmith by consuming APIs from APITemplte.io.
  • Shams Mosowi from Rowy.io collaborated with us to demonstrate how we can build an expense management tool that employees can use to submit expenses for approval using Rowy as the backend.
  • Getting started with Version Control with Git on Appsmith? We’ve created a guide on how you can connect to a Git provider to version control Appsmith apps. Watch it here.

If you're curious about what we were up to, look no further and follow this link.

If you’re interested in using a database not listed on our website as an integration, please let us know about it by raising a PR on Github, and we will do our best to include it at the earliest.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

April Round-up: Multiple Widget Reflow, Readable URLs, more Product Updates
3
May
2022
Monthly Round-up

April Round-up: Multiple Widget Reflow, Readable URLs, more Product Updates

April Round-up: Multiple Widget Reflow, Readable URLs, more Product Updates
Vihar Kurama
0
 minutes ↗
#
announcement
#
community
Monthly Round-up

If you’ve followed Appsmith for a while, you know that we can do a lot in 30 days!

I am here to give you all the deets; follow along!

Introducing Multiple Widget Reflow

We’ve received a lot of positive feedback on our new drag and drop experience. Users dig being able to resize widgets and move them around. This provides them with the ultimate freedom to build applications however they want without barriers that might get in the way :P

We’ve made this even more fun and powerful by adding a multiple widget reflow feature. With this, users should be able to move widgets and resize them even when they are grouped.

This also makes the drag and drop experience more performant in avoiding UI lags while moving widgets.

Readable Application URLs

All of you have been waiting for a much-requested feature, and today, it’s finally here! The application URL now has your app name as a slug, making it easier for you to share and find your Appsmith applications. This is available immediately for all the old applications and, of course, the newly created ones. Here’s a sample app URL.


https://app.appsmith.com/app/april-round-up/home-6266f76700cba01cd0301e20

To upgrade your old app URLs, please navigate the updates section from the bottom bar and hit update. Here’s the recording of how you can do it:

Product Updates

New Response View Switchers

We've added a new response view switcher feature that lets users easily switch between response formats on the fly; you'll be able to view them in different formats (JSON, Table, RAW) based purely on ease of choice. This feature will be available on all action types (APIs/Queries on a datasource).

Added Button Variants in Table Column Type

It’s super easy to set a column type to a button on Appsmith - just navigate to column properties and update the type to Button. To make your table button more extraordinary, we’ve added the variant property taking inspiration from our button widget; with this, you can update table button types to different variants available.

CleanShot 2022-04-26 at 01.05.56@2x.png
Smart Substitution Feature on Firestore Plugin

We’ve added a smart substitution feature to Firestore plugin methods (to dynamically perform type conversions on field values in a request body). The smart substitution will work the same way for REST API requests.

Currently, this feature only gets applied to the body section of Create, Set, Add or Update commands, as this is the only input field that expects a JSON input type. This can be toggled by navigating to the settings tab on datasource.

Added MultipartFormDataType variants for REST Datasource

We’ve added ​​MultipartFormDataType variants; with this, users can add an array as a value for multipart requests on REST APIs. It will handle every item in the list as a part of the multipart request. Here’s what an example body will look like:


--IpJ9ACFxVbhXlAQuIFccoJ0K0ttFS5PVyfX3
Content-Disposition: form-data; name="myArray"
Content-Type: text/plain;charset=UTF-8
Content-Length: 3

One
--IpJ9ACFxVbhXlAQuIFccoJ0K0ttFS5PVyfX3
Content-Disposition: form-data; name="myArray"
Content-Type: application/json
Content-Length: 1

2
--IpJ9ACFxVbhXlAQuIFccoJ0K0ttFS5PVyfX3
Content-Disposition: form-data; name="myArray"
Content-Type: application/json
Content-Length: 4


Enhanced Text Widget

When the truncating text option is enabled in a text widget, the scroll switch is no longer valid; as we truncate to fix this issue, we made the following changes.

We’ve added an overflow property option with the following configurations:

  • Scroll Contents - Enables scroll in the text widget
  • Truncate Text - Enables truncation in the text widget
  • No Overflow - No scroll or truncation
CleanShot 2022-05-02 at 16.39.07@2x.png
Added Support to MinIO in S3

You can now connect MinIO instances on Appsmith using the S3 plugin. This can be done when:

  • over the unsecured connection (HTTP)
  • when secured via a CA-signed certificate (HTTPS)

You can find this connecting in a dropdown from the S3 datasource.

Select Widget is now 50x Faster on Large Datasets

We’ve been listening to a few issues with the select widgets when large datasets are used. Previously, in the case of these large data sets, the Select widget took up to 5 seconds to render. The initial render is down to ~100ms once the options are available from the API call.

Our engineers tested this thoroughly by loading 1000 options from a mock API on a newly upgraded test widget :)

New Collaborations, Technical Content, Videos & Tutorials

Last month was crazy for us; we’ve published a blog post on how you can connect Stipe on Appsmith to manage your transactions; not just this, we’ve successfully hosted four live sessions.

  • We’ve created a small guide on how you can use JSON forms on Appsmith. This widget lets you build any kind of form with JSON dynamically. Learn how to use it here.
  • Stephen Tillman, one of our active community members, joined us to show how Appsmith helped him to build a great dashboard that lets him manage credit cards on Brex using BrexAPIs. Watch the recording here.
  • Pranav and I hosted the third How Do I Do X session, where we picked questions from the community to integrate with ZohoCRM and Stripe APIs. We’ve also talked about how you can use resetWidget and clearWidget functions on Appsmith to handle form actions. Watch the recording here.

If you're curious about what we were up to, look no further and follow this link.

If you’re interested in using a database not listed on our website as an integration, please let us know about it by raising a PR on Github, and we will do our best to include it at the earliest.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

What’s a Rich Text element?

asdsadasdsa

asdsadasdsa

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

sfdfsdfds

dsfdsfdsf

adfkaldf

The rich text element allows you to create and format

sadadasdasdas dsada sadas asd ad

Static and dynamic content editing

  1. vdfgdgd
  2. gjgjg

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

swzdswxzdsw