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)
},