BaseForm

Props

Prop name	Description	Type	Values	Default
formFieldJson	the json object containing all the field information incl. x-attrs custom field for placeholder, field type, etc. (for further documentation and configuration options see further down below slots)	object	-
valueList	the values for each field if any already present	object	-	{}
language	set current language	string	-	'en'
availableLocales	provide information about all available languages	array	-	[]
formId	an id for field groups to still have unique field ids	string	-	''
formStyle	define additional style for the form should be an object e.g. { 'padding-top': 0 }	object	-	{}
fieldsWithTabs	define fields (specify field name!) for which tabs should be shown	array	-	[]
fieldIsLoading	enter the field name of a field that is currently fetching autocomplete results	string	-	''
dropDownLists	provide an object that contains the options list for all fields with autocomplete / chips input for field type group provide a nested object with field names as properties and an array for each field to ensure the correct options are assigned even if field names within different groups are identical	object	-	{}
showErrorIcon	define if error icon should be shown. for an example on how it looks on an individual form field see BaseInput	boolean	-	false
clearable	if true a remove icon will be shown allowing to remove all input at once. for an example on how it looks on an individual form field see BaseInput	boolean	-	false
fieldProps	provide an object with settings and properties for each field. This takes an object with the field name as properties with the props nested. { [fieldName1]: { required: false, ... }, [fieldName2]: { ... } } find the possible variables at the respective input components: BaseInput BaseAutocompleteInput BaseMultilineTextInput BaseChipsInput BaseChipsBelow BaseDateInput BaseToggle special case repeatable fields: the following field props can be set individually per repeated field: errorMessage, invalid, isActive, isLoading, linkedListOption, activeTab the field property value should be set as object specifying the field index as key: { [fieldIndex]: [value to be set] } (e.g. { required: { 0: false }})	object	-	{}
renderHeaderAs	in case the field form_group_title was added to the x-attrs field, this is is rendered as a header above the form and here the HTML tag may be defined.	string	-	'div'
validationTexts	define validation texts to be displayed below form field if input is invalid. for an example see BaseInput	object	-	{ text: { min: 'Value must be greater than or equal to {value}.', max: 'Value must be less than or equal to {value}.', minLength: 'Text must be at least {value} character(s) long.', maxLength: 'Text cannot be longer than {value} characters.', }, chips: { required: 'Select an option.', } }
identifierPropertyName	specify the object property that should be used as identifier. used for chips input as well as dropdowns.	string	-	'source'
labelPropertyName	specify the object property that should be used as value to be displayed. used for chips input as well as dropdowns.	string	-	'label'
assistiveText	this prop gives the option to add assistive text for screen readers properties: Options for inputs type autocomplete, chips, chips-below: loaderActive: text that is announced when options are being fetched (prop isLoading is set true) Options for inputs type chips: optionToRemoveSelected: text read when option is marked active for removal (by using backspace in empty input field). string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName]) Options for inputs type chips, chips-below: resultsRetrieved: text that is announced when results were retrieved (drop down list changed) optionAdded: text read when option was added to the selected list. string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName]) optionRemoved: text read when option was removed from the selected list. string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName])	object	-	{ loaderActive: 'loading.', resultsRetrieved: '{number} options in drop down.', optionAdded: 'option {label} added to selected list.', optionToRemoveSelected: 'option {label} from selected list marked for removal. Press delete or backspace to remove.', optionRemoved: 'option {label} removed.' }

Methods

validate

Trigger public validate function for each form component Note: Currently a validation function is only implemented for baseChipsBelow

Return

Type	Description
boolean	forms error state

Events

Event name	Properties	Description
form-mounted
fetch-autocomplete	value string - the string to autocomplete name string - the name of the field source string - the url to request the data from equivalent ?string - string specified for related fields. e.g. for contributor roles equivalent is contributor parentFields ?string[] - in case the autocomplete event originates from a subform the subform id's (field property names) are specififed in this array (most nested property last)	triggered if field has an autocomplete functionality (chips-input, autocomplete-input, chips-below-input)
input-complete	undefined string, number, Object, Array - the updated value	event emitted once an input was completed (e.g. an option selected in chips input or an enter key triggered in BaseInput or after a date was validated)
values-changed	undefined Object[] - the changed value list undefined Object - the field information of the changed field	event triggered when the values of a field were altered or a form field was added or removed

Slots

Name	Description	Bindings
label-addition	Slot to allow for additional elements on the right side of the label row <div> (e.g. language tabs))	field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added) group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names index number - the array index of field values
pre-input-field	slot to add elements within the form field but in a row before the actual input field. for an example see BaseInput	field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added) group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names index number - the array index of field values
input-field-addition-before	Slot to allow for additional elements in the input field <div> (before <input>)	field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added) group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names index number - the array index of field values
input-field-inline-before	to add elements directly inline before the input (contrary to input-field-addition-before this does not wrap. for an example see BaseInput	field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added) group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names index number - the array index of field values
input-field-addition-after	for adding elements after input	field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added) group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names index number - the array index of field values
post-input-field	for adding elements at the end covering the whole height	field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added) group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names index number - the array index of field values
error-icon	use a custom icon instead of standard error/warning icon
remove-icon	use a custom icon instead of standard remove icon
below-input	below-input slot added to e.g. add drop down	field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added) group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names index number - the array index of field values
drop-down-entry	customize the form field drop down options	field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added) group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names option object - the option object

---

Apart from standard openAPI (opens new window) fields the form creation relies heavily on the custom field x-attrs (a custom specification exension (opens new window)).
Following options are available:

