Custom Widget

Allows for a fully customizable widget with custom HTML, CSS, and JS.

Examples

Basic Example

The following example shows how to create a custom widget with a button that returns the current date.

from abstra.forms import read_custom

current_date = read_custom(
    "<button id='date-btn'>Get current date</button>",
    label="Custom Widget",
    js="""
    document.getElementById('date-btn').addEventListener('click',function() {
        const date = new Date();
        const day = date.getDate();
        const month = date.getMonth() + 1;
        const year = date.getFullYear();

        changeEvent(day + '/' + month + '/' + year);
    });
    """,
    css="""
    body {
        margin: 0;
        padding: 0;
    }

    #date-btn {
        cursor: pointer;
        background-color: #343b46;
        border: none;
        border-radius: 4px;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }

    #date-btn:hover {
        background-color: #3e4756;
    }
    """,
)

Parameters

Name	Description	Type
html_body	The HTML body content	str
initial_value	The initial value to be stored in custom widget state.	Any
label	The label to display to the user	str
html_head	The HTML head content	str
css	The widget's CSS	str
js	The widget's JavaScript	str
height	The widget's height	int
change_event	The function to call whenever changeEventis called	Callable
full_width	Whether the input should use full screen width. Defaults to False.	bool
button_text	What text to display on the button when the widget is not part of a Page. Defaults to 'Next'.	str

Return Values

Type	Description
Any	The custom response