6
July
2021
Product

Building Our Community while Building in Public: Learnings at Appsmith

User engagement is a catch-all phrase the internet uses for well...engaging with your users. But like all such phrases, it doesn’t mean much without context, especially for an open-source company like ours that builds software for developers.

At Appsmith, we’re evolving from a small project with great support on Discord to a company that is investing heavily in engaging its users. In this post, I’ll walk you through our key learnings over time, with a little bit about what our users had to say at each step of the journey.

  1. Distinguishing great support from engagement
  2. Personalizing interactions with users
  3. Discovery as a core function of engagement initiatives
  4. Using the product to drive engagement
  5. Segmenting users
  6. Seeding content in the initial days
  7. Tracking progress and engagement

Great support is just the first step

We started a Discord channel to brainstorm ideas and learn from our users. Back in January, our Discord was (and still is) active 24x7. We were helping users across time zones all day. Users loved the speed of our support. Support work has remained extremely important for us and @mohanarpit, our co-founder, makes it a point to give shout outs for support work on our internal slack.

CleanShot 2021-07-06 at 17.38.42@2x.png
CleanShot 2021-07-06 at 17.38.57@2x.png

Being available all the time for support was helpful, but we were not generating relevant content. Very rarely were users spending time discussing the product with us. We needed to do more to communicate with users around what we were doing, and had to find ways to show them that we cared about their inputs. While speaking to our users, we also learnt that they engaged with us to request features, report bugs, and plan for the future so they could continue using us. Asking for support was just one of the ways in which they could get their jobs done. Support is what gets users started with the community, but it doesn’t make them stay and get involved.

That’s when we started our newsletter and other content initiatives. In addition to our docs, Appsmith now has a wide variety of videos, tutorials and templates to get users started. We immediately saw an impact and a lot of new users loved us for it, and our non-support channels started getting more active on Discord!

Make it personal and experiment with what works

Almost simultaneously with the content initiatives, we started something we used to call “office hours”. Users could join us on Thursdays and ask questions and receive live support. Our first month was decent, but over time, fewer people joined, and most questions coming up were about future features and timelines. So, on one hand, this felt like a failure because we didn’t get the volume of activity we expected, but on the other hand, our entire team loved interacting with the users. It felt personal and we got the best feedback through these sessions. Some of these sessions also helped users decide whether Appsmith was offering them what they wanted in the near future. There was definitely a great value in having such an initiative.

CleanShot 2021-07-06 at 17.42.21@2x.png

First community call where 3 users showed up

So we furthered the initiative with Community Hours. With Intercom and Discord for near-instant support, we used the Community Hours to speak about our product roadmap, talk about releases and lift the hood around some engineering choices we made.

CleanShot 2021-07-06 at 17.43.50@2x.png

All the features voted for by the community, that we’re building right now (watch)

We had a long list of feature requests and these events helped us prioritize our features to what the community wanted. We also started streaming live demos so our users could see our new features in action while we built complex applications.

This showed us that not every initiative is a success, but if there is value in an initiative, it is worth looking at how we could get the same interactions through a different format. We were so focused on support that it took us time to realize our users were with us in this for the long haul.

Now, we have launched Betasmith to interact with users even more closely. You can join Betasmith here!

CleanShot 2021-07-06 at 17.45.23@2x.png

Discovery is important

It’s easy to ship content, but it is really hard to make it discoverable for people. It is even easier to set up a website or Discord channel, but even harder to get them to work for you.

The trick is to have easy ways to engage with your users and this sometimes means using multiple channels in tandem. We frequently inform all our users about our Discord channel in case they need support. Our intercom chat pops up a couple of times for new users helping them with tips, tutorials and asking them if they need help. Our entire onboarding email is set up to get users to succeed with Appsmith and engage with us meaningfully.

To really drive home engagement, we included an omnibar really early in the lifecycle of the product so people could find what they were looking for easily. Our content efforts were first focused on existing users vs initiatives for real growth. We focused on the problems our users were trying to solve on Appsmith and focused on it than content that was more friendly to new users on SEO. Tying back to our first point, the only reason we believe our content initiatives are successful is that we made them easy to access.

omnibar.gif

Omnibar to the rescue

