InputView (beta version)

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

The InputView Function creates HTML dynamic 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.

• InputView (beta version)

  • Parameters

  • Changes to the official schema

    • Available optional fields

    • fields and buttons as objects

    • button

      • Additional properties

      • Removed properties

    • submit

      • Additional properties

      • Removed properties

    • Customization of validation messages

    • Showing multiple fields on the same line

  • Additional field types

    • fileRead

    • fileUpload

    • separator

    • treeSelect

      • Customize label of selected treeSelect options

    • jsonViewer

  • Events

    • Type: change
      

    • Type: submit
      

    • Type: button
      

    • Type: treeSearch
      

      • Asynchronous options search for treeSelect (with async: true)

  • Example InputView setup

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

Available optional fields

The optional fields that are available in Graphileon are:

• cleave - Format input text content when you are typing
• image - Image select field (URL or upload in base64 string)
• selectEx - Select list
• rangeSlider - Range slider
• spectrum - Color picker
• switch - Switch field (toggle two values (on/off, yes/no, active/inactive)

fields and buttons as objects

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.

button

Additional properties

Key	Description	Default value	Possible values
action	Value used to trigger-match the button (this value is present on the trigger as (%).action when the button is clicked). See example for the submit field		String

Removed properties

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.

submit

Additional properties

Key	Description	Default value	Possible values
action	Value used to trigger-match the button (this value is present on the trigger as (%).action when the button is clicked). See example bellow		String
disableOnClick	If enabled, disables the field to prevent reuse.	false	true / false
throttle	Number of milliseconds the field will be temporarily disabled after every use.		integer

Example for action

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",
    ...
}

Removed properties

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.

validateAsync and validateDebounceTime settings are ignored because the change event validates the form everytime it's triggered. Set updateDelay parameter to the number of milliseconds to wait before an update (and validation) is triggered.

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"
      }
    }
  }

Showing multiple fields on the same line

Normally the view displays one input field per line. To split a line between multiple fields:

1. The space will be distributed using the 12 column grid system
2. Make sure the field definitions are adjacent
3. In each field definition add "styleClasses": "col-<x>" (replace <x> with a number from 1 to 12 representing the number of columns the field should occupy)

Additional field types

fileRead

fileRead can be used to load contents of local text files (CSV, JSON, TXT, etc.) into the application (frontend) without uploading them to a server. This field is not intended to be used with binary files (images, sounds, fonts, executables, etc.).

To customize the behaviour of the fileRead use the following properties in the field's schema:

Key	Description	Default value	Possible values
allowedMimeTypes	MIME types allowed for the file selected for read. If empty any MIME type is allowed	[]	Array of Strings
deniedMimeTypes	MIME types not allowed for the file selected for read.	[]	Array of Strings
maxSize	Maxmimum allowed size in bytes for the file selected for read	Infinity	Number
minSize	Minimum allowed size in bytes for the file selected for read	0	Number
icon	FontAwesome icon to show on the button to select the file.	folder-open	string as icon identifier/class

fileUpload

fileUpload is an URL input type field with an additional Upload button. Using the button one can upload a file to a preselected location (URL). If the upload finishes successfully, the input will be updated with the location (download URL) of the uploaded file.

To customize the behaviour of the uploadField use the following properties in the field's schema:

Key	Description	Default value	Possible values
allowedMimeTypes	MIME types allowed for the file selected for upload. If empty any MIME type is allowed	[]	Array of Strings
deniedMimeTypes	MIME types not allowed for the file selected for upload.	[]	Array of Strings
editable	Enables the ability to manually edit (or paste) the URL to the field	false	false / true
fileKey	Key used for the uploaded file in the POST-ed (upload) form data	file	nonempty string
formData	Addional data sent in the upload process. This data is send along with the file ({<fileKey>: <file-content>, ...formData}) to the upload endpoint	null	Object
maxSize	Maxmimum allowed size in bytes for the file selected for upload	Infinity	Number
minSize	Minimum allowed size in bytes for the file selected for upload	0	Number
params	Parameters used for the upload process. See jQuery Ajax settings. This allowes maximum customization of the upload process if needed.	{type: 'POST', url: '/api/file/create', processData: false, contentType: false, crossDomain: true, dataType: 'json'}	Object
urlFromResponse	Path to the download URL in the upload response or function used to calculate the download URL from the response	data.download_link	Object path as String or Function(response)
errorFromResponse	Function called to customize the error message when the upload fails	null	function(XHR)

separator

separator field type can be used to add a horizontal line to better visually separate two fields or two field sets.

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. There you can find the structure of the option records and also all the properties that can be configured for this field type.

Customize label of selected treeSelect options

The options for treeSelect can have the selectedLabel optional property. This can be used to customize the option's label when it is displayed in the selected options area.

jsonViewer

The jsonViewer field is an input field with powerful view options like showing structured JSON data with a value edit option or read-only. It is built on top of the Vue JSON Viewer library. There you can find the properties of jsonViewer.

Events

An InputView can emit the following events:

• change
• submit
• button
• treeSearch

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
data	Full data of the form	Object
fieldKey	Key of the field as defined in the schema	String
fieldPath	Path to the schema field definition	Array of string
isValid	Specifies if the data validation was successfull	Boolean
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

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
data	Full data from the form.	Object
errors	List of errors generated during data validation	Array of objects
field	Whole field definition of the used submit button	Object
fieldKey	Key of the field as defined in the schema	String
fieldPath	Path to the schema field definition	Array of string
isValid	Specifies if the data validation was successfull	Boolean

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
errors	List of errors generated during data validation	Array of objects
isValid	Specifies if the data validation was successfull	Boolean

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
data	Full data from the form.	Object
errors	List of errors generated during data validation	Array of objects
field	Whole field definition of the used treeSelect field	Object
fieldKey	Key of the field as defined in the schema	String
fieldPath	Path to the schema field definition	Array of string
isValid	Specifies if the data validation was successfull	Boolean
search	Search string entered by the user	String

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"
}