November was Sweet November for us—fun, exciting, and emotional. Apart from three big releases with a ton of new features and improvements, we met over a hundred internal Appsmiths for the first time ever, which is almost our entire team, in Thailand 🏖️—great for a completely distributed company in open source software. Sneak peek at the end of this post.

📺 The iFrame flexes a new-found muscle

One of our most popular feature requests, we now let Appsmith apps embedded in an iFrame talk to the parent app. 🎉

Meaning, you can now,

• Trigger actions in the parent app or site by events in your Appsmith app.
• Embed functionality to trigger actions in SaaS apps by events and actions in Appsmith.
• Soon, trigger actions in the Appsmith app by events in the parent app or site.

➕ The Table lets you add a new row without code

Continuing one of our top initiatives to turn the Table into a full CRUD app builder, we now give you the option to add a new row without JavaScript circus.

• Toggle the feature on and off in the Table’s properties.
• Choose to make all columns editable.
• Use Save and Discard to let end-users save or discard the new row.
• onSave and onSuccess will need to be configured just like with all editable rows.

🎠 Widget improvements are coming fast and tight now

• We’ve added two new events for any Input widget, onFocus and onBlur. These properties will let you trigger dependent functionality, say, a data refresh in other widgets, when you focus or move away from an Input box.
• The Phone Input and Currency Input widgets have JS toggles in Change Country Code, Allow Currency Change, and Decimals Allowed fields in the widgets’ props. 🥂.
• The Code Scanner offers and honors choices to scan automatically or on-demand. You can also mirror your camera with just one click.
• You can now see the total number of tabs in the Tab widget’s props so, without scrolling horizontally, you know if you have too many tabs and if that’s good UX.
• Widgets with a number validation, like the FilePicker that lets you set a min-max for the number of files that can be uploaded or the Progress Bar that controls the number of steps, now honor 0 as a valid min value.
• You can now use , as a decimal separator for browser languages and locales that use a comma like that. We will soon follow this up with an enhancement to detect your locale and language by default.
• In the battle for supremacy, Labels have won and found themselves on top of some widgets. Full list of the losing widgets at #17726.

💪🏾 An improved Quick Page Wizard and datasource connectivity

• You can now use Google Sheets as a datasource to get a CRUD app in one click without hitches.

• Our Elasticsearch integration now has a default port to fall back on if you don’t specify one during set-up.
• You can now delete a datasource without waiting for an earlier datasource to complete deletion.
• Start from a template and Generate a page from data table now show only when you are starting a brand new app, not on every new page of your apps.
• parseSafely is now extended to ensure you don’t see errors with the $set operator and arrays in MongoDB.

🏎️ New top speeds recorded

• Splitting evaluations and linting into their independent worker threads led to some significant improvements in Appsmith’s performance.

• Linting errors update the redux store only if errors change, contributing to better performance.

🛡️ Life’s always a little easier with Appsmith

• You can now see which repos are taking up your three-repo quota for Git-connected apps on the Community edition so you can disconnect them easily and successfully resist an upgrade to the Business edition.

• The clearStore() action nukes the store and removeValue(<variable.name>) removing a specified key-value pair respectively. With this, you can easily reset the storeValue when a nested triggered function is done with and to remove a variable when a step function is done with it.

🏖️ First ever Appsmith company meet

For a completely distributed company in fourteen countries that turned three in July of this year, that we all met for the first time, some of us after having worked with our colleagues for over two years, was crazy exciting. Clear blue skies and seas despite the weather man talking about thunderstorms, boat rides and raft building, and some serious one-on-one and group conversations led to many, many insights, path-forwards, and decisions about just one thing—you. Questions like, “What do our users really care about”, “How do we make their lives easier”, and “How do we ship faster and better” were flying around like Cupid’s arrows wherever there were more than one of us. ❤️

We are now back and heads-down on making Appsmith the best open-source internal app builder for all of you and we have got some exciting new features in the pot already. December’s going to be even crazier than this month and we can’t wait to raise curtains on them.

🪄 Peek into the future

• Auto-sizing widgets: See widgets grow or shrink automatically within a configurable range relative to screen sizes and other widgets in your app.
• Audit logs: Stay on top of activity and big changes with a searchable, filterable trail of the what, the who, and the when.
• Granular access controls: Assign all users' access and rights by roles and groups. Go as granular or as high-level as you want to.
• Support for multiple environments: Create multiple environments on the same app with different datasources and parameters when run during production and when run as staging.

October was almost all about usability at Appsmith. We made some obvious improvements like splitting the Content and Style tabs in widget props, some not-so-obvious but big improvements like mapping datatypes across databases, and shipped useful new features in the Table. Let’s dig in.

The Table is closer to a CRUD app builder

Taking the Table from just a presenter of data to a full CRUD app builder all by itself has been a top initiative at Appsmith. These new features bring it closer to that reality.

• With in-line editing enabled, you can now use the Select widget’s functionality in the Table. This is great for when you want to offer a menu of triggers as your end-users are editing data in rows.

• The Table now auto-detects the datatype in columns and changes Column Type in Column settings from Plain text to whatever is most appropriate for the datatype. For example, we will automatically detect numbers, boolean, string, and date values in a column and change the column type to Number so you can see it right by default. This is super-useful when you want to generate a table from a query response that’s tabular, especially when you are using our one-click CRUD app builder.
• Got images in your Table? Great! You can now cycle through Default, Medium, and Large sizes in Column settings to make your app even more beautiful.

• One of the quirks-that-irk with web tables is loading a large dataset. In Appsmith, you can forget performance issues with such datasets with the Virtual Row Functionality algorithm.
• The endsWith operator in the Table’s filters is now much better at recognizing what a value ends with. Your Ends with filters should now work better across all string column types.

New usability features

