@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
'diff' 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.diff remove the untouched keys from the output variable. Each send event only contains modifications since the component load or the previous send.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
The npm package @senx/discovery-plugin-form receives a total of 72 weekly downloads. As such, @senx/discovery-plugin-form popularity was classified as not popular.
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
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.