Skip to content
Buttonize.io Logo Buttonize.io Logo Buttonize Docs

Runtime State

Every application has some kind of runtime “state” and Buttonize apps are no exception.

When an app is loaded it starts with an empty state. Once the browser tab is closed or refreshed, the state is destroyed.

Every Input component stores some data in the runtime state. You can learn more in the “Runtime State” section of each component.

You can access the runtime state value in your app by using variable expressions.

Example

lib/MyStack.ts
6 collapsed lines
import { Buttonize, ButtonizeApp, Display, Input } from 'buttonize/cdk'


Buttonize.init(this, {
  apiKey: 'btnz_mybuttonizekey1234567'
})


new ButtonizeApp(this, 'MyButtonizeApp')
  .page('MyButtonizePage', {
    body: [
      Input.text({


        id: 'name',
        label: 'What is your name?',
        placeholder: 'Joe'
      }),


      Display.heading('Hello {{name}}, this is my page'),
    ]
  })
Runtime state
{
  "name": "Alex"
}
app.buttonize.io

Initial State

You can define a set of Actions that will be invoked once the page loads.

This can be useful when you need to pre-fetch data that will be displayed to the user like for example dynamic options for select box.

Example

lib/MyStack.ts
12 collapsed lines
import { Action, Buttonize, ButtonizeApp, Display, Input } from 'buttonize/cdk'


Buttonize.init(this, {
  apiKey: 'btnz_mybuttonizekey1234567'
})


const myLambdaFunction = new lambda.NodejsFunction(
  this,
  'MyLambdaFunction',
  { entry: path.join(__dirname, `lambdaHandler.ts`) }
)


new ButtonizeApp(this, 'MyButtonizeApp')
  .page('MyPage', {
    initialState: {
      myInitDataExample: Action.aws.lambda.invoke(
        myLambdaFunction
      )
    },
    body: [
      Display.json({
        dataFromLambda: '{{myInitDataExample}}'
      })
    ]
  })