• For situations when you want to delay the next-best-action via triggers by the onClick event, you can now use setTimeout() much as you would use setInterval().
• For some databases, you can use forms for quicker and easier query construction. Pro-devs who want to convert RAW code queries to form-based ones for the rest of your team can now do that easily.

On-screen usability isn’t far behind

• We’ve made it easier to find and configure data and style properties for widgets by splitting props into two intuitive tabs—Content and Style. Designers on your team don’t need to hunt for styling props.

• You can now fork templates into new and existing apps, which is awesome. Awesomer is that you can also choose a page from a template to fork and all forking works with Git connected apps, too. Build your app faster with templates and as always, let us know which templates would make your life easier.
• Resizing the container for some widgets messed around with the layout of widgets outside the container. We have now improved that exercise a whole lot.

• You can now write JavaScript promises without return statements. That’s one less line of code per JS Object.
• In reskinning our widgets to make them look more consistent and usable, we now have a total 14 widgets that look better.‍
• Map Charts have now been upgraded with new legends, captions, and font styles.

• The Rich Text Editor, JSONForms, Video, Audio, and Forms widgets now look like they belong with the other reskinned widgets.

Easier self-hosting

• Appsmith now ships with Mongo and Redis built-in so you don’t have to spin up instances individually when installing Appsmith via Kubernetes.
• Your choice of a reverse proxy now works with Appsmith without a hitch despite there being a NPM proxy that Appsmith ships with by default. This is great if you want your reverse proxy configs to work with Appsmith without having to change anything.

Some more security

• The iFrame widget, useful to embed other apps or sites in your Appsmith apps, now runs in a sandbox for all new instances. All instances, new and existing, can toggle the environment variable APPSMITH_DISABLE_IFRAME_WIDGET_SANDBOX =TRUE or =FALSE to disable or enable it, respectively, but we recommend you keep it =FALSE.
• We have fixed a bug that inadvertently let you edit some other workspace on the same instance than the one you intended to. This didn’t affect anyone neither will it going forward.
• We also fixed known Apache vulnerabilities and made Appsmith a little more secure.

More details and a bunch more features, improvements, and fixes at our GitHub.👇

Take me there

Peek into the future

Before we publish a public roadmap, here’s a sneak peek into what you can expect from us.

• Widget dynamic height: See widgets grow or shrink automatically within a configurable range relative to screen sizes and other widgets in your app.
• Context persistence: Have Appsmith remember exactly where you were on the canvas, queries, and JS Objects before you switch to a different screen and automatically take you there when you want to.
• Granular access controls for teams: Assign access and rights by roles and groups for all your users. Go as granular or as high-level asa you want to.
• Audit logs: Stay on top of activity and big changes with a searchable, filterable trail of the what, the who, and the when.

GitHub Insights provides totals on issues and pull requests including links to  individual issues and PRs. You can filter by the last day, three days, a week or a month. It’s like a dashboard overview of your GitHub repository.

While this is useful, it lacks a few key features.

• It can’t have customized views for insights unique to you and your team.

• It doesn’t drill-down into sub-categories of like issues by type or most popular issues by the number of comments.

To get around, this two-part post will show how to build a custom dashboard for your team and repos using GitHub’s GraphQL endpoints and native-GraphQL support in Appsmith.‍

Sign up to build your own GitHub insights dashboard

What this part covers

In two words, GraphQL and JavaScript. You will see how to:

‍

• Enable GitHub’s GraphQL API for your repo and create an access token

• Build queries with the GitHub GraphQL explorer

• Use GraphQL query variables

• Use the authenticated GraphQL API in Appsmith

• Present the response data on a dashboard

‍

• Use the Array map() method in JavaScript

• Use Object.keys() to get an array of the field names

• Use the Reduce method to make a pivot table

• Use the ternary operator to conditionally flatten nested data

‍

Enabling the GitHub API

From your GitHub apps settings,

1. Select Personal Access Token, and then Generate a new token.

2. Add a note, set an expiration date, and select the scopes you want to enable. For our dashboard, we’ve left all the write scopes unchecked because the dashboard is read-only.

3. Click Generate Token and then copy and save the token somewhere safe. You won’t be able to access it again from GitHub.

Building queries with the GitHub GraphQL explorer

1. Start by logging into the Explorer to access the GraphQL API. You should see a default query already entered. Run it to make sure the Explorer can access your GitHub account.

{
  "data": {
    "viewer": {
      "login": "YOUR_GITHUB_LOGIN"
    }
  }
}

You should get back a response with your GitHub username.

• Click the Explorer button next to show the left sidebar, then build a new query to get a few top level stats about your repo. Just go through the >repository node and select any fields you want to include in the dashboard.

3. Type in the name of the repository and the owner name, then run the query.

{
  viewer {
    login
  }
  repository(name : "appsmith", owner : "appsmithorg") {
    id
    description
    homepageUrl
    stargazerCount
    issues {
      totalCount
    }
  }
}

4. You now have the totalCount of issues but not the breakdown by Open and Closed. While these would be two different queries in the REST API world, GraphQL lets you use aliases in one query to get subsets of the overall data.

GraphQL query variables

5. Instead of hard coding the repo name and owner, you can use query variables from the QUERY VARIABLES pane as an object.

{
  "owner": "appsmithorg",
  "repo": "appsmith"
}

1. You would then add the variables to the original query.

query MyQuery($repo:String!,$owner:String!) {
  repository(name: $repo, owner: $owner) {
    issuesOpen:issues(states: OPEN) {
      totalCount
    }
    issuesClosed:issues(states: CLOSED) {
      totalCount
    }
  }
}

2. Go through the rest of the >repository node of the Explorer and add any other fields you’d like for your dashboard, using aliases where needed to get subtotals. The final result should look something like ↓.

