17
December
2021
Tutorial

Use Color and Gradient Styles in the Table Widget to Improve App UI

Statistical data and database information is often represented using table models. These models might represent large amounts of data sets; hence there is a need for customization between table sets to help distinguish them. Finding a suitable application to help develop tables that meet these requirements is often an uphill task. Appsmith is an open-source framework that enables developers to build internal tools for applications and add functionality quickly. With Appsmith, we can also create tables, link them up to an API or database and perform CRUD operations.

In this blog, we will learn how to style tables in Appsmith. We will also learn how to customize different aspects of our table to change the appearance and how the table data is displayed. We will apply different styles to other tables to help distinguish them.

Why Do We Need To Style Tables?

In situations where we are building numerous tables on Appsmith, we will need to add labels to each table to differentiate between them. Alternatively, we can also apply different styles to each table ranging from color gradients, cell colors, borders, and box shadows. Styling helps to improve the overall appearance of tables. When styles are used to identify specifically stored data, it makes it easier for viewers to pinpoint what they need to see in a table. For example, a table may have a specific cell color for table columns reflecting profit or loss in an account, making it easier to understand. 

How Styling Works in Appsmith

Appsmith tables provide an ordered form of representing data from a data source in rows and columns. This table can also be used to view large amounts of data, and the data can be arranged in the form of server-side pagination in which the amount of data displayed is limited per page. 

Here are a few examples of some tables built with Appsmith:


Appsmith provides us with a property pane. The Appsmith property pane contains all the properties where users can connect to data and customize it with different properties. Numerous styles which can be applied to produce various results with the widgets can also be found in the property pane. Select the widget you wish to style and click on the cog-wheel icon at the top right to get to this style pane. The Style section is located at the bottom of the menu that pops up.


This panel may vary based on which widget is selected. The image above is the Style panel of the Table widget. Starting from the top,  we have the following options: 

- Cell Background, 

- Text Color, 

- Font Style, 

- Text Align and 

- Vertical Alignment.

We will go over these options in the course of this tutorial and discuss the effects of each of them.

In these style options, there is a JavaScript toggle button. Clicking on the JS toggle button changes the mode of input for the options and lets us enter strings of characters or JavaScript for the property we wish to apply. For instance, we can set visibility to none by toggling the JS toggle for the visible property and entering “false” in the field or entering {{false}}. The latter is Javascript enclosed in mustache syntax. We will talk more about what mustache syntax is and its usage later in this tutorial. 

Styling Tables: A Manual 

Below, I have a table widget with some data in it. If you select your table, you will get a popup with a gear icon you can use to edit your table.


Clicking on the gear icons opens up a property pane to edit the table. If you scroll down the menu, you will see a section to add styles to the table.



Cell Background and Text Color

In this section, we will learn about the different styles provided by Appsmith and how they can be applied to produce different results with tables. The first two options in the Styles section allow us to change the color of our table’s background and our text color.




Above, I have selected a black color for my cell’s background, and I’ve also set my text color to white. Alternatively, you can use a different color other than the ones provided here by entering the Hex code for the color in the property field. An example is a purple color with the Hex code: #ed18cd. If you are looking for a site where you can pick colors from a palette and get the Hex code, you can check out Coolors or get the extension for your browser. 

Changing Font Size

The next option gives us the ability to change the font size of the text in our table. There are different options to choose from, with “Heading 1” being the largest font size and “Paragraph 2” being the smallest font size. 


Here, I have increased the font size for my table by setting my “Text size” property to Heading 1.  

Font Style, Text Align and Vertical Alignment

We can customize the font style and justify our text horizontally and vertically with the remaining three options.




Note that it is possible to add both “bold” and “italics” font styles simultaneously. The text-align property provides you with options to position your text either at the left, center, or right of your cell. In other words, it lets us set our text on the horizontal axis. 

Vertical Alignment is used to make adjustments to the vertical position of our text in the table. The first option positions text at the top of their cell, the second positions the text at the center, and the last positions the text at the bottom of the cell.

Also, rather than applying these styles to the entire table, it is possible to target only a particular cell to apply these styles.

Adding Styles Based on Fulfillment of a Condition

Appsmith has a feature to create styles for certain table elements that meet a particular criterion. We can define this criterion using JavaScript and state what styles should be applied. To do this, open the property pane on the column you wish to apply this condition.




Above, I have selected the phone column. We will add a condition to set the text color for this column. We will check if the value of each row in the phone column is even or odd and assign it a particular color. We can add JavaScript to the property pane elements using mustache. This is primarily JavaScript code enclosed with two curly-braces {{ }}. We can add JavaScript data or even functions to our table with this syntax.

{{currentRow.phone %2 == 0? "red" : "blue"}}

Some examples of writing JavaScript functions can be found in Appsmith Documentation.

The command mentioned earlier checks if the row is even; if it is, it will be red; otherwise, it will be blue. We can add this to the Text Color option in your column. Enable the JS toggle to write Javascript in the field and add the snippet above.




Here, the fields divisible by two in the phone columns have a text color of red, and the others have a text color of blue. This way, you can apply different styles to your table if specific criteria are met.


Adding Gradient as Cell Background Color

Appsmith allows us to add gradients as background color as we would normally add in a CSS Stylesheet. 

Here is an example of a CSS gradient:

linear-gradient(90deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%)

We can add this in our background property. The resulting color change will take place in the table widget.




I hope you found this article helpful and now have a better understanding of the Table Widget on Appsmith.

If you have any questions, please don’t hesitate to write to me at umavictor11@gmail.com. I will be happy to help you understand it better. 


Uma is a software developer based in Nigeria who is familiar with various web technologies and frameworks. He is also keen on finding ways to explain things in simple ways. This article was written as part of the Appsmith Writers Program.