Use your product

We want to be there for our users, especially while they’re using the product. To make it as non-intrusive as possible, we use Intercom for gentle nudges to help them, hear from them and figure out how to help them succeed. From our analysis, it is surprisingly effective in getting people the help they need and setting them up for success on Appsmith.

At the same time, it is important not to overuse the product for engagement and let our users use the product the way they want. It is easy to get carried away and use the real estate near the banner, navbar and other empty spaces to push for engagement (This is something we argue over every day), but it is important to understand that users don’t use the product to engage with us. Engagement is a great side effect of a good product.

Not all users are the same

This seems obvious but is hard to put into practice. Not all users want the same features or the level of support or the roadmap. Segmenting users here helps to figure out which channel is more effective to engage with them.

Our users include startup founders (who are super active on Appsmith) as well as CTOs of large companies (who use our product once in a while and don’t personally engage on the platform). We need different strokes for different folks. For example, support requests work great on discord for founders and engineers, but might not be the most optimal channel for CTOs of larger companies.

Discord was great for instant support, but it was a nightmare for users during peak hours. Repeated questions, examples and JavaScript snippets were clogging the pipeline. Before we officially launched community.appsmith.com, users had already found the website and started asking questions. We quickly realised that our users were seeking a place where they could search for pre-existing queries or have their queries answered without the hassle of Discord. This also signalled a preference for more elaborate answers to questions about the direction of our project.

We’re still in the process of getting our forums to be as active as our community, and I think we will get there fairly soon, simply because of users’ preferences in where and how they want to engage with us.

CleanShot 2021-07-06 at 18.01.47@2x.png

Seed common spaces!

The one thing I believe we definitely did right from the beginning, was seeding our forums and Discord community with content. When our users saw that there was activity, they were happier to post, argue and discuss with us across a variety of channels.

But what really helped us do this easily was that we decided that as contributors to Appsmith, we were essentially the group that set the bar on community interactions and formed the core part of the community. We operated as members of the community first, and used Appsmith to create our own internal apps, and posted questions that came up naturally in that process.

CleanShot 2021-07-06 at 18.03.14@2x.png

From a user on our forums

Track your progress:

While this is not something you do directly for the community, as a project, it is very important to see where you and the community see returns in the efforts. At Appsmith, we use GitHub for issues, discourse forums, Reddit, Discord, email and intercom as channels to engage with users, and it is really complicated to see if our initiatives are working long term, without measuring retention and engagement for the community.

Luckily, we found orbit, a product-focused on community engagement that helps us figure out how users are interacting with various touchpoints in the community and the engagement of our users. We can now keep track of important metrics like messages on Discord and posts on discourse along with the number of returning members, and tie it with product metrics to improve user experience and engagement.

CleanShot 2021-07-06 at 18.03.55@2x.png

Orbit Dashboard for Appsmith

CleanShot 2021-07-06 at 18.04.48@2x.png

Tracking messages on Discord to measure the engagement

Some things to keep in mind:

While these ideas have worked for us at Appsmith, by no means will it work for everybody across the board. Also, one obvious engagement tool I haven’t touched upon in this article is email. Email is how most engagement starts, and there is tonnes of content about using email and making engagement effective online. The other problem with email, is there is a fine line between engagement and spam and thus we use email judiciously with a cap of one email a week and not more. We’re always thinking about how we can cut down the email we send our users and engage with them without spamming their inboxes.

But in the spirit of ticking all the boxes, you can check out our live demo on how we email users who are churning out. As we have scaled, we have also used Appsmith to build a ton of our internal engagement tools, to great effect.

This article provides an overview of the initiatives we’ve undertaken at appsmith to drive user engagement and build a community. We hope some of these initiatives will be useful for your context. Do let us know what you think!

Building Our Community while Building in Public: Learnings at Appsmith

User engagement is a catch-all phrase the internet uses for well...engaging with your users. But like all such phrases, it doesn’t mean much without context, especially for an open-source company like ours that builds software for developers.

