Lambda Invocation Form

Create a simple user interface for your team to directly trigger lambda functions. No need anymore to build cumbersome frontends, auth and APIs just to trigger some internal lambda functions.

LambdaInvocationForm construct is a simple way how to enable anyone in the team to execute custom built lambda-based automations.

Features

Easily invoke a lambda function
Define arbitrary number of input fields
View JSON result of the invocation
View invocation logs
Rerun the previous invocation
Display custom instructions to give a guidance to the users

Preview

Input page

Lambda Invocation Form App preview

Result page

Lambda Invocation Form App result preview

Usage

import * as cdk from 'aws-cdk-lib'
import { NodejsFunction } from 'aws-cdk-lib/aws-lambda-nodejs'
import { Buttonize, Input } from 'buttonize/cdk'
import { LambdaInvocationForm } from 'buttonize/library'
import { Construct } from 'constructs'

export class ExampleStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props)

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

    const discountGenerator = new NodejsFunction(this, 'DiscountGenerator', { entry: 'src/discount-generator.ts' })

    new LambdaInvocationForm(this, 'DiscountGeneratorForm', {
      lambda: discountGenerator,
      name: 'Discount code generator',
      description: 'Generate discount for unhappy customers',
      fields: [
        Input.text({
          id: 'email',
          label: `Customer's email address`,
          placeholder: 'example@domain.com'
        }),
        Input.select({
          id: 'discount',
          label: 'Discount value',
          options: [
            { label: '30%', value: 30 },
            { label: '60%', value: 60 }
          ]
        })
      ],
      instructions: `Sometimes there is bug in our e-commerce system and we need to offer our customers a discount to keep them **happy**.

This tool generates a discount code for the customer and displays it on the following page.`,
    })
  }
}

Lambda function source code

interface FormEvent {
  email: string
  discount: {
    label: string
    value: number
  }
}
export const handler = async (event: FormEvent) => {
  console.log(`Generating discount of value ${event.discount.value} for customer ${event.email}`)

  return {
    discountValuePercent: event.discount.value,
    discountCode: `${Math.random()}`.split('.')[1]
  }
}

{
  "email": "john.doe@example.com",
  "discount": {
    "label": "30%",
    "value": 30
  }
}

Simplified key-value fields definition

Buttonize uses Input.text component for the input elements.

new LambdaInvocationForm(this, 'InvocationForm', {
  lambdaArn: 'arn:aws:lambda:<region>:<account-number>:function:<function-name>',
  fields: {
    name: 'What is your name?'
  }
  /*
    Same like:
      fields: [
        Input.text({
          id: 'name',
          label: 'What is your name?'
        })
      ]
  */
})

{
  "name": "John Doe"
}