Integration Field-Type
In many cases, you will want to have more space for selecting content from a different API similar to how you can select different products in the image below. For this use case, we created an integration field-type starter kit: github.com/storyblok/storyblok-integration-field-starter
)
Getting Started
Start by cloning the repository and installing the dependencies.
$ git clone https://github.com/storyblok/storyblok-integration-field-starter.git
$ cd storyblok-integration-field-starter
$ npm i
Next, we need to create a new custom field-type in the Partner Portal. Click on Field-types {1} and the New button {2} and enter the name for your integration field-type {3}.
)
Next, we need to add the name of our new plugin to the src/Plugin.vue
file.
src/Plugin.vue
initWith() {
return {
// needs to be equal to your storyblok plugin name
plugin: 'my-integration',
item: null
}
},
Then start the development server.
npm run dev
To preview the field-type open the field-type in Storyblok, change the URL from https to http {1} and click the Enable local dev mode {2}. If your localhost is running, you should see the Open Selection Button {3}.
)
Now if you click Open Selection {3}, you should get a full window with a spinning loader, where you will be able to load your integration logic.
)
Integration Logic
The integration field-type makes use of field-type API events to open and close a modal within Storyblok. These events can be used in any field-type.
src/Plugin.vue
openSelection() {
this.modalIsOpen = true
this.$emit('toggle-modal', true)
},
closeSelection() {
this.modalIsOpen = false
this.$emit('toggle-modal', false)
},