At Appsmith, we’re evolving from a small project with great support on Discord to a company that is investing heavily in engaging its users. In this post, I’ll walk you through our key learnings over time, with a little bit about what our users had to say at each step of the journey.

  1. Distinguishing great support from engagement
  2. Personalizing interactions with users
  3. Discovery as a core function of engagement initiatives
  4. Using the product to drive engagement
  5. Segmenting users
  6. Seeding content in the initial days
  7. Tracking progress and engagement

Great support is just the first step

We started a Discord channel to brainstorm ideas and learn from our users. Back in January, our Discord was (and still is) active 24x7. We were helping users across time zones all day. Users loved the speed of our support. Support work has remained extremely important for us and @mohanarpit, our co-founder, makes it a point to give shout outs for support work on our internal slack.

CleanShot 2021-07-06 at 17.38.42@2x.png
CleanShot 2021-07-06 at 17.38.57@2x.png

Being available all the time for support was helpful, but we were not generating relevant content. Very rarely were users spending time discussing the product with us. We needed to do more to communicate with users around what we were doing, and had to find ways to show them that we cared about their inputs. While speaking to our users, we also learnt that they engaged with us to request features, report bugs, and plan for the future so they could continue using us. Asking for support was just one of the ways in which they could get their jobs done. Support is what gets users started with the community, but it doesn’t make them stay and get involved.

That’s when we started our newsletter and other content initiatives. In addition to our docs, Appsmith now has a wide variety of videos, tutorials and templates to get users started. We immediately saw an impact and a lot of new users loved us for it, and our non-support channels started getting more active on Discord!

Make it personal and experiment with what works

Almost simultaneously with the content initiatives, we started something we used to call “office hours”. Users could join us on Thursdays and ask questions and receive live support. Our first month was decent, but over time, fewer people joined, and most questions coming up were about future features and timelines. So, on one hand, this felt like a failure because we didn’t get the volume of activity we expected, but on the other hand, our entire team loved interacting with the users. It felt personal and we got the best feedback through these sessions. Some of these sessions also helped users decide whether Appsmith was offering them what they wanted in the near future. There was definitely a great value in having such an initiative.

CleanShot 2021-07-06 at 17.42.21@2x.png

First community call where 3 users showed up

So we furthered the initiative with Community Hours. With Intercom and Discord for near-instant support, we used the Community Hours to speak about our product roadmap, talk about releases and lift the hood around some engineering choices we made.

CleanShot 2021-07-06 at 17.43.50@2x.png

All the features voted for by the community, that we’re building right now (watch)

We had a long list of feature requests and these events helped us prioritize our features to what the community wanted. We also started streaming live demos so our users could see our new features in action while we built complex applications.

This showed us that not every initiative is a success, but if there is value in an initiative, it is worth looking at how we could get the same interactions through a different format. We were so focused on support that it took us time to realize our users were with us in this for the long haul.

Now, we have launched Betasmith to interact with users even more closely. You can join Betasmith here!

CleanShot 2021-07-06 at 17.45.23@2x.png

Discovery is important

It’s easy to ship content, but it is really hard to make it discoverable for people. It is even easier to set up a website or Discord channel, but even harder to get them to work for you.

The trick is to have easy ways to engage with your users and this sometimes means using multiple channels in tandem. We frequently inform all our users about our Discord channel in case they need support. Our intercom chat pops up a couple of times for new users helping them with tips, tutorials and asking them if they need help. Our entire onboarding email is set up to get users to succeed with Appsmith and engage with us meaningfully.

To really drive home engagement, we included an omnibar really early in the lifecycle of the product so people could find what they were looking for easily. Our content efforts were first focused on existing users vs initiatives for real growth. We focused on the problems our users were trying to solve on Appsmith and focused on it than content that was more friendly to new users on SEO. Tying back to our first point, the only reason we believe our content initiatives are successful is that we made them easy to access.

omnibar.gif

Omnibar to the rescue

Use your product

We want to be there for our users, especially while they’re using the product. To make it as non-intrusive as possible, we use Intercom for gentle nudges to help them, hear from them and figure out how to help them succeed. From our analysis, it is surprisingly effective in getting people the help they need and setting them up for success on Appsmith.

At the same time, it is important not to overuse the product for engagement and let our users use the product the way they want. It is easy to get carried away and use the real estate near the banner, navbar and other empty spaces to push for engagement (This is something we argue over every day), but it is important to understand that users don’t use the product to engage with us. Engagement is a great side effect of a good product.

Not all users are the same

This seems obvious but is hard to put into practice. Not all users want the same features or the level of support or the roadmap. Segmenting users here helps to figure out which channel is more effective to engage with them.

Our users include startup founders (who are super active on Appsmith) as well as CTOs of large companies (who use our product once in a while and don’t personally engage on the platform). We need different strokes for different folks. For example, support requests work great on discord for founders and engineers, but might not be the most optimal channel for CTOs of larger companies.

Discord was great for instant support, but it was a nightmare for users during peak hours. Repeated questions, examples and JavaScript snippets were clogging the pipeline. Before we officially launched community.appsmith.com, users had already found the website and started asking questions. We quickly realised that our users were seeking a place where they could search for pre-existing queries or have their queries answered without the hassle of Discord. This also signalled a preference for more elaborate answers to questions about the direction of our project.

We’re still in the process of getting our forums to be as active as our community, and I think we will get there fairly soon, simply because of users’ preferences in where and how they want to engage with us.

CleanShot 2021-07-06 at 18.01.47@2x.png

Seed common spaces!

The one thing I believe we definitely did right from the beginning, was seeding our forums and Discord community with content. When our users saw that there was activity, they were happier to post, argue and discuss with us across a variety of channels.

But what really helped us do this easily was that we decided that as contributors to Appsmith, we were essentially the group that set the bar on community interactions and formed the core part of the community. We operated as members of the community first, and used Appsmith to create our own internal apps, and posted questions that came up naturally in that process.

CleanShot 2021-07-06 at 18.03.14@2x.png

From a user on our forums

Track your progress:

While this is not something you do directly for the community, as a project, it is very important to see where you and the community see returns in the efforts. At Appsmith, we use GitHub for issues, discourse forums, Reddit, Discord, email and intercom as channels to engage with users, and it is really complicated to see if our initiatives are working long term, without measuring retention and engagement for the community.

Luckily, we found orbit, a product-focused on community engagement that helps us figure out how users are interacting with various touchpoints in the community and the engagement of our users. We can now keep track of important metrics like messages on Discord and posts on discourse along with the number of returning members, and tie it with product metrics to improve user experience and engagement.

CleanShot 2021-07-06 at 18.03.55@2x.png

Orbit Dashboard for Appsmith

CleanShot 2021-07-06 at 18.04.48@2x.png

Tracking messages on Discord to measure the engagement

Some things to keep in mind:

While these ideas have worked for us at Appsmith, by no means will it work for everybody across the board. Also, one obvious engagement tool I haven’t touched upon in this article is email. Email is how most engagement starts, and there is tonnes of content about using email and making engagement effective online. The other problem with email, is there is a fine line between engagement and spam and thus we use email judiciously with a cap of one email a week and not more. We’re always thinking about how we can cut down the email we send our users and engage with them without spamming their inboxes.

But in the spirit of ticking all the boxes, you can check out our live demo on how we email users who are churning out. As we have scaled, we have also used Appsmith to build a ton of our internal engagement tools, to great effect.

This article provides an overview of the initiatives we’ve undertaken at appsmith to drive user engagement and build a community. We hope some of these initiatives will be useful for your context. Do let us know what you think!

Square
Try Appsmith
Inline editing in the table widget, integration with Airtable, and more
2
August
2022
Announcement

Inline editing in the table widget, integration with Airtable, and more

Inline editing in the table widget, integration with Airtable, and more
Vihar Kurama
0
 minutes ↗
#
announcement
Announcement

In July, we squashed 102 of the peskiest bugs and shipped 34 top requested features over and above under-the-hood performance and usability improvements. There’s a new table widget that’s so much more powerful, an Airtable integration, and cleaner Google Sheets queries with 178 commits in 22 days just for that enhancement alone! You can tell we have got our ears close to you. Keep it coming, guys. We love it all, and we are always listening.

#BigThings

The swanky new table widget

Fact: Just 25% of you tell us who you are and how you use Appsmith. We are okay with that. We respect your privacy.
Assertion: Our usage numbers should be 4X more.
Inference: When we say the Table widget, ever since we launched it, has been used a crazy 820,000 times by 6,840 users, we actually mean it's been used a lot more and is second only to the Button.
Takeaway: Give it more love.

