I want to share my latest project with you!
I’ve found it hard to create editor forms for my custom cards. So I’ve gotten to the bottom of it and made a Formbuilder helper.
Here you can find an example on how to use it:
The readme is far from perfect, so if you use it, please help me make the readme better.
Its really as easy as the following and voila, you’ve got a editor form:
return this.renderForm([
{ controls: [{ label: "Card Type (Required)", configValue: "card_type", type: FormControlType.Dropdown, items: this.getDropdownOptionsFromEnum(FormulaOneCardType) }] },
{ controls: [{ label: "Title", configValue: "title", type: FormControlType.Textbox }] },
{
label: "Basic configuration",
cssClass: 'side-by-side',
controls: [
{ label: "Use F1 font", configValue: "f1_font", type: FormControlType.Switch },
{ label: "Image clickable", configValue: "image_clickable", type: FormControlType.Switch },
{ label: "Hide race dates and times", configValue: "hide_racedatetimes", type: FormControlType.Switch },
{ label: "Show last years result", configValue: "show_lastyears_result", type: FormControlType.Switch },
{ label: "Only show date", configValue: "only_show_date", type: FormControlType.Switch }
]
},
{
label: "Countdown Type",
cssClass: 'side-by-side',
controls: [{ configValue: "countdown_type", type: FormControlType.Checkboxes, items: this.getDropdownOptionsFromEnum(CountdownType) }]
},
{
cssClass: 'side-by-side',
controls: [
{ label: "Next race delay", configValue: "next_race_delay", type: FormControlType.Textbox },
{ label: "Row limit", configValue: "row_limit", type: FormControlType.Textbox },
]
},
{ controls: [{ label: "Previous race", configValue: "previous_race", type: FormControlType.Dropdown, items: this.getDropdownOptionsFromEnum(PreviousRaceDisplay) }] },
{
label: "Standings",
cssClass: 'side-by-side',
controls: [
{ label: "Show team", configValue: "standings.show_team", type: FormControlType.Switch },
{ label: "Show flag", configValue: "standings.show_flag", type: FormControlType.Switch },
{ label: "Show teamlogo", configValue: "standings.show_teamlogo", type: FormControlType.Switch }
]
},
{
cssClass: 'side-by-side',
controls: [
{ label: "Next race delay", configValue: "next_race_delay", type: FormControlType.Textbox },
{ label: "Row limit", configValue: "row_limit", type: FormControlType.Textbox },
]
},
{
label: "Weather",
cssClass: 'side-by-side',
controls: [
{ label: "Show weather", configValue: "show_weather", type: FormControlType.Switch },
{ type: FormControlType.Filler },
{ label: "API key", configValue: "weather_options.api_key", type: FormControlType.Textbox },
{ label: "Unit", configValue: "weather_options.unit", type: FormControlType.Dropdown, items: this.getDropdownOptionsFromEnum(WeatherUnit) },
{ label: "Show icon", configValue: "weather_options.show_icon", type: FormControlType.Switch },
{ label: "Show precipitation", configValue: "weather_options.show_precipitation", type: FormControlType.Switch },
]
},
]);