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"
}
]
}
Updated about 1 year ago