InputView (beta version)

Label: :IA_Function
Property: type: InputView
Inherits from: Function and View

The InputView Function creates HTML dinamic forms based on a defined schema.

The form can consist of various input widgets such as text boxes, textareas, file widgets, dropdowns, action and submit buttons. Changes on input widgets and presses on action buttons trigger events, which the users can use for their custom logic.

Please note that this is currently in BETA version so you should expect future breaking changes.

Parameters

InputView is build on top of the VueFormGenerator library.
The schema and data (model in VueFormGenerator) parameters are being relayed to VueFormGenerator and are well-documented in the official documentation.

Key Description Default value Possible values
data Initial values and data structure for the form's input fields (model in VueFormGenerator) Object
schema Form fields description Object
options Additional options for the forms behaviour (see) Object
updateDelay Amount of delay time in milliseconds before form change events are fired 500 Positive Number

Changes to the official schema

Keyed fields and buttons declaration

Following the official documentation fields should be an array (of field declarations). In order to make schema updates easier, in Graphileon, you can declare fields alternatively as an object. This way you can name (key) fields and target them with trigger updates (ex: $schema.fields.myField.options instead of $schema.fields.0.options).

This is also the case for field buttons. You can set the buttons property as an object, instead of an array.

action property for submit and buttons

Fields of type submit and buttons declaration have an additional action property that should be a string.

This value is present in the submit and button events and can be used to easily trigger match a button usage when you have multiple submit fields or mutliple buttons.

For example, for the field:

save: {
    type: 'submit',
    buttonText: 'Save',
    action: 'save'
}

the submit event will be:

{
    type: "submit",
    action: "save",
    field: {...},
    data: {...},
    isValid: true,
    errors: [...]
}

and trigger will be:

{
    type: "submit",
    action: "save",
    ...
}

onSubmit property for submit fields

The onSubmit property is set internally by Graphileon to trigger the submit event, so you should not set this property in the field declaration because it will be overwritten.

onclick property for field buttons

The onclick property is set internally by Graphileon to trigger the button event, so you should not set this property in the button's declaration because it will be overwritten.

Customization of validation messages

This page of the official VueFormGenerator documentation shows how to customize validation messages. This will not work in Graphileon.

To customize validation messages, in Graphileon, set the validator property of the field as an object similar to:

  {
    ...// other field properties
    validator: {
      validator: "string",
      messages: {
        fieldIsRequired: "The password is required!",
        textTooSmall: "Password must be at least {1} characters"
      }
    }
  }

Additional field types

treeSelect

treeSelect field is a select type input field with complex functionalities like: list select, tree dropdown select, multiple select, tag like selected values, normal and asynchronous search. It is built on top of the VueTreeselect library.

Events

An InputView can emit the following events:

Each of these events generates its own event data object. The structure of these event data objects is given below.

Type: change

Occurrence: Triggered when a user changes the data of any input field on the form.

Additional event properties (besides the inherited properties):

Key Description Possible values
key The name of input field on which the change has occurred. Value is the model property of the field definition which corresponds to the key (or path to the property) of the resulting data structure String
oldValue Previous value of the changed form field any
value Current updated value of the changed form field any
data Full data of the form Object

Type: submit

Occurrence: Triggered when a user clicks on a submit button.

Additional event properties (besides the inherited properties):

Key Description Possible values
action action property value of the used button (field) String
field Whole field definition of the used submit button Object
data Full data from the form. Object
isValid Specifies if the data validation was successfull Boolean
errors List of errors generated during data validation Array of objects

Type: button

Occurrence: Triggered when a user clicks on a field button (other than a submit).

Additional event properties (besides the inherited properties):

Key Description Possible values
action action property value of the used button String
button Whole field definition of the used button Object
data Full data from the form. Object
isValid Specifies if the data validation was successfull Boolean
errors List of errors generated during data validation Array of objects

Type: treeSearch

Occurrence: Triggered when a user uses the search functionality of a treeSelect field that has async: true. This event is used to trigger asynchronous (or server side) options searching or filtering.

Additional event properties (besides the inherited properties):

Key Description Possible values
search Search string entered by the user String
field Whole field definition of the used treeSelect field Object
data Full data from the form. Object
isValid Specifies if the data validation was successfull Boolean
errors List of errors generated during data validation Array of objects

Asynchronous options search for treeSelect (with async: true)

To set the result of the search you need to update, with a trigger, the field's options and forSearch properties. options should receive the list of options and forSearch the original search string.

For example if the user typed opt on a treeSelect field named search the updating trigger (to the InputView) should be:

  {
    "type": "success", // may vary
    "$_instance": "_previous",
    "$schema.fields.search.options": (%).data,
    "$schema.fields.search.forSearch": (%)._path.search
  }

Having:

  (%).data: [{id: 1, label: 'option 1'}, {id: 2, label: 'option 2'}, ...] // result of the search
  (%)._path.search: 'opt' // what user searched for; search property of the treeSearch event

Example InputView setup

Below is an example InputView setup used for the Quick Search functionality.

    
{
  "type": "InputView",
  "$data": "evaluate({
          store: 'application',
          entity: 'node',
          labels: [],
          type: null,
          property: null,
          value: null,
          limit: 50
      })",
  "$schema": "evaluate({
            fields: {
                store: {
                    type: \"select\",
                    label: \"Store\",
                    model: \"store\",
                    required: true,
                    hideNoneSelectedText: true,
                    values: map(
                        filter((@).stores,{type: 'neo4j'}),
                        (store) => ({id: store.name, name: store.name})
                    )
                },
                entity: {
                    type: \"radios\",
                    label: \"Find\",
                    model: \"entity\",
                    required: true,
                    hideNoneSelectedText: true,            
                    values: [
                        {value: \"node\", name: \"Nodes\"},
                        {value: \"relation\", name: \"Relationships\"}
                    ]
                },
                labels: {
                    type: \"treeSelect\",
                    label: \"With Labels\",
                    model: \"labels\",
                    multiple: true,
                    placeholder: '',
                    async: true,
                    cacheOptions: false,    
                    clearOnSelect: true,
                    options: []
                },
                type: {
                    type: \"treeSelect\",
                    label: \"With Type\",
                    model: \"type\",
                    placeholder: '',
                    cacheOptions: false,    
                    visible: false,
                    async: true,
                    options: []
                },
                property: {
                    type: \"treeSelect\",
                    label: \"Has Property\",
                    model: \"property\",
                    async: true,
                    cacheOptions: false,
                    disableFuzzyMatching: true,
                    options: [],
                    placeholder: '',
                },
                value: {
                    type: \"input\",
                    inputType: \"text\",
                    label: \"Has Value\",
                    model: \"value\"
                },
                limit: {
                    type: \"input\",
                    inputType: \"number\",
                    label: \"Limit\",
                    model: \"limit\",
                    value: 50,
                    min: 0,
                    required: true
                },
                submit: {
                    type: \"submit\",
                    buttonText: \"Show\",
                    buttons: [
                        {
                            label: 'Reset',
                            action: 'reset'
                        },
                        {
                            label: 'Cancel',
                            action: 'cancel'
                        }                
                    ]
                }
            }
        })",
  "name": "Quick Find"
}