Introducing the new Table widget

Everything you asked for from the table and more is packed into this massive update. Here’s three that should make you sit up.

  • With inline editing, you can now forget about writing queries to edit data by cell, row, or column. You just get your data into the table and edit on the screen. We heavylift the queries, updating the database, and making sure it sticks–all behind the scenes. Clicksaver? Lifesaver? Timesaver? All three and more? We think so, too.
  • You know how you have always wanted to refer to custom column names more naturally than typing customColumn1, customColumn2, and so on in your queries? Yep. Done. No matter what the name of your column, reference away just as naturally as you name them.
  • Themes have been making apps pretty for a while, but Tables stayed rebelliously aloof from that prettiness. We have now made them fall in line with Themes, so if you want shades of blue and Roboto, you got it in Tables, too.

There’s a whole lot more that you are going to have to see for yourself.

Airtable integration, out in the sun

Our Airtable integration gave UI facelifts to the low-code datasource. It is now out of beta, ready for its moment in the sun.

Connect with a Airtable base in two minutes, and start building your apps without worrying about complex data workflows.

 

Auto-indent here to make a dent

On our latest version? Tried the JavaScript editor yet? No? Do that now and you don’t have to read on anymore. 

Oh, okay. You are still here. Fine. We will show you.

Automatically pretty code is pretty cool, huh? More about it here.

#UpdateThings

“Hide Error Messages, Hide”

Infuriating little things, error messages, that bring up existential questions, right? And when they showed up all the time, they got us to, “Frustrating!”. They don’t anymore, only showing up when a widget is visible and clicked.

“How much to upgrade?”

Got your Appsmithing going, but a paid feature’s in your way? Fret not, self-hoster. We got your back with a command-line feature that estimates your usage in thirty seconds. Click this and all shall be revealed.

Run any Appsmith branch locally

With something like ./scripts/local_testing.sh chore/local-testing, running any branch as a FAT container is a breeze. Make sure Docker’s installed and running, port 80 is open, and you add arguments if you don’t want to run the release branch.

Errors, alerts, and logs

Two new modules, logger.js and mailer.js now store backup errors and alert you to them—helpful to get you on top of the error and aid find-and-fix.

While logger.js is on by default, mailer.js needs appsmithctl backup --error-mail to get humming.

Just two of the many, many ways we got your back(up).

Moving Google Sheets to UQI 

Google Sheets is a popular data source. We didn’t dig up numbers, but you can take out word for it. UQI stands for Unified Query Interface and affords standardization for queries. Made sense to get queries to Sheets working better and looking neater, too.

#AsAlwaysThings

If wishes were fishes, round-ups would be essays. Wishes aren’t fishes. So, head over to v1.7.9 if you closed our Release Notes in-app pop-up one of four different ways—yeah, we are fixing it—and see What Happened In July Appsmith style.

Need a new datasource connected?   ||    Discord    ||    YouTube    ||    Twitter

Track and manage bugs effectively using Appsmith and Airtable
1
August
2022
Tutorial

Track and manage bugs effectively using Appsmith and Airtable

Track and manage bugs effectively using Appsmith and Airtable
Vidushi Gupta
0
 minutes ↗
#
tutorial
#
dashboard
#
announcement
Tutorial

Airtable is a popular choice for developers who want to manage tabular data easily. While it's easy to use Airtable as a backend, it can be challenging to build a custom UI from scratch. This is where Appsmith comes in. With Appsmith's native Airtable integration, you can create dashboards, CRUD apps, and internal tools in minutes.

In this tutorial, we'll use an Airtable base to build an issue tracker. We'll start by creating a database in Airtable and then importing our data into Appsmith and building on top of it using JavaScript. 

With this application, users can:

  • Connect to their Airtable base.
  • Add a new bug/issue
  • Update the existing issue
  • View the current bugs in the management tool.

Let's jump in!

Step 1:  Getting started

Create a new Appsmith App 

First, we need to create a new application in Appsmith so we can build it out.

  • Visit https://www.appsmith.com to create a new account or login in to an existing one.
  • Create a new application in your preferred organization and edit it.