query getOVerview($owner:String!, $repo:String!) {
	repository(name: $repo, owner: $owner) {
		id
		name
		owner {
			id
			login
		}
		description
		homepageUrl
		stargazerCount
		collaborators {
			totalCount
		}
		watchers {
			totalCount
		}
		forkCount
		diskUsage
		issues_open: issues(states: OPEN) {
			totalCount
		}
		issues_closed: issues(states: CLOSED) {
			totalCount
		}
		PRs_open: pullRequests(states: OPEN) {
			totalCount
		}
		PRs_merged: pullRequests(states: MERGED) {
			totalCount
		}
	}
}

3. While you’re here, create one more query to get a list of repos for your GitHub Organization. This will be useful in offering a picklist of repo names to choose from later.

query {
  organization(login: "appsmithorg") {
    repositories(first: 100) {
      edges {
        node {
          name
        }
      }
    } 
  }
}

Connecting the GraphQL API in Appsmith

Now that you have your GraphQL API token and the queries for your dashboard, let’s set up an authenticated GraphQL API in Appsmith.

1. Start a new app, then add a new datasource from the Explorer in the left nav.

• Choose Authenticated GraphQL API and enter the following values in the fields shown

URL: https://api.github.com/graphql

Authentication Type: Bearer Token

Bearer: {{value from GitHub}}

• The Bearer Token value is they access token you generated on Github.

3. Name and save the datasource.

4. Add a new API to this datasource.

5. Copy the query from GitHub’s GraphQL Explorer into the Body of the API.

6. Copy the query variables from GitHub to the Query Variables pane.

7. Run the API.

8. Add one more API for the repo list, and copy over the query and variables from GitHub.

Presenting data in widgets

First add an Input Widget for the owner name.

💡 Smith’s tip

Give it a descriptive name you can reference uniquely later.

I prefer using a short prefix for the widget type, e.g., in (for input), followed by an underscore, and then a descriptive term for the data it presents, e.g., in_owner. When I dynamically need the text value in the widget, I can reference it with {{in_owner.text}} in queries, JS toggles on widget props, or JS Objects in Appsmith.

Next, add a Select Widget for the repository name. With this widget, the user’s input can be referenced as {{in_repo.selecteOptionValue}}.

2. The Select Widget requires an array of key-value pairs denoted label and value to supply the picklist’s options. If you look closer at the API response, you see a list of repo names but the data isn’t structured for this widget yet.

Enter JavaScript

2. First, let’s map over the edges and return an array of the nodes.

2. Then map over the nodes array to return the {label, value} array expected by the Select Widget.

nodesToArray: ()=> {
		return getRepos.data.data.organization.repositories.edges.map(e=>e.node)
			.map(n=>({label:n.name,value:n.name}))
}

• This lets you bind the data to the Select widget so when the end-user selects a repo name from the picklist, the query to the API can automatically be triggered.

2. In the Select widget’s properties, set the onOptionChange event to trigger the query run the the getOverview API automatically for each option selected.

3. Edit the getOverview API query variables to reference the new widgets. You can also add a fallback value in case the input is blank.

{
  "owner": {{in_owner.text || 'appsmithorg'}},
  "repo": {{in_repo.selectedOptionValue || 'appsmith'}}
}

The ||, the symbol for the logical OR operator, is to declare a default if the repo name is blank.

1. Next up? Choosing the right widget for the data returned by the API. This part needs some understanding of the data and its structure. Here’s what the query response looks like.

//getOverview.data:
{
  "data": {
    "repository": {
      "id": "MDEwOlJlcG9zaXRvcnkyNzU5OTM4ODU=",
      "name": "appsmith",
      "owner": {
        "id": "MDEyOk9yZ2FuaXphdGlvbjY3NjIwMjE4",
        "login": "appsmithorg"
      },
      "description": "Low code project to build admin panels, internal tools, and dashboards. Integrates with 15+ databases and any API.",
      "homepageUrl": "https://www.appsmith.com",
      "stargazerCount": 21504,
      "collaborators": {
        "totalCount": 113
      },
      "watchers": {
        "totalCount": 232
      },
      "forkCount": 1849,
      "diskUsage": 286069,
      "issues_open": {
        "totalCount": 2579
      },
      "issues_closed": {
        "totalCount": 7458
      },
      "PRs_open": {
        "totalCount": 87
      },
      "PRs_merged": {
        "totalCount": 5893
      }
    }
  }
}

One way could be having a widget for each data point but that could very easily get out of hand if you have hundreds of fields. We will keep the Appsmith spirit of easy and fast and choose something more thoughtful.

1. Let’s try the Table

1. How about a JSONForm?

‍

We need a pivot-table of the data, but the current JSON structure isn’t quite right for that. So, we'll transform the data on the fly.

More JavaScript

4. Your dashboard building trip so far has been without code. To build the UI right for the data, though, you will need to enter coding territory and introduce this data to our good friend, JavaScript.

1. Object.keys()

4. Instead of one horizontal row, what if we could have one column for the field names and one for the values? The new data format should look something like ↓.

[
  {
    "field_name": "id",
    "value": "MDEwOlJlcG9zaXRvcnkyNzU5OTM4ODU="
  },  
  {
    "field_name": "Name",
    "value": "appsmith"
  },
...
]

1. Start with a function that returns a list of the fields, or properties, of the repository object.

objToRows: (obj=getOverview.data.data.repository) => {
		return Object.keys(obj)
	},

🧠 Use Object.keys(object) to return an array of property names from an object.

2. Reduce

Next, you will need to iterate over these properties and return a new row object for our pivot table. The end result should be an array of objects with two properties, one for the field name and one for the value.

Sounds like a job for the reduce method.

Start with an empty array and add a new object for each property in the Object.keys() array.

objToRows: (obj=getOverview.data.data.repository) => {
		return Object.keys(obj).reduce((acc, value) => acc.concat({ 'prop': value, 'value': obj[value]}), [])
	}

1. Next up? Choosing the right widget for the data returned by the API. This part needs some understanding of the data and its structure. Here’s what the query response looks like.

‍

Presenting this new and transformed data on the Table should look like ↓.

