src/components/button/editForm/Button.edit.display.js
import BuilderUtils from '../../../utils/builder';
import _ from 'lodash';
export default [
{
key: 'labelPosition',
ignore: true,
},
{
key: 'placeholder',
ignore: true,
},
{
key: 'hideLabel',
ignore: true,
},
{
type: 'select',
key: 'action',
label: 'Action',
input: true,
dataSrc: 'values',
weight: 110,
tooltip: 'This is the action to be performed by this button.',
data: {
values: [
{ label: 'Submit', value: 'submit' },
{ label: 'Save in state', value: 'saveState' },
{ label: 'Event', value: 'event' },
{ label: 'Custom', value: 'custom' },
{ label: 'Reset', value: 'reset' },
{ label: 'OAuth', value: 'oauth' },
{ label: 'POST to URL', value: 'url' },
],
},
},
{
type: 'select',
key: 'oauthProvider',
label: 'OAuth Provider',
input: true,
dataSrc: 'values',
weight: 111,
tooltip: 'The oauth provider to use to log in (8.x server only).',
data: {
values: [
{ label: 'OpenID', value: 'openid' },
{ label: 'Github', value: 'github' },
{ label: 'Google', value: 'google' },
],
},
conditional: {
json: { '===': [{ var: 'data.action' }, 'oauth'] },
},
},
{
type: 'textfield',
label: 'Save in state',
key: 'state',
weight: 112,
tooltip: 'The state you wish to save the submission under when this button is pressed. Example "draft" would save the submission in Draft Mode.',
placeholder: 'submitted',
input: true,
conditional: {
json: { '===': [{ var: 'data.action' }, 'saveState'] },
},
},
{
type: 'checkbox',
input: true,
inputType: 'checkbox',
key: 'saveOnEnter',
label: 'Save On Enter',
weight: 113,
tooltip: 'Use the Enter key to submit form.',
conditional: {
json: { '===': [{ var: 'data.action' }, 'submit'] },
},
},
{
type: 'checkbox',
input: true,
inputType: 'checkbox',
key: 'showValidations',
label: 'Show Validations',
weight: 115,
tooltip: 'When the button is pressed, show any validation errors on the form.',
conditional: {
json: { '!==': [{ var: 'data.action' }, 'submit'] },
},
},
{
type: 'textfield',
label: 'Button Event',
key: 'event',
input: true,
weight: 120,
tooltip: 'The event to fire when the button is clicked.',
conditional: {
json: { '===': [{ var: 'data.action' }, 'event'] },
},
},
{
type: 'textfield',
inputType: 'url',
key: 'url',
input: true,
weight: 120,
label: 'Button URL',
tooltip: 'The URL where the submission will be sent.',
placeholder: 'https://example.form.io',
conditional: {
json: { '===': [{ var: 'data.action' }, 'url'] },
},
},
{
type: 'datagrid',
key: 'headers',
input: true,
weight: 130,
label: 'Headers',
addAnother: 'Add Header',
tooltip: 'Headers Properties and Values for your request',
components: [
{
key: 'header',
label: 'Header',
input: true,
type: 'textfield',
},
{
key: 'value',
label: 'Value',
input: true,
type: 'textfield',
}
],
conditional: {
json: { '===': [{ var: 'data.action' }, 'url'] },
},
},
{
type: 'textarea',
key: 'custom',
label: 'Button Custom Logic',
tooltip: 'The custom logic to evaluate when the button is clicked.',
rows: 5,
editor: 'ace',
input: true,
weight: 120,
placeholder: "data['mykey'] = data['anotherKey'];",
conditional: {
json: { '===': [{ var: 'data.action' }, 'custom'] },
},
},
{
type: 'select',
key: 'theme',
label: 'Theme',
input: true,
tooltip: 'The color theme of this button.',
dataSrc: 'values',
weight: 140,
data: {
values: [
{ label: 'Primary', value: 'primary' },
{ label: 'Secondary', value: 'secondary' },
{ label: 'Info', value: 'info' },
{ label: 'Success', value: 'success' },
{ label: 'Danger', value: 'danger' },
{ label: 'Warning', value: 'warning' },
],
},
},
{
type: 'select',
key: 'size',
label: 'Size',
input: true,
tooltip: 'The size of this button.',
dataSrc: 'values',
weight: 150,
data: {
values: [
{ label: 'Small', value: 'sm' },
{ label: 'Medium', value: 'md' },
{ label: 'Large', value: 'lg' },
],
},
},
{
type: 'textfield',
key: 'leftIcon',
label: 'Left Icon',
input: true,
placeholder: 'Enter icon classes',
tooltip: "This is the full icon class string to show the icon. Example: 'fa fa-plus'",
weight: 160,
},
{
type: 'textfield',
key: 'rightIcon',
label: 'Right Icon',
input: true,
placeholder: 'Enter icon classes',
tooltip: "This is the full icon class string to show the icon. Example: 'fa fa-plus'",
weight: 170,
},
{
type: 'select',
input: true,
weight: 180,
label: 'Shortcut',
key: 'shortcut',
tooltip: 'Shortcut for this component.',
dataSrc: 'custom',
valueProperty: 'value',
customDefaultValue: () => '',
template: '{{ item.label }}',
data: {
custom(context) {
return BuilderUtils.getAvailableShortcuts(
_.get(context, 'instance.options.editForm', {}),
_.get(context, 'instance.options.editComponent', {})
);
},
},
},
{
type: 'checkbox',
key: 'block',
label: 'Block Button',
input: true,
weight: 155,
tooltip: 'This control should span the full width of the bounding container.',
},
{
type: 'checkbox',
key: 'disableOnInvalid',
label: 'Disable on Form Invalid',
tooltip: 'This will disable this field if the form is invalid.',
input: true,
weight: 620,
},
];