Connect to Airtable

Now, we need to add your Airtable datasource to the app. In this case, we will clone an existing Airtable sample to provide our data. 

  • Create a new datasource by clicking ‘+’ on the Datasources tab from the entity explorer and then select Airtable.

  • Rename the datasource. Select API Key as the Authentication Type and enter your API Key in the input field. Hit Save.

  • Choose a workspace and a base in the dialog box and hit 'Create Table.'
  • Go to https://airtable.com/api and select the base titled 'All bugs and issues'
  • In the 'Introduction' section of the documentation, copy the Base ID (highlighted in green in the picture below)

  • Select the "Bugs and issues Table" on the left pane. Copy the table name highlighted in green in the image below.

Step 2 : Set up UI for the App

Wireframe

Here is the wireframe for what we are trying to create.

Including the modal that is used to add new bugs.

Create your widgets

Using the wireframe as a guide, create the UI for the application using the drag and drop editor. Here is a suggested process.

  • Choose a preferred theme from the Theme properties option in the property pane on the right.
  • Add a container widget with a text widget for your app's header.
  • Three (or as many as you like) stats boxes on the canvas to display essential statistics at a glance.
  • A container with a text, icon button, and list widget for showing a list of all the issues.
  • A container with text, button, select and list widgets for showing details of the selected issues.
  • A modal with a text, icon button, and JSON form widgets for adding a new bug entry.

Step 3 : Binding data on widgets

Listing records on the List widget

The list of bugs/issues should look something like this. In order to populate the data, create a new query and bind the results to the text.

  • Create a new query from the left pane which uses the Airtable datasource you created in the first step. Rename the query to getBase and choose the Commands to be List records. We chose this command because we would like to list all the bugs and issues in our app. Enter the Base ID and Table Name you copied in the steps above. 
  • Hit Run and you should see a JSON response generated which lists the records. 
  • To bind this response to the list widget, we would first create a JSObject that maps the fields from the records. Create a new JSObject and paste in the following snippet.

getAirTableFields: () => {
  return getBase.data.records.map((record) => {
    let row = record.fields;
    row["id"] = record.id;
    return row;
  });
};


  • In this JSObject, we get the response from the GetBase query, map the fields, and get the id for every row in the table. 
  • Bind the list with this data using  {{JSObject1.getAirTableFields()}}
  • For getting the bug name and the source, bind the text widgets within the list with {{currentItem.Name}} and {{currentItem.Bug_source}} respectively.

Getting details of the selected bug

When we click on an item from the list, we should populate the view container with details of the selected issue


  • In order to get details about the selected bug on the container placed on the right, we would just use the {{List.selectedItem.attribute}} for all the details you wish to display. For example, The bug title can be displayed using {{List1.selectedItem.Name}}, for Associated features write {{List1.selectedItem.Associated_features}}, For priority write {{List1.selectedItem.Priority}}. So on and so forth. 
  • For a closed/open bug field, use the ternary format to display the status. {{List1.selectedItem.Closed == '1'? "Closed": "Open"}}
  • To bind the attachments for the selected bug, write {{List1.selectedItem['Attachments']}} to bind data on the list widget in the right container. 
  • Just like binding the bug details, in the image widget enter {{currentItem.url}} in the property pane to display the image attached
  • Use {{currentItem.filename}} and {{currentItem.type}} to display the file name and type on the text widget.

Displaying statistics on the statsboxes

These statsboxes should help display important information at a glance from this database. As the number of issues grows, this will give us a quick understanding of the status.

  • In order to populate the statsboxes with statistics, we would create a JSObject function that maps to fields and then to Priority within the same JSON response and check if the value is High, meaning the priority is set to high. What we get in the response is our desired statistic. 

highPriority: () => {
  const high = getBase.data.records.map((record) => record.fields.Priority);
  return high.filter((currentItem) => currentItem == "High").length;
};

  • Bind this output in the text widget using {{JSObject1.highPriority()}}
  • In the very same manner, write a function and bind the output for the number of bugs labeled open and critical

Adding a new Bug/Issue