4. Your header row is a column now—magic!—, so it should look better to format the first column differently.

☝🏾 Disabling search, filters, download, and pagination options will help clean up the UI further. You don’t need those options for your dashboard anyway.

‍

3. Ternary operators

Those nested totalCount fields are kinda ugly. It would be much better if each value in the value column showed only the count. Before you get to doing it dynamically, let’s walk through the logic in plain English first.

‍

If the value in the value column is an object and it has only one property,  show only the value for that property.

Use typeof to see if the value is an object, then use Object.keys().length to see if there is only one property.

Code logic

if ( typeof value == 'object' && Object.keys(value).length==1 ) ...do something

‍

If the value in the value column is an object and it has nested properties, you want to show only the value of the nested properties, else you want to return whatever value was already there.

Use a ternary operator for this logic.

Code logic

flattenValues: (rows=utils.objToRows()) => {
		rows.forEach(r=>r.value = typeof r.value == 'object' && Object.keys(r.value).length==1 ? r.value[Object.keys(r.value)[0]] : r.value  );
		return rows
	}

GraphQL’s claim to fame is a lot fewer API calls than REST. As you have seen so far, the dashboard for the repo of interest is a single API call. You can continue tweaking the request body to match the exact data you need for the UI to get all of it in a single API response.

For finishing touches, move the in_repo and in_owner widgets into a new container for the header and add a second container for the Table.

Finally, add a border color and a width of 1.5 to make it look nice.

‍

So, you now have an access token from GitHub, a ready GraphQL endpoint plugged into Appsmith, JavaScript-transformed data, and a pretty decent UI for it. ! And we're not even 15 minutes in! 

In part two, you will build the Issues Dashboard with a breakdown of issues by type over a time period of your choice, get issues with the most comments, and more.

Stay tuned.

It is the final week of Hacktoberfest, and we have had a good time so far. But - the fun is not over yet! We still have a final week of fun and coding left, and plenty of prizes to award.

Theme 4

Lots of people who use Appsmith find joy in creating beautiful dashboards and tools to track data. So, the theme for week 4 is Dashboard Layouts. These can actually be some of the most fun and interesting designs simply because we have the very powerful Fusion Charts library available in our platform. In addition to some of the common charts, there is support for custom charts where you can really go wild. There are plenty of examples in our Template library, but this is your chance to impress us with your skills.

Remember, we are awarding some prizes for UI-only submissions. That means you can let your inspiration free to stretch the limits of what can be done, and show the world some amazing dashboard designs. Don't let that stop you from building actual, working apps. If you have some good data to bind to the charts, thats even better.

Swag Store Updates

There have been some questions about when the store will be open for buying cool, Appsmith stuff. The answer is after Hacktoberfest. We need to finish the event and award all prizes and awards before everyone starts spening their coins. It is great that folks are eager to get cool stuff, but stay patient.

Also, we've added two new items to the store: donations to charity! Each donation costs 1 coin and will give $5 USD to one of two worthy causes:

• IRC for Ukraine - The International Rescue Committee delivers essential aid to Ukrainian refugees fleeing conflict.
• Girls who Code - Girls Who Code is on a mission to close the gender gap in technology and to change the image of what a programmer looks like and does.

We wanted to not only provide ways to give back to the wider community, but also provide a way to use left over coins. Of course, you can also use ALL of your coins to donate to charity, and we would love to see this.

Giving Back Can Be Easy

If you missed it last week, we did a livestream on a "legal cheat code" for getting an easy submission for the contest. We want high quality and useful stuff, but we also want to make it easy to use or reuse existing code you may have hanging around. We are also on Discord in the #hacktoberfest channel if you have questions of need any assistance. Time is running out, but there is still enough time to get a few good submissions in. One of the great things about Appsmith is how easy it makes it to create awesome UIs, so get those ideas on the platform and submitted!

Write quick, clean, powerful code to build functional and beautiful internal apps

Appsmith falls squarely on the side of low-code in the low-code-no-code fence. We offer you the flexibility to write code when you want to. In keeping with the spirit of low-code, we also make it easier than the heavy-code writing experience without trading off the God Mode-powers you are used to.This post maps the different ways and places you can write code on Appsmith to scenarios where they are most useful. You will learn how you can use JavaScript

• to present data in and play with data from widgets

• transform data for your and your end-users’ needs

• conditionally execute code to achieve unique end-user experiences

For our example, we will see how to build a dashboard for historical analytics of the Olympics, connecting to data on a PostgreSQL database.

Present data right

While our widgets can present data with assisted query bindings, Javascript makes it easier to bind transformed data per a widget's expected datatype.

Let the bindings begin

Assuming you have connected your database to Appsmith and have run a successful query like we have, you can now present the query’s response using JavaScript with any widget, passing the .data operator to the query.

Snippet used

{{fetch_athelets.data}}

Methods to the madness

As you build your app, you will often need to show data differently from how it appears in the query response an consequently, the widget. JavaScript methods, natively supported in Appsmith, help make this a breeze.

• map.(), used directly in the binding on a widget’s data property, helps show only those row values that match data attributes as defined in the map.() method.

‍Snippet used

{{
fetch_athelets.data.map((item) => {
      return {
				id: item.id,
        name: item.name,
        team: item.team,
        sex: item.sex,
        season: item.season,
				sport:item.sport
      };
    });
}}

• Like map.(), you can use the .filter() method in a widget’s query bindings to refine the data presented.

‍Snippet used

{{
fetch_athelets.data.map((item) => {
      return {
				id: item.id,
        name: item.name,
        team: item.team,
        sex: item.sex,
        season: item.season,
				sport:item.sport
      };
    }).filter((item) => {
        return item.season == "Summer";
      });;
}}

🥳 Auto-complete contextually assists in picking supported methods, eliminating guess-work and repetitive code writes.

Objectifying data

