20
April
2021
Tutorial

Building a Daily Standup Application in 30 Minutes

0
 minutes

by Kayode Alade

The daily standup has become a norm in the schedule of most developers around the world. A standup is a daily team meeting, at a specific time for a specific duration, that asks team members to answer three major questions:

  1. What did I work on yesterday?
  2. What am I working on today?
  3. What issues are blocking me?

The daily standup answers these questions but does not resolve them. When put to good use, daily standups increase team productivity and also enhance cohesion between all the parties involved.

Tutorial Overview with Appsmith

In this tutorial, you’ll learn how to build a daily standup application using Appsmith, an open-source framework for building internal tools, admin panels, dashboards, and workflows. You’ll be using Appsmith to forward a summary of daily standups to Slack. Using a web framework like Appsmith is a much quicker way to add this feature to your workspace than building a completely new internal tool.

Screenshot of Stand up App

Appsmith comes out-of-the-box with prebuilt widgets like forms, charts, and maps that you can easily configure to your team’s needs. It also supports APIs and different types of databases. For more details about its capability, visit their official GitHub page.

Setting Up the Application and Data Model

First things first: head over to Appsmith to get a free account. After you sign up, it’s time to set up the user interface of your standup app.

  • Click Create New on the dashboard to create a new app. You will be taken to an empty canvas as shown below where you can start creating your app. The explorer sidebar on the left is used to add widgets, create pages, and connect to APIs and data sources such as Firestore.
An empty canvas in Appsmith
  • To build all the features needed for this app, you’ll need to create two pages in Appsmith. Double-click Page1 to rename it as First Page.
  • On the Pages bar, click the + icon to add a page, then double-click to rename the new page as Second Page.

Now that you’ve created your two pages, it’s time to start adding widgets. Your app’s first page will contain:

  • A personalized welcome message
  • A paragraph showing yesterday's standup
  • A text area where the user can enter what was done the previous day
  • A text area to write out what they plan to do today
  • An option field to show their blockers
  • A table to show users who completed yesterday’s tasks
  • Submit and reset buttons

Let’s create the custom welcome message next:

  • Navigate to the First Page and click the + icon beside Widgets to add a new widget.
  • Drag the text widget and drop it on the canvas.
  • Type in a custom welcome message as shown below.
Custom welcome message

Next, let’s display yesterday’s standup to-do on top so that you can see at a glance what you planned to do yesterday and then make plans based on that for today.

  1. Add two text widgets side by side on your canvas.
  2. Label the first Last Standup todo. The second widget will hold the value, or what was on the last standup to-do list. This will eventually be drawn from the database, but for now, you can pre-populate it with filler text.
  3. Style the widget’s text as you prefer via the Settings gear at the top right of each widget.
Setting up a widget for yesterday’s standup

As mentioned earlier, the goal of a standup is to provide information about the previous day’s tasks, tasks that need to be done today, and anything standing in the way of accomplishing those tasks. Obviously, you’ll need a form to input all that information.

To create a form:

  • Drag the form widget from the sidebar onto the canvas.
  • Label the inputs or dropdowns appropriately (eg, User, Yesterday’s todos, Yesterday completed, and so on). Note that the form widget comes out-of-the-box with Reset and Submit buttons.
Creating a form widget
  • Rename the form by double-clicking on the default name and editing it. Naming this particular form seemed unnecessary, so that the title widget in the form was deleted.
  • To delete a widget, hover over it, then right-click the widget name at the top right corner. In the dropdown menu, you’ll see a Delete option. Click to delete the widget.

To finalize your first page’s UI, let’s add a table to display the users who’ve submitted their standup for the day:

  • Drag the table widget onto the canvas. Note that the Table Data option in this widget already contains an array of objects. Later, you’ll change this to a query response from your database.
