Apps & Pages

AWS CDK

Source

Apps and pages are the main building blocks of Buttonize. Every app is composed of one or more pages and every page is then composed of one or more Components.

Note

• You can add and remove pages as you like but make sure there is at least one page in the application.
• Make sure the page ID is always unique in context of a single application. If not, CDK will throw an error.
• The first page is always displayed as the initial page.

Example

lib/MyStack.ts

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')
      })
    ]
  })
  .page('SecondPage', {
    body: [
      Display.heading('This is second page.'),
      Input.text({
        id: 'name',
        label: 'What is your name?',
        placeholder: 'Joe'
      }),
      Display.text('Hello: {{name}}'),
      Input.button({
        label: 'Go back',
        onClick: Action.buttonize.app.changePage('MyButtonizePage')
      })
    ]
  })

Preview

First page

The buttons are not interactive in this example.

app.buttonize.io

Second page

The buttons are not interactive in this example.

app.buttonize.io

Page Props

body

Required

Component[]

Every page is composed of one or more components. Components are of type Display or Input. Learn more about Components.

new ButtonizeApp(this, 'MyApp')
  .page('MyButtonizePage', {
    body: [
      Display.heading('My Great APp'),
      Display.text('Hello there.')
    ]
  })

initialState

Optional

{ [key: string]: ActionIntent }

Initial state defines actions which will be executed when the page is displayed to the user. The returned values from the actions will be stored in the state under the respective keys. Learn more about Runtime State.

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

new ButtonizeApp(this, 'MyApp')
  .page('MyPage', {
    initialState: {
      myInitData: Action.aws.lambda.invoke(
        myLambdaFunction
      )
    },
    body: []
  })

App Props

name

Optional

string

Name of the application which is then visible in the apps list when users are searching for the apps.

tags

Optional

string[]

Tags that will be applied to this app. Tags can be used for filtering the apps or for managing access via Permission System.

description

Optional

string[]

Short description of the application’s purpose which is then visible in the apps list next to app name.

stage

Optional

string

If you are using production/staging/feature deployments, you can distinguish between them by setting a value on this property. The stage value can be used for filtering the apps or for managing access via Permission System.

apiKey

Optional Special Use

string

We recommend using Buttonize.init where you can set the default API key for all the apps in a CDK stack. But if you need to use different API keys for different apps in a single stack, you can use this property.

executionRole

Optional Special Use

iam.Role | { roleArn: string; externalId: string }

We recommend using the default execution IAM role generated by Buttonize. But if you want Buttonize to use your custom IAM role, you can use this property.