Skip to content
On this page

Dynamic Config

We renamed Setters to Dynamic Config as it's purpose may be the same but its use has changed dramatically. Dynamic Options can be a URL or Function, similar to our Options.

String

html
<IuInput options="/api/endpoint/{<otherFieldValue>}/{<otherFieldValue>}"></IuInput>

For Endpoints we have come up with a solution where all you need to define is your targetUrl. Dynamic fields trigger new API calls whenever one of the given field(s) changes.

Function

vue
<!-- watch the location Field -->
<IuInput
  label="field"
  name="field"
  :dynamic-config="[
    'location',
    (newLocation) => {
      return {
        value: newLocation,
        validations: newLocation === 'berlin' ? 'min:10' : '',
        validationMessages: {
          min: '{field} muss schon länger sein',
        },
      }
    },
  ]"></IuInput>

Functions are a new way to define your Dynamic Configuration. We see this especially for Forms being built with our Components outside a WYSIWYG context.

Functions are defined as a tuple of field(s) to watch and a callback that return an object in the shape of the Response Schema. The field to watch can be a fieldName of your form or an array of fieldNames. Depending on that the callback receives a value or an array of values as an argument.

Response Schema

Value

json
{
  "value": "newValue"
}

Values can be set by returning the new value within the value key.

Validation

json
{
  "validations": "required|min:2",
  "validationMessages": {
    "required": "This Field is required.",
    "min": "This Field needs at least 2 Characters."
  }
}

Validations as well as their messages can be set by returning the new value within the validation and validationMessages key.

SubmitUrl

json
{
  "submit": "www.your-new-url.com"
}

the submit url can be overwritten with a given submit key's value.

INFO

This only works at Form context

min/max

json
{
  "min": "2010-12-24",
  "max": "+5D"
}

For Datefields like IuDateField and IuDatePicker you can also return min and max from dynamicConfig endpoints or functions to set the specific min/max values in the formats specified here. If you want to also update validation messages for the automatic registered validationRules you can set it under the validationMessages key as described above. The rules names are min_date and max_date.