The Table, as we have seen so far, expects data in the Array<Object> format. The Select widget, though, expects data in the Array<{ "label": "string", "value": "string" }> format. This format or datatype is called an object.

‍Snippet used

{{

fetch_seasons.data.map(i => ({
	label: i.season,
	value: i.season
}))

}}

Functions on the run

The Select also expects unique values and throws a fit when you have duplicate values in your records. To show unique picklist options, use IIFEs and remove duplicates in the data binding.

🏃 An Immediately Invoked Function Expression (IIFE) is a JavaScript function that runs as soon as it is defined.

Snippet used

function make_unique() {
  let data = fetch_seasons.data.map((i) => ({
    label: i.game_season,
    value: i.game_season,
  }));

  const key = "label";
  const arrayUniqueByKey = [
    ...new Map(data.map((item) => [item[key], item])).values(),
  ];
  return arrayUniqueByKey;
}()

Make your queries smarter

Pro devs will recognize we have taken simpler, non-smart routes to present data thus far. In reality, there are browser performance considerations and limitations to using methods or writing just about any code on the full query response.Using Appsmith to optimize queries and thus, your app’s performance, is easy.

Dynamism

A smarter way to present filtered data is to bake in dynamic triggers per action taken on widgets in the query itself irrespective of the query language. Because, JavaScript. 🤯 You can do that using {{ }} in Appsmith.

‍Snippet used

SELECT name, sex, age, team, year, season, city, sport, event, medal
FROM public."athelete"
WHERE
	season = {{filter_season.selectedOptionValue}}
ORDER BY year LIMIT 100;

‍

Refreshed and informed

Now that you have the filtered data from your smarter query, you will need to provision for data refreshes triggered by widgets. For example, if your users select an option from the Select widget, whichever widget presents the data—in this case, the Table—needs to now present the filtered view.

This is super-easy with Appsmith, thanks to JavaScript in widget props.

• Properties like onChange and onClick can take JavaScript to refresh the data in a widget specific to an end-user action.

‍

• Additionally, you can also show alerts on your app’s UI to inform your end-users of successful query execution.

‍Snippet used

Transformed

For scenarios where you need to show data from different rows or even entirely different tables on your database, the Appsmith Query Editor assists with JavaScript methods.

• Add multiple dynamic conditions from widgets and transform your query response with JavaScript methods.

‍Snippet used

SELECT name, sex, age, team, year, season, city, sport, event, medal
FROM public."athelete"
WHERE
	season = {{filter_season.selectedOptionValue}} and
	year IN {{ filter_year.selectedOptionValues.join(',') }} and
	sport = {{filter_sport.selectedOptionValue}}
ORDER BY year LIMIT 100; 

‍

• Auto-complete helps you select supported functions within {{ }} so you don’t feel the need peek at StackOverflow.

Make your code performant

Appsmith comes with a few JavaScript libraries out of the box to help you offer desired features and performance to your end-users without code circus. Use them inside {{ }}, or JS Objects, just like any other binding or transformation.

Lodash for the win

Lodash helps you write performant JavaScript with less code. Use _. to invoke Lodash methods anywhere you write JavaScript in Appsmith.

• Remove duplicate values using the _.uniqWith, and _.isEqual from Lodash inside your bindings.

‍Snippet used

{{
    _.uniqWith(fetch_events.data.map((i) => i.sport))
      .map(
        (i) => ({
          label: i,
          value: i,
        }),
        _.isEqual
      )
}}

‍

• Use _union(), to add more items to your array.

‍Snippet used

• Sort your data with _orderBy.

‍Snippet used

{{
    _.orderBy(
      _.union(
        _.uniqWith(fetch_events.data.map((i) => i.sport)).map(
          (i) => ({
            label: i,
            value: i,
          }),
          _.isEqual
        ),
        [{ value: "All", label: "All" }]
      ),
      ["label"],
      ["desc"]
    );
}}

Moment to moment

When working with dates and times, moment comes handy. For example, you can use moment.js to show the countdown between two dates.

Here’s a Moment.js cheatsheet to keep handy.

‍Snippet used

Today, Appsmith supports six external libraries. Learn more.

Extend code functionality

For conditional navigation to another page in your app, opening and closing interactive elements like modals, showing alerts, and storing the value of a variable for dependent use later, Appsmith offers Actions in JS Objects.

➡️ Ten action methods with the Appsmith framework will make it easy for you to write better code within your application. Read about Actions on docs here.

• Store any value within your application's local session store using the storeValue function.

‍Snippet used

{{
    storeValue("selected_year", filter_year.selectedOptionValue).then(() => {
      showAlert("Saved selected to local store");
    });
}}

• Switch between pages using the navigateTo action referencing a JS Object…

‍Snippet used

• …or just between tabs.

‍Snippet used

Writing clean code

JavaScript toggles in widget props and in queries are great, but sometimes, you need to reference longer JavaScript code when building your app. JS Objects on Appsmith offer you a modern JavaScript Editor experience for writing your JavaScript functions more cleanly and efficiently.

Declare reusable functions and variables

To avoid referencing variables over and over in your queries, you can just write a JS Object with functions and variables and reference the Object in your queries.

• For queries that need to run in sequence, a JS Object helps write cleaner dependencies and asynchronous functions.

‍Snippet used

‍

• Use async and await inside JS Objects to enable promise-based asynchronous workflows.

‍Snippet used

Chart it out

Assuming you are already familiar with Appsmith Charts and how to bind data to them, you can use JS Objects to configure your chart axes, labels, and data fields, then reference it directly within the chart widget’s props with something like {{chart_manager.events_by_sports()}}.

‍Snippet used

events_by_sports: () => {
		// bring data from query
		const data = chart_event.data;
		const dataSource = {
			
			// fusion chart configuration for customizing charts
			chart: {
				xaxisname: "Sport",
				yaxisname: "Number of events",
				palettecolors: "#818cf8",
				theme: "fusion"
			},

			// query transformations with .map()
			data: data.map(e => ({
				label: e.sport,
				value: e.event
			}))
		};
		return (
			{
				// chart type and configuration
				type: "column2d",
				dataFormat: "json",
				dataSource
			}
		);
	},