When clicking the button to add an issue, a modal appears with a form that creates a new entry. It looks like this:

  • Set the Modal to open on onClick of the icon button on the top right corner of the container on the left. 

  • Populate the JSON Form with source data by pasting the following.

{
"fields": { 
    "Bug Title": "",
    "Priority": "",
    "Assigned To":"",
    "Status": "",
    "Screenshots": [
      {
        "URL": ""
      }
    ],
    "Bug Description": "",
    "Bug Source": "",
    "Features Associated": "",
    "Created by": ""
}
}


You can customize the field configuration as per your requirement. Here’s what the JSON Form looks like https://www.loom.com/share/1087b1e8932846feaf3dd03e8b3bb780

  • To insert a new record, we’ll write a new query. 
    Create a new query and name it as InsertQuery. Choose the command to be Create Records. Add in your Base ID and Table Name. For the Records, bind the form data from the JSON form for every field. 

[
  {
    "fields": {
      "Name": "{{JSONForm1.formData.fields['Bug Title']}}",
      "Priority": "{{JSONForm1.formData.fields['Priority']}}",
      "Status": "{{JSONForm1.formData.fields['Status']}}",
      "Attachments": [
        {
          "url": "{{JSONForm1.formData.fields.Screenshots[0].URL}}"
        }
      ],
      "Assigned_to": "{{JSONForm1.formData.fields['Assigned To']}}",
      "Description": "{{JSONForm1.formData.fields['Bug Description']}}",
      "Bug_source": "{{JSONForm1.formData.fields['Bug Source']}}",
      "Associated_features": "{{JSONForm1.formData.fields['Features Associated']}}",
      "Created_by": "{{JSONForm1.formData.fields['Created by']}}"
    }
  }
]

  • We’ll make a new JSObject function to run multiple queries when the Add Bug button is clicked in the form

addBug: async () => {
  InsertQuery.run();
  getBase.run();
  closeModal("Modal2");
};
  • Now bind this function on onClick of the Add Bug button in the JSON Form.

Update fields of a bug

This query/button can help update the details of the bug. In this case, we update the priority and statuses. 

To update the priority and status of a selected bug, an Update Records query would be used. 

  • Create a new query and rename it as updateQuery. Choose the command to be Update Records and enter your BaseID and Table Name. In the records field, paste the following to get the selectedOptionValue of the select widgets

[
    {
      "id": {{List2.selectedItem.id}},
      "fields": {  
        "Priority": {{Select1.selectedOptionValue}},
        "Status":{{Select2.selectedOptionValue}}
      }
    }
]

  • Now, bind this query to run on onClick of the update button.

Final thoughts

And that’s it! You have your bug tracker application ready using Appsmith’s native Airtable integration 🎉

First, you created a new Appsmith application and connected it to Airtable. Then you created the UI for your app using the drag and drop tools in Appsmith. Finally, you tied the data from Airtable to the UI widgets. Your final app should look similar to this:

Please use this form to contact us if you have any template requests for internal tools that you need, and we will get to work! 

If you have any questions, contact us on Discord. You can also keep up with us on Twitter and YouTube.

Build Custom UI on top of Airtable data
25
July
2022
Announcement

Build Custom UI on top of Airtable data

Build Custom UI on top of Airtable data
Rishabh Kaul
0
 minutes ↗
#
integrations
#
databases
#
announcement
Announcement

Today, our integration with Airtable comes out of beta and is available for everyone 🎉! You can now build custom UIs and interact with applications built on Airtable, with minimal configuration.

While it is possible to use the default API interface to connect to Airtable, we wanted to make it easier for you to directly connect your Airtable account and create applications faster than ever. This new data connector introduces a number of features:

  • Integration located in the “Datasources” section
  • Connect to your Airtable account with either an API Key or a Bearer Token (OAuth 2.0)
  • Create queries to fetch, create, retrieve, update and delete data from a datasource using the Appsmith query editor. 
  • List command lets you display all the data from Airtable, and can also present data that has been filtered and sorted based on fields, records, time zones, etc. 

For details and information on how to use this new integration (with videos!), check out our Airtable documentation here. See it in action on our full tutorial here, where we build an issue tracker with Airtable as backend. As always, let us know what you think!

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