Creating a select input element HTML for CloudWatch Dashboard Custom Widget

Question

I am trying to set up a CloudWatch Dashboard that will call a lambda function and pass it a AWS region name as a parameter. I would like to allow the user to select the region from a plain old pulldown menu but I can't figure out how to do that so I have resorted to using buttons. So I have a custom widget that looks like this:

And here is the lambda function that produces that:

import json
import boto3

call_lambda_arn = 'arn:aws:lambda:us-west-1:XXXXXX:function:customWidget_xxxxxx'

def get_all_regions():
    ROWS=5
    COLS=4
    ec2 = boto3.client('ec2')
    table_html = f"""
    <table>
    <tr><th span='4'>Regions</th></tr>
    """
    # Retrieves all regions/endpoints that work with EC2
    response = ec2.describe_regions()
    region_dicts = response.get('Regions')
    for i, region_dict in enumerate(region_dicts):
        td_html = ""
        region_name = region_dict.get('RegionName')
        if i % 4 == 0:
            td_html += f'''<tr><td>
            <a class="btn btn-primary">{region_name}</a>
            <cwdb-action action="call" endpoint="{call_lambda_arn}"> 
            {{ "region_name": {region_name}" }}
            </cwdb-action></td>
            '''
        elif i % 4 == 3:
            td_html += f'''<td>
            <a class="btn btn-primary">{region_name}</a>
            <cwdb-action action="call" endpoint="{call_lambda_arn}"> 
            {{ "region_name": {region_name}" }}
            </cwdb-action></td></tr>
            '''
        else:
            td_html += f'''<td>
            <a class="btn btn-primary">{region_name}</a>
            <cwdb-action action="call" endpoint="{call_lambda_arn}"> 
            {{ "region_name": {region_name}" }}
            </cwdb-action></td>
            '''
        table_html += td_html
    table_html += "</table>"
    return table_html

def lambda_handler(event, context):
    return get_all_regions()
    

How can I achieve the same, but with a pulldown menu instead of a bunch of buttons?

Answer 1

The cwdb-action passes a context object to the lambda and this object will contain all form field values from the widget (see what the whole context object looks like here).

So you could construct your html to have the list of regions in a form, like this for example:

<form>
<label for="region">Select a region:</label> 
<br />
<select id="region" name="region">
    <option value="us-east-1">us-east-1</option>
    <option value="us-west-2">us-west-2</option>
    <option value="eu-west-1">eu-west-1</option>
    <option value="sa-east-1">sa-east-1</option>
</select>
</form>

<br />

<a class="btn">Execute</a>
<cwdb-action action="call" endpoint="LAMBDA_ARN" />

Then you can get the region value from the event like this:

event["widgetContext"]["forms"]["all"]["region"]