@senx/discovery-plugin-form
Advanced tools
This is a declarative form widget dedicated to Discovery.
$ npm install @senx/discovery-widgets
$ npm install @senx/discovery-plugin-form
<script nomodule src="https://unpkg.com/@senx/discovery-widgets/dist/discovery/discovery.js"></script>
<script type="module" src="https://unpkg.com/@senx/discovery-widgets/dist/discovery/discovery.esm.js"></script>
<script type="module" src="https://unpkg.com/@senx/discovery-plugin-form/dist/discovery-plugin-form/discovery-plugin-form.esm.js"></script>
<script nomodule src="https://unpkg.com/@senx/discovery-plugin-form/dist/discovery-plugin-form/discovery-plugin-form.js"></script>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<discovery-dashboard url="https://warp.senx.io/api/v0/exec" dashboard-title="Test">
{
'title' 'Test'
'description' 'Dashboard test'
'tiles' [
{
'title' 'test'
'x' 0 'y' 0 'w' 12 'h' 4
'type' 'form'
'macro' <%
{
'events' [ { 'tags' [ 'test' ] 'type' 'variable' 'selector' 'myVar' } ]
'data' [
{
'name' 'make' 'label' 'Choose a maker'
'type' 'list'
'data' [ "Toyota" "BMW" "Honda" "Ford" "Chevy" "VW" ]
'required' T
'options' { 'col' 4 }
}
%>
}
]
}
</discovery-dashboard>
<script nomodule src="https://unpkg.com/@senx/discovery-widgets/dist/discovery/discovery.js"></script>
<script type="module" src="https://unpkg.com/@senx/discovery-widgets/dist/discovery/discovery.esm.js"></script>
<script type="module" src="https://unpkg.com/@senx/discovery-plugin-form/dist/discovery-plugin-form.esm.js"></script>
<script nomodule src="https://unpkg.com/@senx/discovery-plugin-form/dist/discovery-plugin-form.js"></script>
</body>
</html>
options.button.label: Custom label for the submit button, "Ok" by default.options.input.validation: Enable form validationoptions.input.allLabel: Custom label for "All" buttonoptions.input.noneLabel: Custom label for "None" buttonForm plugin options are declared in extra:
'options' {
'button' { 'label' 'Send' }
'input' { 'validation' true }
'extra' { 'form' {
'stickyButton' true
'addFormUUID' true
} }
}
stickyButton make the form "Send" button always visible, even if the form is bigger than the tile.addFormUUID add a uuid in the key formUUID of the output variable. It allows to build a logic for tiles listening to multiple events to avoid a replay of the same event, or to miss a new event.Your Discovery macro should return a list of controls or a key value map with a field "data" containing a list of controls.
Each control is placed on a 12 columns width grid. By default, each control is 12 columns width.
Each control is described by:
{
'name' 'make' // Mandatory. Unique control's name
'label' 'Choose a maker' // Optional. Control's label. By default, the control's name is used as label
'description' 'Bla bla' // Optional short field description
'type' 'list' // Mandatory. Type of control (see below)
'data' [ 'A' 'B' 'C' ] // Data used by the list
'default' 'B' // Optional default value.
'required' T // Optional, if form validation is enable, mark this control as requiered
'options' {
'col' 4 // Optional, width of the control over the main grid
'grid_break' true // Optional, force a line return in the grid
'placeholder' 'Choose...' // Custom input placeholder
}
}
The field by field disabled is not available for every controls type.
{
'name' 'myText' 'label' 'Text input sample'
'type' 'text'
'default' 'foo bar'
'options' {
'min' 3 // Optional minimal string length
'max' 8 // Optional maximal string length
}
'disabled' true // cannot edit this field
}
{
'name' 'mySecret' 'label' 'Password input sample'
'type' 'secret'
'default' 'foo bar'
'options' {
'min' 3 // Optional minimal string length
'max' 8 // Optional maximal string length
}
}
{
'name' 'myHidden' 'label' 'Invisible'
'type' 'hidden'
'default' 'foo bar'
}
{
'name' 'myNumber' 'label' 'Number input sample'
'type' 'number'
'default' 12
'options' {
'min' 3 // Optional minimal value
'max' 80 // Optional maximal value
}
'disabled' true // cannot edit this field
}
Works with a list of strings or a list of numbers
{
'name' 'myList' 'label' 'List input sample'
'type' 'list'
'data' [ 1995 1996 1997 1998 1999 2000 2001 ] // Use data to set the available values
'default' 1998
'disabled' true // cannot edit this field
}
{
'name' 'myList' 'label' 'List input sample'
'type' 'list'
'macro' <% [ 'A' 'B' 'C' ] %> // or use a macro to set the available values
'default' 'B'
}
Like lists, works also with a macro.
Works only with a list of strings.
{
'name' 'myAutocomplete' 'label' 'Autocomplete input sample'
'type' 'autocomplete'
'data' [ "admiring" "adoring" "agitated" "tiny" "trusting" ] // Use data to set the available values
'default' "adoring"
}
Like lists, works also with a macro.
{
'name' 'myRating' 'label' 'Rating input sample'
'type' 'rating'
'data' [ "Beginner" "Skilled" "Experienced" "Advanced" "Expert" ]
'default' 'Experienced'
}
{
'name' 'myTime' 'label' 'Standard time field'
'type' 'time'
'default' '12:44'
}
{
'name' 'myDate' 'label' 'Standard date field'
'type' 'date'
'default' NOW
}
{
'name' 'myDateTime' 'label' 'Standard datetime field'
'type' 'datetime'
'default' NOW
}
Like lists, works also with a macro.
{
'name' 'myRadio' 'label' 'Radio'
'type' 'radio'
'default' [ "Work" ]
'data' [ "Home" "Work" ]
}
{
'name' 'myCheckbox' 'label' 'Checkbox'
'type' 'checkbox'
'default' true
}
{
'name' 'mySwitch' 'label' 'Switch'
'type' 'switch'
'default' false
}
Like lists, works also with a macro.
Your data list can contain either a string or a key/value map.
{
'name' 'myMultiCb' 'label' 'Multi checkboxes'
'type' 'multi-cb'
'default' [ true false true false false ]
'data' [ "admiring" "adoring" "agitated" "tiny" { "name" "opt1" "label" trusting" } ]
}
{
'name' 'mySlider' 'label' 'Slider sample'
'type' 'slider'
'default' 30
'options' {
'min' 10 // Optional minimal value
'max' 80 // Optional maximal value
'step' 10 // Optional increment
}
}
FAQs
Discovery plugin for form
We found that @senx/discovery-plugin-form demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.