Custom Sidebar Applications

Custom sidebar applications are full-page views that are accessible from Storyblok's space start page–that is, whenever you have not entered the Visual Editor. Thus, they are well-suited for functionality that needs to be embedded within Storyblok, but that does not need to integrate with the Visual Editor. Typically, plugins that do not assist in content editing should be created as custom sidebar applications. One example of a custom sidebar application is the Broken Links Checker, which scans the entire space for broken links:

Section titled Create a Custom Sidebar Application Create a Custom Sidebar Application

To create a custom sidebar application plugin, follow the tutorial on how to create a new plugin. When asked which type, select Sidebar.

When you have completed the entire tutorial and gotten the starter to run, enter the space and locate the button for the custom application in the sidebar:

The first time the tool is opened, an admin needs to approve it.

That should redirect you back to your plugin:

Section titled Integrate with the Management API Integrate with the Management API

Server-side code is able to send requests to the Management API. To do this, read the accessToken and spaceId from the http.IncomingMessage:

        
      const { query } = req
const sessionStore = sessionCookieStore(authHandlerParams)({ req, res })
const { accessToken, region, spaceId } = await sessionStore.get(query)
    

Note that @storyblok/app-extension-auth, which is included in all starters, appends the storyId and spaceId as query parameters whenever a page is loaded (in req.query). These are used to read the accessToken and region from the session store.

Using these values, you can perform requests with the Management API; for example:

        
      new StoryblokClient({
    oauthToken: `Bearer ${accessToken}`,
    region,
})
.get(`spaces/${spaceId.toString(10)}/stories`, {
    sort_by: 'updated_at:desc',
})
    

All starter projects include a similar example.