Table showing users who have submitted their standup report
  • Navigate to your Second Page, where you’ll add your table.
  • Drag the table widget onto the canvas.
  • Open the table options and add a new column called Actions.
  • Click the Settings gear above the Actions column and set the following properties:
  • Column Type: Button
  • Label: Edit
  • onClick: OpenModal
  • Modal Name: New Modal
Configuring the Edit button
  • In the Actions column you just created, click the button that now reads Edit. A new modal will popup, which you’ll use to edit the table’s data.
  • Change the title text widget to Edit Table.
  • Drag a text widget into the modal and set the following properties:
  • Text value: Username
  • Text align: Left
  • Text style: Label
  • Add a dropdown widget beside the label you just created. In the Settings for that widget, set Selection type to Single Select. This dropdown, which ought to display all users of your app, will read data from your database after connecting the database to Appsmith later in this tutorial.
  • To add a field for blockers, drop in a text widget, name it Blocker, and add a dropdown widget as you’ve done previously.
  • Add one field each for today’s to-do and yesterday’s to-do. These will take a text widget and an input widget each.
  • Finally, add a field to confirm if yesterday’s to-do is complete. Drag over a text widget and a dropdown widget with the values Yes or No.
Configuring the EditModal

Connecting Your Database

Appsmith allows you to link data from several databases. For this tutorial, you’ll make use of Firestore.

  • In Appsmith, click Second Page on the sidebar, then click the + icon beside DB Queries.
  • Select Add a new data source.
  • Select Firestore.
Selecting your datasource
  • Create a Firestore database to get the project ID.
  • From your Firebase console, click the Settings gear on the sidebar.
  • Copy your project ID and paste it into Appsmith. Your database URL is https://_your-project-id_.firebaseio.com.
Connecting Firestore
  • Back in your Firebase console, click the Service accounts tab.
  • Click Create service account. The JSON file containing your service account's credentials will download.
  • Copy the contents of the file and paste it into the Service Account Credentials field.
  • Click Test so that Appsmith can verify everything is correct, then click Save.
  • Back in Firestore, click Start Collection to create a collection, or database table. Set the Collection ID to User and add fields for name and email, both as string type. Sample user values will work for each, eg Chris for the name value and chris@email.com for the email.
Adding collections and values to your Firestore
  • To add a collection named StandUps, add fields for date (in seconds), today's to-dos, yesterday's to-dos, completed, and blocker in Firestore.

Note that since you’re building an internal app, you can create more users and standups in their respective collections.

Creating Standup Queries

Mustache syntax ({{...}}) allows you to write JavaScript in Appsmith to read data from elements defined on a particular page. Let’s take advantage of this to pull information from queries or other widgets. First, let’s create the queries:

  1. Click the + icon on the DB Queries menu. You should see your database as an option.
  2. Click New query on the top right corner of your database option.
  3. Rename it to createStandUp.
  4. In the Method dropdown of the createStandUp window, select Add Document to Collection.
  5. Set the database to the name of your database in Firestore. Fill in the body with the following code:
{
    "yesterday": "{{Input3.value}}",
    "user": "{{Input2.value}}",
    "blocker": "{{Input5.value}}",
    "todos": "{{Input4.value}}",
    "prev_completed": "{{Dropdown2.value}}"
    "date": {{Date.now()}}
}

Note that widgets in Appsmith are global objects, so you can access their values simply by calling widget_name.value.

createStandUp

Continue to round out your app’s queries:

  • For fetchUsers, set the following properties:
  • Method: Get Documents in Collection
  • Document/Collection Path: users
fetchUsers
  • For fetchStandUps, set the following properties:
  • Method: Get Documents in Collection
  • Document/Collection Path: standUps
  • Order By: ["date"]