‍

Final touches

To add a pinch of personality to your app, you can use JavaScript in Text or other widgets’ props to show data from public APIs, another database, or even SaaS tools like Slack and Notion.

We’ve been so busy creating amazing things that we decided to update on weeks 2 and 3 at the same time. Don’t worry, you haven’t missed anything and we still have plenty of time for you to show off your great work.

Livestream

‍

Last week, we had a great livestream with Joseph, Vihar, and Ron to walk through the Hacktoberfest app and answer your questions about the event. The video is included in the app, but if you haven’t seen it, check it out now! It should answer any questions you may have about the app, how to contribute, and how to win prizes.

Themes 2 and 3

The theme for week one was “Startup Apps”. Remember that you can submit your contributions at any time and for any theme. These themes are just for us to group the contributions and give you more chances to win cool prizes.

For week two, the theme is UI Kits and Designs. While Appsmith is made by developers and for developers, we have made it super simple to build really great UIs without needing to write code. So, we are always looking for amazing and creative designs that push the boundaries of what our platform can do. So - go have fun! Drag, drop, design, and don’t worry about code.

For week three, the theme is App clones. Much of the functionality that you enjoy in your favorite applications can be replicated to a certain degree with our platform. We’ve seen people replicate desktop apps like notepad, and replicate online apps like e-commerce stores. We’ve even seen people replicate a basic music player that takes inspiration from one of the most popular streaming services!

So, let your creativity flow. Show us your functional apps, your amazing designs, and your fun clones.

Mini quests 2 and 3

There was a delay in getting the week two mini-quest activated in time, so we actually left the week one quest open for longer! To give everyone an equal chance, we actually have BOTH the week 2 and week 3 quests open. They are very simple and easy to accomplish. Some have suggested they are too easy… but at Appsmith, our goal is to make your life simpler and your work faster.

Legal cheat code?

In the spirit of making things easy, we wanted to share a “legal cheat code” that will make it even easier for you to take part and contribute back to the community - adding existing apps!

Anyone who has been using Appsmith for a while has at least a few apps hanging around that they would love to show off. There is nothing in the rule book to stop you from taking your awesome, existing work and contributing… and we encrypted the rule book so the judges can’t change it!

All you need to do is duplicate the app, make any tweaks or changes to remove internal data or references, make it public, and then submit it! It's ridiculously easy to extend, remix, and reuse apps on our platform.

In fact, we will have another livestream video on Thursday that will show you exactly how to do this quickly and easily. In many cases, it will only take a few minutes. So, check out our livestream on our Youtube channel on Thursday and follow along at home.

It is so easy that you can probably get one or two submissions done before we even finish our stream. If you can, let us know on our Discord channel.

Giving back more

As you have seen, we love to joke about how our event is “too easy” and remind you that Appsmith is a great tool that works for everyone, but that is because our platform is powerful and user friendly. In other words, this contest is “easy” because Appsmith makes building internal apps easy.

However, let's remember that the purpose of Hacktoberfest is to contribute to open source projects and help everyone. Whether you contribute code or templates, all of these submissions will be shared with the community. That not only lets you pay it forward to the next person but encourages even more resources to be available for you.

This virtuous cycle is one of the reasons why open source projects continue to grow and drive innovation across the world.

‍

The Table is one of our top widgets by usage. Even with 25% of our users sending us telemetry data today, it has been used more than 820,000 times since we launched it. 🤯

Built on React Table

There are several libraries for building React tables, including our favorite and the massively popular, the React Table. We like it so much we sponsor it and can’t thank Tanner enough for building it.

We built our Table on top of it to help build internal apps lightning fast with ready features to support most popular use cases—an admin panel, dashboards, monitoring apps, and more—with out-of-the-box support for styling, theming, and in-line editing.

Let’s get into it

This post tears the upgraded Table widget down to all its component features and how you can use them. While our example today is an admin panel for a MakerPad-clone on Postgres, you will see how to build an admin panel for any datasource or other apps like dashboards, portals, and even CMSes.

💡 Toolspace, our MakerPad-clone, is a discovery app for open-source projects built on Postgres and Django. The Appsmith admin panel runs CRUD operations to the Postgres database for categories, alternative projects, data, and users.

Present tabular data

The Appsmith Table is familiar with a few powerful differences right out of the gate to help you leapfrog over typical web table set-ups.

One binding to bring it all

Assuming you have already connected your datasource and set up get queries to fetch data, it takes one small change—a binding—your freshly dropped Table to present the data.

‍

Easy views for your data

You can write JavaScript almost everywhere in Appsmith. This comes handy when you want to create a view of your data for your app. Extend your Table Data binding with something like ↓

{{
getAllProjects.data.map((item)=>{
			return {
				"id": item.id,
				"name":item.name,
				"slug":item.slug,
				"logo":item.image_url,
				"github_url": item.github
			}
		})
}}

and voila! Your Table now shows the view you want. Use the Table Data property to manipulate your views any time.

☝ For easier code editing, we recommend you write longer code in a JS Object and reference it in the Table Data property.

Data to Table to data

Data exists as text, images, videos, URLs, and others on your database. Easily map datatypes from your database from the Column Type property under each column’s settings. This mapping is also used to update your database, as you will see later in this post.

‍

For binary state values in columns—true or false, really— the Checkbox or Switch column types make it easy and visual for your end-users.

👌🏽 The Table supports over ten column types, including interactive components like buttons and icons. We talk about them below.

All in the names

Your database may have column headers that aren’t the best for your users, e.g., github_url. Edit those headers right on the Table as you would a filename. Double-click, type in your preferred header, e.g., GitHub URL, for each column, and done.

‍

What’s the value

