Skip to content

Actions

Actions are user-defined responses to certain events. For example, they can be a click of a button or the loading of a page. If a component has property with the prefix on, like onSubmit for example, you can define an action there.

Currently there are two main groups of of actions:

AWS - invocation of certain AWS services like Action.aws.lambda.invoke
Buttonize - lifecycle events of the Buttonize apps like Action.buttonize.changePage

Code example

10 collapsed lines
import { NodejsFunction } from 'aws-cdk-lib/aws-lambda-nodejs'
import { Action, Buttonize, ButtonizeApp, Display, Input } from 'buttonize/cdk'

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

new ButtonizeApp(this, 'MyButtonizeApp')
  .page('MyButtonizePage', {
    body: [
      Display.heading('Hello, this is my page'),
      Input.button({
        label: 'Next page',
        onClick: Action.buttonize.app.changePage('SecondPage')
      })
10 collapsed lines
    ]
  })
  .page('SecondPage', {
    body: [
      Display.heading('This is second page.'),
      Input.text({
        id: 'name',
        label: 'What is your name?',
        placeholder: 'Joe'
      }),
      Input.button({
        label: 'Register',
        variant: 'secondary',
        onClick: Action.aws.lambda.invoke(
          new NodejsFunction(this, 'MyLambda', {
            entry: path.join(__dirname, `lambdaHandler.ts`)
          }),
          {
            Payload: {
              saveToDb: true,
              userName: '{{name}}'
            }
          }
        )
      })
    ]
  })

Available actions

AWS

lambda.invoke Invoke Lambda function in your Buttonize App

Buttonize

app.changePage Change the active page within a Buttonize app