@dashup/module v2.0.19
Dashup Module ·
A pluggable interface for creating functionality within dashup.
Contents
Get Started
Dashup uses a very simple interface system to build logic. Clone our default interface repo to get started:
git clone git@github.com:dashupio/module-base.git .
npm i
npm run start
Page
Field
The field interface enables creating or extending custom fields within Dashup forms.
To create a field you'll first need to extend the field interface and set all of the data:
// import field interface
import { Field } from '@dashup/module';
/**
* build address helper
*/
export default class ExampleField extends Field {
/**
* returns field type
*/
static get type() {
// return field type label
return 'type';
}
/**
* returns field data
*/
static get data() {
// return field data
return {};
}
/**
* returns object of views
*/
static get views() {
// return object of views
return {
input : 'field/example/input', // input view is required
render : 'field/example/render', // input render is required
};
}
/**
* returns category list for field
*/
static get categories() {
// return array of categories
return ['frontend'];
}
/**
* returns field descripton for list
*/
static get description() {
// return description string
return 'Field Descripton';
}
}
Views
Fields must return an object of available riot views stored in /views
in the root of this project. These views are automatically loaded and included when the field needs them in the Dashup frontend.
Altering tabs
/**
* returns object of data
*/
static get data() {
// return object of data
return {
tabs : ['Field', 'Validate'], // array of tabs to display in field modal
};
}
Registering views
/**
* returns object of views
*/
static get views() {
// return object of views
return {
input : 'field/example/input', // input view is required
render : 'field/example/render', // input render is required
// each subsequent view is loaded with it's associated tab in the `config` modal
field : 'field/example/field', // loaded into the `field` tab in the modal
validate : 'field/example/validate', // loaded into the `field` tab in the modal
};
}
Methods
Fields also have 3 optional methods that enable extra functionality:
Sanitise
The Field Sanitise method returns different data compared to what is stored in the database for use in the frontend:
/**
* returns sanitised data from the database
*
* @param {Object} { req, dashup }
* @param {Object} field field config
* @param {*} value stored value
*/
async sanitise({ req, dashup }, field, value) {
// return different data
return {
different : 'data',
};
}
Submit
The Field Sanitise method returns different data to be stored in the database:
/**
* returns database data from submitting the field
*
* @param {Object} { req, dashup }
* @param {Object} field field config
* @param {*} value expected body value
*/
async submit({ req, dashup }, field, value) {
// return different data
return {
different : 'data',
};
}
Save
The Field Save method allows altering the field config when it's saved within a form:
/**
* hooks field alterations before saving to the database
*
* @param {Object} { req, dashup }
* @param {Object} field field config
*/
async save({ req, dashup }, field) {
// set different info
field.different = true;
}
Action
Trigger
Connect
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago