Colored leaves hanging from a string
@sujoychaudhary

Sujoy

Helping Appsmith Customers Succeed

Appsmith

Staff

Using JavaScript Mutation to create and use variables in Appsmith

September 23, 2023 · 2 minutes
0
 · 0

Goal

Use an editable table widget to manage data in a mutable variable.

Overview

The mutations feature allows you to create variables inside a JSObject, which can be updated in real-time and used within a single page within the application. This is very useful for maintaining temporary data or widget states in a single page. Read the documentation here.

One big advantage of mutations over the storeValue approach is that many operations can be executed in a single or few lines. However, if you want to use a variable across pages in the same application, we recommend using the StoreValue approach.

When to use Mutations

When you need to define logic and perform complex operations only within the same page. Typical examples are Form Wizard, Progress Tracker, Slideshow or a Carousel to showcase multiple images. 

How we recommend using Javascript Mutations

Let's take an example of defining CRUD operations around a table widget using a variable declared in a JSObject.

  1. Create a variable and table

    On left sidebar, click the + icon next to Queries/JS and then select JSObjects and then enter the code snippet below under TableJSObject.

    export default {
    tableData: GetUsers.data,
    defaultTableData: {
        "First_Name": "",
        "Last_Name": "",
        "Date_Of_Birth": ""
    }
}

    Then create a table and bind the variable using TableJSObject.tableData.

    Table Widget - Read Data

  2. Enable adding a new row

    Select the table and you will see the table's properties in the the right sidebar. Scroll down to the Adding a row section and enable Allow adding a Row. In the onSave event, enter the below snippet after enabling JS option.

    {{TableJSObject.tableData.push(Table1.newRow)}}

    Also don't forget to configure the Default Values (if any) for adding a new row.

    Table Widget - Add Data

  3. Bind to delete button

    Add a new custom column called Delete. You can set its column type to either a button/icon button. In the settings of this column, you can define the onClick event to remove the particular row from the table data, hence deleting it.  
    Snippet below.

    {{TableJSObject.tableData.splice(Table1.triggeredRowIndex, 1)}}
    Table Widget - Delete Data

  4. Bind to the save button

    Enable the Editable checkbox, and choose which all fields you would want to allow editing to. This will automatically add the Save/Discard column to the table. Within this column's settings, you can configure the onSave event to save all the updated rows in the Table widget into the table data.  

    {{Table1.updatedRowIndices.forEach((item, index) => {
	TableJSObject.tableData[item] = Table1.updatedRows[index].allFields
})}}
    Table Widget - Update Data

Conclusion

How easy is that? As you can see, it only takes a few lines of code to take full advantage of the powerful table widget for managing data on the page. To take this further, you could potentially sync or update the variable to an external store later.

Aditional Resources