Sometimes, your data isn’t in a single-entry-per-cell format. In our example, the alternative_products column has several related items per tool, so the column shows up as [], indicating an array.

Computed Value under column settings for each column translates the value in one swift binding to show that number.

{{currentRow["alternative_products"].length}}

👉 Computed Value supports JavaScript methods and functions—all of them.

Peek-a-boo columns

Often, you find columns you need to build and run your app—e.g., slug, that end-users don’t need to see. One-click on the eye per column on the Property pane, and you are done making them invisible to your users.

👉 Scroll horizontally to find hidden columns after the last visible column when you are building your app. Your end-users don’t see them when you deploy the app, though.

Order, order

Rearranging columns to present information hierarchically to your end-users is just a simple drag-and-let-go thing under Columns on the Property pane.

‍

Prettify it

The Table recently got themed, so you can now choose a default or a custom theme for your admin panel and see the Table get a personality in one click.

‍

Unlock higher degrees of personalization for pixel perfect matches to your brand guidelines.

• Color cells by column values with conditional styling using single or nested conditions in JS toggles available under the Style tab inside column properties.

{{
function() {
  if (currentRow.alternative_products.length == 0) {
    return "#E87171";
  }
  if (currentRow.alternative_products.length == 1) {
    return "#84cc16";
  }
  if (currentRow.alternative_products.length > 1) {
    return "#3b82f6";
  }
}()
}}

‍

• Control row height—short, default, tall—, text size—small, medium, large, extra-large—, and text alignment—left, right, center, top,  bottom—by the number of items you want to show. No-code needed.

• Customize borders and shadows for the entire table for consistency with your brand styles.

‍

Get your rows in a page

Showing all your rows in one endless scroll isn’t the best end-user experience and loading it is a chore for your browser.

Magically paginate your apps with two out-of-the-box methods in Appsmith.

• The pageNo and pageSize properties simplify pagination out of the box for queries and APIs.

‍

• We just add a Tablename.pageNo param to the API. That’s it.
• The response-URL method relies on server-side pagination and is simpler for endpoints that have paginated URLs.

Make your data accessible

Presenting the data isn’t enough, especially when you have more rows than the lines of code you have written so far in Appsmith.

The Table makes accessibility easy and delightful.

Wrap it up

Toggling the Cell Wrapping settling on under Column settings lets your end-users see long text and evaluated values of dynamic bindings without scrolling or double-click gimmicks.

Search for it

Tables in Appsmith come with pre-built Search for all your data, paginated or otherwise. Search runs automatically each time you enter or change a keyword in the Search box.

Easily configure it one of two ways.

• Write a search query with keywords like  ilike or find depending on your database.

SELECT * FROM users WHERE name ilike '%{{Table1.searchText}}%'

• Use query params dynamically with your API like ↓.

https://api.toolspace.dev/api/all-xyz/?search={{Table1.searchText}}}

‍

Sort and filter

While sorting your data takes just clicking column names or headers, filters offer a little more power to you.

• Select a column, add a filter condition, and done—just like a spreadsheet.

• Add AND,  OR conditions for advanced filtering—just like you would in an analytics tool.

Get a good view

Build unique views for better data presentation with table properties and triggers.

Spreadsheet view -- Use tabs to display multiple tables or filtered views of your data.

Details view -- Show detailed views of your data on off-table components like Modal, Input, and Text widgets.

• onClick-trigger them with Buttons, Icons, or Menus in a column.

• Menu buttons are especially useful to nest both view and delete triggers in one component—good for when you want to let familiar end-users delete data easily.

• Nifty Appsmith-native properties like selectedRow, triggeredRow, and selectedRowIndex make it super easy for you to dynamically open details views and, as we’ll see later, even edit them when you swap out the Text widget for an Input widget.

• Run update queries using buttons to perform edit operations.

Did we mention already you can set intervals for auto-data refresh? No? Well, ↓ is all it takes.

{{

// runs for every five seconds

setInterval(() => { 
	 getAllProjects.run()
}, 5000)
}}

Two-click data export

Exporting your table data is, like most things so far, an affair of clicks for two of the most popular types—CSV or Excel

Add-edit-delete your data

So far, we have built a pretty functional, pretty pretty data viewer. This last set of features turns a viewer into a full-blown admin panel.

• Add to your data from views‍

Use a Modal + an Input widgets, triggered from a column type or a Button outside of the table to open a set of blank input fields that save data entered with an onClick trigger.

• Edit from views

Remember the unique views you built for your data? Extend those views to make them editable with Input + Button widgets instead of the Text widget. All changes to your fields get updated with the Button’s onClick trigger binded to an update query.

• Delete from the Menu

‍We configured a delete trigger in our Menus before. Let’s put that to good use.

And, drumroll, please, you have a full-blown admin panel in under half-an-hour! 🥳

But wait, what if…

‍

Inline editing without inline code

…your awesome admin panel could let your end-users edit data like they would on a spreadsheet?

Inline editing does just that. With your query for updates to your datasource built, all you need is to,

• make your columns editable, and

• bind the query to the EditActions column type—shown as the onSave property.

• Your users then just do ↓.

Where the Table’s going

The Table has come a long way since we launched it many, many release cycles ago. Little did we think it could potentially become a CRUD app builder on its own. Which it is quite nearly now. So, we are building more and more on the table ourselves and asking, “Can’t we really turn this into an end-to-end app builder?”

You are welcome to stay updated about our tries or even contribute, but don’t let either of those stop you from using the Table, say, for an admin panel to a directory or for powering a dashboard for multiple datatypes and sources or even a whole Support app like ours.

Go for it. Your seat at the Table is waiting.

In September, we went up a major version in preparation for the curtain raiser on two big features coming real soon—granular access controls and audit logs. We also made native GraphQL available in Appsmith, added a view for console methods, and shipped a whole raft of other improvements.

But before anything else…

We're SOC2 certified!