attribute	relevant for	default*	allowed values	description
hidden	all	False	True, False	indicate if this data attribute should be considered for form creation (e.g. true for id)
field_format	all	full	full, half, third	specify if the field should fill full width, half or a third of the space in a form row (in case it is a half field make sure it has a second 'half' field as well, otherwise the space will be empty) Caveat: if field is multiply-able this value needs to be full
field_type	all	text	text, autocomplete, chips, chips-below, date, multiline, group, boolean	which kind of field should be shown front-end: text: simple text field autocomplete: text field with autocomplete functionality (source property needed!) chips: input field with options (optional: dynamic autocomplete) that creates chips out of selected options (if single or multi-select chips will be determined automatically from field type being an array or object (see below)) chips-below: same as chips, however chips are not added inline but below the input field date: a date field (different formats - decided from the OpenAPI definition (see below)) multiline: a multiline text field group: indicates that the fields specified within should be grouped boolean will create a toggle element integer creates a number field with integer numbers allowed float will create a number field with float values allowed.
placeholder	all	-	{string, Object}	Add a placeholder displayed in the input field A {string} for all fields except date fields - there it should be an {object} with date and (if necessary) time attributes that contain the relevant string
order	all	this should be specified for all fields otherwise sorting will be random	{number}	this will specify the order in which the fields are displayed in the form. If field_format is half or third a number can be skipped in order to not completely fill the row.
source	chips, chips-below, autocomplete	-	an API endpoint	if the field has a autocomplete functionality (autocomplete field or dynamic chips inputs (dynamic_autosuggest = true) or options (dynamic_autosuggest = false) this route is required to fetch these options (the base url for the API is specified in the front end configuration)
source_*	chips, chips-below	-	an API endpoint	as above, to specify additional sources (URLs) for prefetching (e.g. used for text field property type --> source_type or field property roles --> source_roles)
prefetch	chips, chips-below	[]	e.g. source	specify the attributes that contain an URL where options should be prefetched (=for chips inputs that are not dynamic!) (for the example above e.g. source, source_types, source_roles)
set_label_language	chips	False	True, False	specify if the field data have language specific content (e.g. { 'en': 'xxx', 'de': 'yyy' }) (e.g. true for languages or materials fields)
date_format	date	day	day, month, year, date_year, date_month_year	the format of the date field, if day, month or year it will only be possible to enter those, if date_year or date_month_year switch buttons will be displayed to allow switching between day and year and date, month and year format respectively
dynamic_autosuggest	chips	False	True, False	define if chips should have a dynamic autocomplete --> this means matching results are live fetched from the API on user input
allow_unknown_entries	chips	False	True, False	define if only options available in the chips input drop down can be used or user can just enter any string
sortable	chips, chips-below	False	True, False	should chips be sortable
additional_prop_required	chips-below	False	True, False	should additional prop options be required
default_role	chips	-	a contributors uri (as defined in voc bench / skosmos) e.g. http://base.uni-ak.ac.at/portfolio/vocabulary/software_developer	this is relevant for all contributors related fields, in order to save the relevant role, a uri needs to be specified here
equivalent	chips	-	a field name, e.g. contributors	attribute to indicate that this field is connected to more general field (atm only used for contributors)
show_label	groups	False	True, False	indicates if field groups should have a label
subtext	toggle	-	{object}	specify object with at mandatory property value and optional property url (external link) or source (internal link) - (atm only used for fieldType: boolean)
form_group	form-groups*	-	{number}	this attribute is relevant for the BaseFormGroups wrapper component which can be used to achieve visually distinct form sections.
form_group_title	form-groups*	-	{string}	this attribute is relevant for the BaseFormGroups wrapper component and creates a header above the form section
min	integer, float	-	number	specify the minimum value to accept for this number input
max	integer, float	-	number	specify the maximum value to accept for this number input
decimals	float	-	number	specify the number of decimal places for this number input
text_before	all	-	string	specify a text or a character which is prepended to this entry
text_after	all	-	string	specify a text or a character which is appended to this entry

*'form-groups' is not a settable field_type but means this attribute is relevant for forms wrapped in the BaseFormGroups component.

In case certain field names are mentioned (e.g. texts, roles, contributors) this refers to the Portfolio API (opens new window) and is just used as an example here.

Additionally, some features are derived from the OpenAPI definitions:

• Repeatable input fields: fields with field_type other than chips and chips-below will be repeatable when the OpenAPI definition type is {array}.
• Single or multi-select chips input fields: chips input fields are single select when the definition type is {object} (otherwise should be {array}).
• chips input fields: are draggable as soon as they are multi-select but this can be overwritten via fieldProps.
• Multiline input fields: Will have an additional drop down when field_type is multiline and the OpenAPI json field properties have the property type included.
  Also language tabs can either be set via fieldProps or will be derived automatically if OpenAPI json properties include a language property.
• Date fields: fields are also rendered according to the type and properties of the OpenAPI definition:
  
  • type {string}: rendering a single date field.
  • type {object} with properties date_from and date_to: rendering a date range.
  • type {object} with properties date and time: rendering a date and a time field.
  • type {object} with properties date, time_from and time_to: rendering a single date field and time range fields.
  • type {object} with properties date_from, date_to, time_from and time_to: rendering date range fields and time range fields.
  • type {object} with properties time_from and time_to rendering a time range.
  • If none of these definitions are met a single date field will be rendered.
  • As specified above, all of these definitions could also be wrapped in type {array} to make the field(s) repeatable.
• Min or Max length: a min length error message will be triggered automatically if type is text if field minLength is set in the openAPI definition and the min length is not reached. maxLength will also be enforced if specified in the OpenApi definition.

Please note that this component should be rendered client side (important for SSR projects). So for example if you have a Nuxt project you will have to wrap the component in a <client-only> tag.

Demo

This is a basic (autocomplete functionality not working here) example how a form created from a openAPI (opens new window) standard could look like (to see the structure click 'view code')