fetchStandUps
  • For updateStandUps, set the following properties:
  • Method: Update Document
  • Document/Collection Path: standUps/{{Table1.selectedRow._ref.id}}
  • Body: paste in the following JSON
{
    {
    "yesterday": "{{Input3.value}}",
    "user": "{{Dropdown3.value}}",
    "blocker": "{{Dropdown4.value}}",
    "todos": "{{Input4.value}}",
    "prev_completed": "{{Dropdown2.value}}"
}
updateStandUps

Note that queries can only be referenced on the page where they’re defined. If you need the same query on another page, you need to copy and rename it on the other page.

Connecting Widgets to Queries

Now let’s connect these queries to the widgets in your Appsmith app.

  • On the First Page of your Appsmith app, replace the text in the widget next to Last Standup todo with:
{
{{fetchUserStandUps.data[0].todos}}
  • For the User and Blockers dropdowns, replace the options with this:
{
{{fetchUsers.data.map((e,i) => {return {label: e.name, value: e.name}}) }}
  • Fo the Yesterday completed dropdown, replace its options with this:
{
[{"label": "Yes", "value": "true" }, { "label": "No", "value": "false" }]
  • To configure the First Page’s Submit button, select Execute DB query under onClick, then select the createStandUp query.
First Page’s Submit button
  • To configure the Second Page’s Refresh button, select Execute DB query under onClick, then select the fetchStandUps query.
Second Page’s Refresh button
  • To configure the Second Page’s Search button, select Execute DB query under onClick, then select the StandUpsByName query. Set onSucess to store value, key to data, then set value to {{StandUpsByName.data}}.
Second Page’s Search button

Integrating with Slack

To send the summary of your standup to Slack, integrate your Appsmith app with Slack using incoming webhooks.

“Incoming Webhooks are a simple way to post messages from apps into Slack. Creating an Incoming Webhook gives you a unique URL to which you send a JSON payload with the message text and some options. You can use all the usual formatting and layout blocks with Incoming Webhooks to make the messages stand out.” - Slack

Let’s dive in with the integration:

  • Head to Slack to create an account if you don’t have one.
  • Open the Create an App page. The Create a Slack App window appears automatically. If it doesn’t, click *Create New App.
  • Give your app a name and choose the Slack workspace you’re building it for. Click Create App. The Building Apps for Slack page opens.
Creating a Slack app
  • Click Incoming Webhooks to open the feature, and toggle the switch to On to activate it. Scroll to the bottom of the page to copy the webhook URL.
Activating incoming webhooks
  • Back in Appsmith, under First Page, click the + icon beside APIs, then select Create new.
  • Paste the webhook in the first input field and change the request type to POST.
  • Click the Body tab and fill in the message as a JSON object as shown:
{
{
    "text": "New Standup added by {{Dropdown1.value}}, Yesterdays todo: {{Input1.value}}, Completed: {{Dropdown3.value}}, Todays todo: {{Input2.value}}, Blockers: {{Dropdown2.value}}, link: https://app.appsmith.com/applications/6043f3a5faf5de39951a897e/pages/6043f3a5faf5de39951a8980  "
}
Slack post request

Let’s go back to your First Page in your app and configure the Submit button so that it sends a Slack message on submit.

Click the Settings gear for the Submit button. Below onClick, find the onSuccess field and from the Call An API option, select your Slack API.

Submit button edit

Viewing the Completed Daily Standup Application

At this point, your Appsmith app should look like this:

Completed standup app in Appsmith

And as a result, your Slack channel should look like this:

Slack channel

You can check out this tutorial’s completed app on Appsmith.

Summary

In this tutorial, you learned how to build a daily standup app using Appsmith, including widgets that enable users to detail their accomplished tasks, their daily to-do lists, and any blockers keeping them from their goals. You then integrated your app with Slack, so you can send summarized standup reports to a specific Slack channel via incoming webhooks.

Have an idea for another app you’d like to build without reinventing the wheel? Check out Appsmith’s Getting Started documentation, or jump right in by signing up for a free account.


Author Bio: Kayode is a tech enthusiast specializing in embedded systems and system design and modelling. His programming languages of choice include C, C++, JavaScript, and Python. In his free time, he loves adding value to people's lives with technology.

Building a Daily Standup Application in 30 Minutes

by Kayode Alade

The daily standup has become a norm in the schedule of most developers around the world. A standup is a daily team meeting, at a specific time for a specific duration, that asks team members to answer three major questions:

  1. What did I work on yesterday?
  2. What am I working on today?
  3. What issues are blocking me?

The daily standup answers these questions but does not resolve them. When put to good use, daily standups increase team productivity and also enhance cohesion between all the parties involved.

Tutorial Overview with Appsmith

In this tutorial, you’ll learn how to build a daily standup application using Appsmith, an open-source framework for building internal tools, admin panels, dashboards, and workflows. You’ll be using Appsmith to forward a summary of daily standups to Slack. Using a web framework like Appsmith is a much quicker way to add this feature to your workspace than building a completely new internal tool.

Screenshot of Stand up App

Appsmith comes out-of-the-box with prebuilt widgets like forms, charts, and maps that you can easily configure to your team’s needs. It also supports APIs and different types of databases. For more details about its capability, visit their official GitHub page.

Setting Up the Application and Data Model

First things first: head over to Appsmith to get a free account. After you sign up, it’s time to set up the user interface of your standup app.

  • Click Create New on the dashboard to create a new app. You will be taken to an empty canvas as shown below where you can start creating your app. The explorer sidebar on the left is used to add widgets, create pages, and connect to APIs and data sources such as Firestore.
An empty canvas in Appsmith
  • To build all the features needed for this app, you’ll need to create two pages in Appsmith. Double-click Page1 to rename it as First Page.
  • On the Pages bar, click the + icon to add a page, then double-click to rename the new page as Second Page.

Now that you’ve created your two pages, it’s time to start adding widgets. Your app’s first page will contain:

  • A personalized welcome message
  • A paragraph showing yesterday's standup
  • A text area where the user can enter what was done the previous day
  • A text area to write out what they plan to do today
  • An option field to show their blockers
  • A table to show users who completed yesterday’s tasks
  • Submit and reset buttons

Let’s create the custom welcome message next:

  • Navigate to the First Page and click the + icon beside Widgets to add a new widget.
  • Drag the text widget and drop it on the canvas.
  • Type in a custom welcome message as shown below.
Custom welcome message

Next, let’s display yesterday’s standup to-do on top so that you can see at a glance what you planned to do yesterday and then make plans based on that for today.

  1. Add two text widgets side by side on your canvas.
  2. Label the first Last Standup todo. The second widget will hold the value, or what was on the last standup to-do list. This will eventually be drawn from the database, but for now, you can pre-populate it with filler text.
  3. Style the widget’s text as you prefer via the Settings gear at the top right of each widget.
Setting up a widget for yesterday’s standup

As mentioned earlier, the goal of a standup is to provide information about the previous day’s tasks, tasks that need to be done today, and anything standing in the way of accomplishing those tasks. Obviously, you’ll need a form to input all that information.

To create a form:

  • Drag the form widget from the sidebar onto the canvas.
  • Label the inputs or dropdowns appropriately (eg, User, Yesterday’s todos, Yesterday completed, and so on). Note that the form widget comes out-of-the-box with Reset and Submit buttons.
Creating a form widget
  • Rename the form by double-clicking on the default name and editing it. Naming this particular form seemed unnecessary, so that the title widget in the form was deleted.
  • To delete a widget, hover over it, then right-click the widget name at the top right corner. In the dropdown menu, you’ll see a Delete option. Click to delete the widget.

To finalize your first page’s UI, let’s add a table to display the users who’ve submitted their standup for the day:

  • Drag the table widget onto the canvas. Note that the Table Data option in this widget already contains an array of objects. Later, you’ll change this to a query response from your database.
Table showing users who have submitted their standup report
  • Navigate to your Second Page, where you’ll add your table.
  • Drag the table widget onto the canvas.
  • Open the table options and add a new column called Actions.
  • Click the Settings gear above the Actions column and set the following properties:
  • Column Type: Button
  • Label: Edit
  • onClick: OpenModal
  • Modal Name: New Modal
Configuring the Edit button
  • In the Actions column you just created, click the button that now reads Edit. A new modal will popup, which you’ll use to edit the table’s data.
  • Change the title text widget to Edit Table.
  • Drag a text widget into the modal and set the following properties:
  • Text value: Username
  • Text align: Left
  • Text style: Label
  • Add a dropdown widget beside the label you just created. In the Settings for that widget, set Selection type to Single Select. This dropdown, which ought to display all users of your app, will read data from your database after connecting the database to Appsmith later in this tutorial.
  • To add a field for blockers, drop in a text widget, name it Blocker, and add a dropdown widget as you’ve done previously.
  • Add one field each for today’s to-do and yesterday’s to-do. These will take a text widget and an input widget each.
  • Finally, add a field to confirm if yesterday’s to-do is complete. Drag over a text widget and a dropdown widget with the values Yes or No.
Configuring the EditModal

Connecting Your Database

Appsmith allows you to link data from several databases. For this tutorial, you’ll make use of Firestore.

  • In Appsmith, click Second Page on the sidebar, then click the + icon beside DB Queries.
  • Select Add a new data source.
  • Select Firestore.
Selecting your datasource
  • Create a Firestore database to get the project ID.
  • From your Firebase console, click the Settings gear on the sidebar.
  • Copy your project ID and paste it into Appsmith. Your database URL is https://_your-project-id_.firebaseio.com.
Connecting Firestore
  • Back in your Firebase console, click the Service accounts tab.
  • Click Create service account. The JSON file containing your service account's credentials will download.
  • Copy the contents of the file and paste it into the Service Account Credentials field.
  • Click Test so that Appsmith can verify everything is correct, then click Save.
  • Back in Firestore, click Start Collection to create a collection, or database table. Set the Collection ID to User and add fields for name and email, both as string type. Sample user values will work for each, eg Chris for the name value and chris@email.com for the email.
Adding collections and values to your Firestore
  • To add a collection named StandUps, add fields for date (in seconds), today's to-dos, yesterday's to-dos, completed, and blocker in Firestore.

Note that since you’re building an internal app, you can create more users and standups in their respective collections.

Creating Standup Queries

Mustache syntax ({{...}}) allows you to write JavaScript in Appsmith to read data from elements defined on a particular page. Let’s take advantage of this to pull information from queries or other widgets. First, let’s create the queries:

  1. Click the + icon on the DB Queries menu. You should see your database as an option.
  2. Click New query on the top right corner of your database option.
  3. Rename it to createStandUp.
  4. In the Method dropdown of the createStandUp window, select Add Document to Collection.
  5. Set the database to the name of your database in Firestore. Fill in the body with the following code:
{
    "yesterday": "{{Input3.value}}",
    "user": "{{Input2.value}}",
    "blocker": "{{Input5.value}}",
    "todos": "{{Input4.value}}",
    "prev_completed": "{{Dropdown2.value}}"
    "date": {{Date.now()}}
}

Note that widgets in Appsmith are global objects, so you can access their values simply by calling widget_name.value.

createStandUp

Continue to round out your app’s queries:

  • For fetchUsers, set the following properties:
  • Method: Get Documents in Collection
  • Document/Collection Path: users
fetchUsers
  • For fetchStandUps, set the following properties:
  • Method: Get Documents in Collection
  • Document/Collection Path: standUps
  • Order By: ["date"]
fetchStandUps
  • For updateStandUps, set the following properties:
  • Method: Update Document
  • Document/Collection Path: standUps/{{Table1.selectedRow._ref.id}}
  • Body: paste in the following JSON
{
    {
    "yesterday": "{{Input3.value}}",
    "user": "{{Dropdown3.value}}",
    "blocker": "{{Dropdown4.value}}",
    "todos": "{{Input4.value}}",
    "prev_completed": "{{Dropdown2.value}}"
}
updateStandUps

Note that queries can only be referenced on the page where they’re defined. If you need the same query on another page, you need to copy and rename it on the other page.

Connecting Widgets to Queries

Now let’s connect these queries to the widgets in your Appsmith app.

  • On the First Page of your Appsmith app, replace the text in the widget next to Last Standup todo with:
{
{{fetchUserStandUps.data[0].todos}}
  • For the User and Blockers dropdowns, replace the options with this:
{
{{fetchUsers.data.map((e,i) => {return {label: e.name, value: e.name}}) }}
  • Fo the Yesterday completed dropdown, replace its options with this:
{
[{"label": "Yes", "value": "true" }, { "label": "No", "value": "false" }]
  • To configure the First Page’s Submit button, select Execute DB query under onClick, then select the createStandUp query.
First Page’s Submit button
  • To configure the Second Page’s Refresh button, select Execute DB query under onClick, then select the fetchStandUps query.
Second Page’s Refresh button
  • To configure the Second Page’s Search button, select Execute DB query under onClick, then select the StandUpsByName query. Set onSucess to store value, key to data, then set value to {{StandUpsByName.data}}.
Second Page’s Search button

Integrating with Slack

To send the summary of your standup to Slack, integrate your Appsmith app with Slack using incoming webhooks.

“Incoming Webhooks are a simple way to post messages from apps into Slack. Creating an Incoming Webhook gives you a unique URL to which you send a JSON payload with the message text and some options. You can use all the usual formatting and layout blocks with Incoming Webhooks to make the messages stand out.” - Slack

Let’s dive in with the integration:

  • Head to Slack to create an account if you don’t have one.
  • Open the Create an App page. The Create a Slack App window appears automatically. If it doesn’t, click *Create New App.
  • Give your app a name and choose the Slack workspace you’re building it for. Click Create App. The Building Apps for Slack page opens.
Creating a Slack app
  • Click Incoming Webhooks to open the feature, and toggle the switch to On to activate it. Scroll to the bottom of the page to copy the webhook URL.
Activating incoming webhooks
  • Back in Appsmith, under First Page, click the + icon beside APIs, then select Create new.
  • Paste the webhook in the first input field and change the request type to POST.
  • Click the Body tab and fill in the message as a JSON object as shown:
{
{
    "text": "New Standup added by {{Dropdown1.value}}, Yesterdays todo: {{Input1.value}}, Completed: {{Dropdown3.value}}, Todays todo: {{Input2.value}}, Blockers: {{Dropdown2.value}}, link: https://app.appsmith.com/applications/6043f3a5faf5de39951a897e/pages/6043f3a5faf5de39951a8980  "
}
Slack post request

Let’s go back to your First Page in your app and configure the Submit button so that it sends a Slack message on submit.

Click the Settings gear for the Submit button. Below onClick, find the onSuccess field and from the Call An API option, select your Slack API.

Submit button edit

Viewing the Completed Daily Standup Application

At this point, your Appsmith app should look like this:

Completed standup app in Appsmith

And as a result, your Slack channel should look like this:

Slack channel

You can check out this tutorial’s completed app on Appsmith.

Summary

In this tutorial, you learned how to build a daily standup app using Appsmith, including widgets that enable users to detail their accomplished tasks, their daily to-do lists, and any blockers keeping them from their goals. You then integrated your app with Slack, so you can send summarized standup reports to a specific Slack channel via incoming webhooks.

Have an idea for another app you’d like to build without reinventing the wheel? Check out Appsmith’s Getting Started documentation, or jump right in by signing up for a free account.


Author Bio: Kayode is a tech enthusiast specializing in embedded systems and system design and modelling. His programming languages of choice include C, C++, JavaScript, and Python. In his free time, he loves adding value to people's lives with technology.

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