This certification demonstrates our long-held commitment to security as an integral part of Appsmith.

‍

‍

GraphQL + Appsmith = ❤️

Connect any GraphQL endpoint to Appsmith and use the familiar Query Editor to start working with your data.

With native GraphQL support in Appsmith, you can

• ↔️ see query objects and the variable dictionary side-by-side
• ✍️ write query and mutation objects in Appsmith
• 🧩 use fragments to save time with repeat code
• 📄 paginate your app easily with both limit-and-offset and by keyset, AKA cursor-based pagination.

‍

‍

Meet Console Logs

Also available now is a view for all console statements in your JavaScript. Called Console Logs under Logs in the Appsmith Debugger, it’s a much better way to see all the responses to your console statements than the browser sub-window.

With support for console methods, you can

• ⛓️ log entry and exit points in your functions
• 🔢 specify a sequence of actions to log as they run
• 🛎️ fire helpful messages in your debugging flow
• 🤖 get auto-complete suggestions for all functions and variables when using console methods
• ⚡ write better code faster

‍

‍

Scanners + sliders

Code Scanner, a brand new widget to let your users scan codes from their device cameras for a variety of use cases—authentication, code redemption, even to just land on your app.

‍

‍

Three visually engaging sliders are also here so you can let your end-users control numbers, a range, or the size of another component when they use your apps.

‍

‍

2X faster widgets

➗ We do smart math now to see which widgets you are changing and update only them on the canvas.

✖️ We also calculate space available on the canvas only when you are moving a widget on the canvas or when you are dragging a new one.

➕ Seemingly small changes? Nope. Render times have decreased from 250ms to 150ms in the Edit mode and 150ms to 80ms in View mode.

‍

Tons of Table improvements

✅ The Table meets the Checkbox and the Switch in new column types.

🪜 The pageSize property on the table widget is now fluid based on the the table’s height.

🚣 Row properties on the Table now ignore interactive column types like a Button or an Icon.

‍

The debugger gets a facelift

🎢 Repeat logs now get grouped into one log line that you can click and expand.

🔥 Performance boost: Instead of saving each log line by line, console methods now save a batch of logs together

‍

‍

More details and a bunch more features, improvements, and fixes at our GitHub.👇

‍

At Appsmith, we like to do things a bit differently, and Hacktoberfest is no different. While we are looking for submissions all month, we will be announcing the 4 themes for the template contest each week. 

Additionally, we will have a way *each* week to get “free” coins, which can be redeemed for prizes in our swag store! Check back each week to find out how to get these free prizes.

Themes and prizes - how it works

In order to encourage a broad range of submissions from a broad range of people, we have arranged the template contest across 4 themes:

1. Startup apps
2. UI Kits and Designs
3. App clones
4. Dashboards

For each theme, we will have 3 categories:

1. Best UI
2. Clever Use of Code
3. Most Inspirational

And, in each category, we will have 3 prizes:

1. Gold - 10 coins
2. Silver - 7 coins
3. Bronze - 4 coins

A bit of multiplication (4 x 3 x 3) will reveal that we are giving out 36 prizes in total! Even better, all accepted submissions may be added to our community repository. So, not only can you win cool stuff, but you also may have your contribution immortalized in our community library. It’s a win-win scenario.

Theme 1 - Startup apps

For the first theme, we want to focus on “Startup Apps”. In other words, we want to see cool, clever, and amazing apps that any new startup would find useful. Whether the startup is a pre-seed project being run out of a garage or is a Series B+ funded organization with millions to wisely spend.

All businesses need internal applications, and often you can see smaller organizations struggling to scale by trying to build or buy solutions to help them manage their growing business and team. 

Appsmith makes this easier by allowing them to quickly build and implement internal apps as fast as they can be imagined, planned, and outlined. We can make it even easier by sharing community application templates that can inspire or provide a great starting point.

Who knows, the Startup App that you submit could be the thing that helps the next great open source company survive and thrive! It will at least be a great example of how people can use Appsmith to move faster and leverage the power of open source to do well.

Free coins

While we hope that everyone contributes great stuff, and we would love to give everyone a prize, that's just not how it works. We have tried to find a balance between offering great prizes and giving awards to as many people as possible.

But, there is a bit of a loophole. 

Each week, we will have a “mini-quest” that you can complete to win a free coin for our shop! All you have to do is visit our Hacktoberfest app, and click on the “Coins” menu item. Here, we will have a new quest each week that you can perform and redeem in order to win a bonus coin!

The only caveat is that you need to be registered to take part, AND you need to go check out the mini-quest each week. You should have plenty of time to do that in between writing code and building templates!

So - what is the week 1 mini-quest? It’s almost TOO EASY! All you have to do is register in our Hacktoberfest App and then visit the Coin page to redeem your coins. That's it - I told you it was too easy.

FAQ Week 1

• Do I need to wait for the weekly theme announcement to submit something?
  No way! You can submit code or templates anytime in October, for any theme. We will talk more about them each week, but if you have a great idea, start today!
  
  
• Do I need to have a Github account to participate?
  Yes, you do. Our main code repository and our community library both live on Github, so we will need you to have a Github account.
  
  
• What are these “coins” and why do I want them?
  A coin is a virtual currency that can only be spent in our Swag Shop (coming soon). Trust us - you will want coins so you can get some of our great swag!
  
  
• Instead of templates, can I just submit good old-fashioned code for Hacktoberfest?
  Of course! We have a convenient listing of Hacktoberfest issues in our app for you to contribute to. Go ahead and get registered, and then get coding.
  
  
• Can I submit to issues AND the template contest? Is that legal?
  Let me check the rules… hmmm…. not seeing anything that prevents that, so go for it! In fact, there isn’t anything in the rules preventing you from submitting code and winning multiple template prizes. The more you play, the more likely you are to win.
  
  
• So, can I get enough coins to buy everything in the store?
  I don’t know… can you? 

‍