@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 }
}
{
'name' 'myDateTime' 'label' 'First use'
'type' 'datetime'
'default' NOW
'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" buttonYour 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
}
}
{
'name' 'myText' 'label' 'Text input sample'
'type' 'text'
'default' 'foo bar'
'options' {
'min' 3 // Optional minimal string length
'max' 8 // Optional maximal string length
}
}
{
'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
}
}
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
}
{
'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 96 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 0 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
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.