Input migrations

When the inputs declared in the manifest file of your UI Component are altered in a new version of the component, it may be necessary to do an "input migration" to make sure that components that were configured before the inputs changed, will not be causing any problems. For example by providing default values for any new input properties.

Example

Version 1 of this UI Component has a single input called name. In a newer version 2 of the component, the name input is replaced by two new inputs: firstName and lastName.

To ensure backwards compatibility, the component uses an input migration function which is passed as an option to the contextFactory. This context factory is just an alternative way for providing a ComponentContext instance to your component that allows for passing in options.

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script>
export default {
  name: 'my-component',
  props: ['context'],
  data() {
    return { name: '' };
  },
  created() {
    this.name = this.context.inputs.name;
  },
};
</script>

<style scoped></style>

{
  "main": "my-component.min.js",
  "version": "1",
  "sheetSettings": {
    "minCols": 1,
    "minRows": 2
  },
  "inputs": [
    {
      "key": "name",
      "type": "String",
      "label": "Name"
    }
  ]
}

<template>
  <h1>Hello, {{ firstName + ' ' + lastName }}!</h1>
</template>

<script>
export default {
  name: "my-component",
  props: ['contextFactory'],
  data() {
    return { firstName: '', lastName: '' };
  },
  created() {
    this.context = this.contextFactory({
      migrateInputs: inputs => {
        if ('name' in inputs) {
          const [firstName, lastName] = inputs.name.split(' ');
          return { firstName, lastName };
        }
        return inputs;
      }
    });
    this.firstName = this.context.inputs.firstName;
    this.lastName = this.context.inputs.lastName;
  },
};
</script>

<style scoped></style>

{
  "main": "my-component.min.js",
  "version": "2",
  "sheetSettings": {
    "minCols": 1,
    "minRows": 2
  },
  "inputs": [
    {
      "key": "firstName",
      "type": "String",
      "label": "First name"
    },
    {
      "key": "lastName",
      "type": "String",
      "label": "Last name"
    }
  ]
}