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.

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.

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.

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