Appizap
  • Appizap Overview
  • Build Apps
    • On-boarding Flow
    • Ideas to Apps using AI
    • Create a new app
    • App Configuration
      • App Overview
      • General Settings
      • Domain Settings
      • Version Release & Management
      • App Assets
      • Auth Settings
    • UI Builder
      • Module
      • Menu Navigation
      • Version Logs & Restore
      • Keyboard Shortcuts
    • GUI, Themes & Styles
    • Event handlers
    • Write JavaScript
      • JavaScript within {{ }}
      • JavaScript Query
      • Transformers
      • Temporary State
      • Data Responder
      • Built-in JavaScript Functions
      • Use Third-party Libraries
    • How-to-use
      • Welcome to Appizap!
      • FAQ
  • Appizap Dashboard
    • Your Apps
    • Database
    • Workflows
    • Media & Files
    • Query Library
    • Audit Logger
    • Templates
  • Workspaces
    • Workspace Settings
    • User Authentication
    • User Groups
    • Themes
    • Advanced
  • Appizap Concepts
  • Appizap Studio
    • Data Browser
      • Screen, Modules & Navigations
      • Active Components
      • In-App Modals
      • Data Queries in your App
      • Global Data Variables
    • Layers
    • Screen Settings
    • Debugger
    • Data Queries
    • Widget Library
      • Link
      • Icons
      • Steps
      • Button Group
      • Form Button
      • Grid
      • Responsive Grid Layout
      • Drawer
      • Navigation
      • Cascader
      • Comment
      • Mention
      • Collapsible Container
      • Rich Text Editor
      • Input
      • Modal
      • Text Display
      • Number Input
      • Password
      • List View
      • Date
      • Checkbox
      • Radio
      • Switch
      • Multi Select
      • Dropdown
      • File Upload
      • Phone Number Input
      • Download Pdf Button
      • Image
      • Divider
      • Progress Circle
      • Progress
      • Form
      • JSON Schema Form
      • Container
      • Tabbed Container
      • Table
      • Date Range
      • Time
      • Time Range
      • Toggle Button
      • Segmented Control
      • Rating
      • Timeline
      • Slider
      • Range Slider
      • Control Button
      • File Viewer
      • Image Carousel
      • Lottie Animation
      • Tree
      • Tree Select
      • IFrame
      • Calendar
      • Custom Component
      • Auto Complete
      • Chart
      • Graph Chart
      • Treemap Chart
      • Basic Chart
      • Geo Map Charts
      • Funnel Chart
      • Candlestick Chart
      • Select
      • Audio
      • Caller
      • Text Area
      • Responsive Flex Layout
      • Timer
      • Image Editor
      • AI Component
    • Component Specific Actions
  • Database
    • Connect DB
    • Build Internal DB
      • Arrays
      • Indexes
      • Using JSON Type
      • Cascade Delete
      • Data Load and Import
    • Data Sources
      • Connect Data Sources
        • Big Query
        • ClickHouse
        • CouchDB
        • DynamoDB
        • Elasticsearch
        • MariaDB
        • Microsoft SQL Server
        • MongoDB
        • MySQL
        • Oracle
        • PostgreSQL
        • Redis
        • Snowflake
      • Connect APIs
        • REST API
        • GraphQL
        • Google Sheets
        • S3
        • OpenAPI
        • Firebase
        • WooCommerce
        • OpenAI
        • Athena
        • Lambda
    • Query Library
    • Storage
      • Buckets
      • Uploads
      • Objects
  • Appizap Workflow Builder [Pro]
    • Workflows
      • Create a workflow
      • Nodes
      • Connections
      • Sticky Notes
      • Tags
      • Import and Export
      • Templates
      • Sharing
      • Settings
      • History
      • Find Workflow ID
    • Build Flow Logic
      • Conditional Nodes
      • Data Merging
      • Looping
      • Waiting
      • Sub-Workflow
      • Execution Order
    • Data Handling
      • Data Structure
      • Transforming data
      • Use Code
      • Mapping using UI
      • Data Item Linking
      • Data Pinning
      • Data Editing
      • Data Filtering
      • Data Mocking
      • Binary Data
    • Editor UI
    • Credentials
      • Create and Edit
      • Sharing
    • Integrations
      • Node Types
      • Core Nodes
      • Actions
      • Triggers
      • Credentials
      • Custom API Operations
    • Error Handling
      • Errors related to memory
    • Keyboard Shortcuts
  • Security & Compliance
  • Terms & Conditions
  • Privacy Policy
  • User Guide
    • Getting Started
    • Admin Console
    • Data Maintenance
Powered by GitBook
On this page
  • Use case scenarios
  • Create a temporary state
  • Set state values
  • Example: Increment counter
  1. Build Apps
  2. Write JavaScript

Temporary State

PreviousTransformersNextData Responder

Last updated 4 months ago

You can use temporary state to store and reference local data within an app. Every time you load or refresh an app, the value of temporary state value is reset.

Use case scenarios

Temporary states may help in the following scenarios:

  • To track the temporary values of a variable when the user interacts with your app.

  • To store your data only in operation without persisting to a database.

  • To function as a temporary property when built-in properties in Appizap(such as {{table.selectedRow}} and {{select.value}}) do not support your use case.

To store and access data across apps in your workspace, use localStorage instead.

Create a temporary state

Click + New and select Temporary state in query editor.

You can rename the temporary state and set an initial value.

Set state values

Temporary state offers setValue() and setIn() methods to set or change its value, which can be called in JavaScript queries.

Use setValue() to change the value directly.

//state.setValue(value: any)
state.setValue(3)
state.setValue(input1.value)

When the initial value of a temporary state is an object, use setIn() to change the value in a specified path.

// initial value of state2 as follows:
{
    girl: {
        name: "Lucy",
        age: 18,
        city: {
            name: "New York"
        }
     }
     boy: {
         name: "Bob",
         age: 21,
         city: {
             name: "Los Angeles"
         }
     }
}
//To change the value in a specified path
//state.setIn(path, any value)
//path: an array of keys or indexes. Only the last item in the path will be changed.
state2.setIn(['girl','city'],{name:'Seatle'})
state2.setIn(['boy','age'],18)


// To set value array value, you can use 
// init value = ["hello", "world"]
state2.setIn([1],"foo") // this will result to ["hello", "foo"]

Example: Increment counter

For example, consider a counter and the counter tracks the number of button clicks. Every time the user clicks the button, the number in the text component increases by one.

Build an increment counter in following steps:

  1. Add a button component button1 and a text component text1.

  2. Create a temporary state state1, set its initial value as 0. Bind {{state1.value}} as the display text of text1.

  3. Add an event handler for button1. Select the action Set temporary state and the method setValue, and then set {{state1.value+1}} as the value.

  4. Click the button, you can see the value of text1 increases by one each time you click.

You can also achieve the same result using JavaScript queries:

  1. Add a new query, select Run JavaScript code.

  2. Write JavaScript query with this code, and set it to be manually invoked: state1.setValue(state1.value + 1)

  3. Add an event handler of button1 to run query1.

Now click the Increment counter button, you should see the same result as above.

You can also call these two methods in . Select Set temporary state as the action and choose method on demand.

event handlers