Use Color and Gradient Styles in the Table Widget to Improve App UI

Statistical data and database information is often represented using table models. These models might represent large amounts of data sets; hence there is a need for customization between table sets to help distinguish them. Finding a suitable application to help develop tables that meet these requirements is often an uphill task. Appsmith is an open-source framework that enables developers to build internal tools for applications and add functionality quickly. With Appsmith, we can also create tables, link them up to an API or database and perform CRUD operations.

In this blog, we will learn how to style tables in Appsmith. We will also learn how to customize different aspects of our table to change the appearance and how the table data is displayed. We will apply different styles to other tables to help distinguish them.

Why Do We Need To Style Tables?

In situations where we are building numerous tables on Appsmith, we will need to add labels to each table to differentiate between them. Alternatively, we can also apply different styles to each table ranging from color gradients, cell colors, borders, and box shadows. Styling helps to improve the overall appearance of tables. When styles are used to identify specifically stored data, it makes it easier for viewers to pinpoint what they need to see in a table. For example, a table may have a specific cell color for table columns reflecting profit or loss in an account, making it easier to understand. 

How Styling Works in Appsmith

Appsmith tables provide an ordered form of representing data from a data source in rows and columns. This table can also be used to view large amounts of data, and the data can be arranged in the form of server-side pagination in which the amount of data displayed is limited per page. 

Here are a few examples of some tables built with Appsmith:


Appsmith provides us with a property pane. The Appsmith property pane contains all the properties where users can connect to data and customize it with different properties. Numerous styles which can be applied to produce various results with the widgets can also be found in the property pane. Select the widget you wish to style and click on the cog-wheel icon at the top right to get to this style pane. The Style section is located at the bottom of the menu that pops up.


This panel may vary based on which widget is selected. The image above is the Style panel of the Table widget. Starting from the top,  we have the following options: 

- Cell Background, 

- Text Color, 

- Font Style, 

- Text Align and 

- Vertical Alignment.

We will go over these options in the course of this tutorial and discuss the effects of each of them.

In these style options, there is a JavaScript toggle button. Clicking on the JS toggle button changes the mode of input for the options and lets us enter strings of characters or JavaScript for the property we wish to apply. For instance, we can set visibility to none by toggling the JS toggle for the visible property and entering “false” in the field or entering {{false}}. The latter is Javascript enclosed in mustache syntax. We will talk more about what mustache syntax is and its usage later in this tutorial. 

Styling Tables: A Manual 

Below, I have a table widget with some data in it. If you select your table, you will get a popup with a gear icon you can use to edit your table.


Clicking on the gear icons opens up a property pane to edit the table. If you scroll down the menu, you will see a section to add styles to the table.



Cell Background and Text Color

In this section, we will learn about the different styles provided by Appsmith and how they can be applied to produce different results with tables. The first two options in the Styles section allow us to change the color of our table’s background and our text color.




Above, I have selected a black color for my cell’s background, and I’ve also set my text color to white. Alternatively, you can use a different color other than the ones provided here by entering the Hex code for the color in the property field. An example is a purple color with the Hex code: #ed18cd. If you are looking for a site where you can pick colors from a palette and get the Hex code, you can check out Coolors or get the extension for your browser. 

Changing Font Size

The next option gives us the ability to change the font size of the text in our table. There are different options to choose from, with “Heading 1” being the largest font size and “Paragraph 2” being the smallest font size. 


Here, I have increased the font size for my table by setting my “Text size” property to Heading 1.  

Font Style, Text Align and Vertical Alignment

We can customize the font style and justify our text horizontally and vertically with the remaining three options.




Note that it is possible to add both “bold” and “italics” font styles simultaneously. The text-align property provides you with options to position your text either at the left, center, or right of your cell. In other words, it lets us set our text on the horizontal axis. 

Vertical Alignment is used to make adjustments to the vertical position of our text in the table. The first option positions text at the top of their cell, the second positions the text at the center, and the last positions the text at the bottom of the cell.

Also, rather than applying these styles to the entire table, it is possible to target only a particular cell to apply these styles.

Adding Styles Based on Fulfillment of a Condition

Appsmith has a feature to create styles for certain table elements that meet a particular criterion. We can define this criterion using JavaScript and state what styles should be applied. To do this, open the property pane on the column you wish to apply this condition.




Above, I have selected the phone column. We will add a condition to set the text color for this column. We will check if the value of each row in the phone column is even or odd and assign it a particular color. We can add JavaScript to the property pane elements using mustache. This is primarily JavaScript code enclosed with two curly-braces {{ }}. We can add JavaScript data or even functions to our table with this syntax.

{{currentRow.phone %2 == 0? "red" : "blue"}}

Some examples of writing JavaScript functions can be found in Appsmith Documentation.

The command mentioned earlier checks if the row is even; if it is, it will be red; otherwise, it will be blue. We can add this to the Text Color option in your column. Enable the JS toggle to write Javascript in the field and add the snippet above.




Here, the fields divisible by two in the phone columns have a text color of red, and the others have a text color of blue. This way, you can apply different styles to your table if specific criteria are met.


Adding Gradient as Cell Background Color

Appsmith allows us to add gradients as background color as we would normally add in a CSS Stylesheet. 

Here is an example of a CSS gradient:

linear-gradient(90deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%)

We can add this in our background property. The resulting color change will take place in the table widget.




I hope you found this article helpful and now have a better understanding of the Table Widget on Appsmith.

If you have any questions, please don’t hesitate to write to me at umavictor11@gmail.com. I will be happy to help you understand it better. 


Uma is a software developer based in Nigeria who is familiar with various web technologies and frameworks. He is also keen on finding ways to explain things in simple ways. This article was written as part of the Appsmith Writers Program.

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