• Document Up to Date

Crafter Studio Full Screen Plugin Example

Here we’ll take a look at an example of creating a Full Screen Plugin for the plugin host page using the Vanilla example

For more information on the plugin host, see here

For this example, as outlined in the vanilla example referenced above, we will need a project created using the Website  Editorial Blueprint. We’ll name the project editorial-neue.

  1. The first thing we have to do is to create the folder structure where we will be placing the JS file for our vanilla plugin. We’ll follow the convention listed in UI Plugin Directory Structure. For our example, CATEGORY is apps and the NAME is example-vanilla

    In a local folder, create the descriptor file for your plugin craftercms-plugin.yaml with the plugin.id set to org.craftercms.plugin.vanilla, then create the following folder structure:

    Dashboard Plugin Directory Structure
    <plugin-folder>/
  craftercms-plugin.yaml
  authoring/
    static-assets/
      plugins/
        org/
          craftercms/
            plugin/
              vanilla/
                apps/
                  example-vanilla/

    We will be placing the JS file implementing the plugin host page plugin under the vanilla-plugin folder. For our example, the <plugin-folder> is located here: /users/myuser/myplugins/vanilla-plugin

    Here’s the plugin descriptor file we’ll be using (click on the triangle on the left to expand/collapse):

    Plugin descriptor file for vanilla example.
     1# This file describes a plugin for use in CrafterCMS
 2
 3# The version of the format for this file
 4descriptorVersion: 2
 5
 6# Describe the plugin
 7plugin:
 8  type: site
 9  id: org.craftercms.plugin.vanilla
10  name: Vanilla Plugin Host Example
11  tags:
12    - test
13  version:
14    major: 4
15    minor: 0
16    patch: 0
17  description: A simple plugin host example
18  website:
19    name: Plugin Host Vanilla Example
20    url: https://github.com/craftercms/authoring-ui-plugin-examples/tree/master/packages/example-vanilla
21  media:
22    screenshots:
23      - title: CrafterCMS
24        description: CrafterCMS Example Plugin
25        url: "https://raw.githubusercontent.com/craftercms/site-plugin-example/master/.crafter/logo.svg"
26  developer:
27    company:
28      name: CrafterCMS
29      email: info@craftercms.com
30      url: https://craftercms.com
31  license:
32    name: MIT
33    url: https://opensource.org/licenses/MIT
34  crafterCmsVersions:
35    - major: 4
36      minor: 0
37      patch: 1
38  crafterCmsEditions:
39    - community
40    - enterprise

  2. We’ll copy the JavaScript file index.js found here for our plugin

  3. After placing your plugin file, the plugin may now be installed for testing/debugging using the crafter-cli command copy-plugin.

    Vanilla plugin host page plugin directory/files

    When running a crafter-cli command, the connection to CrafterCMS needs to be setup via the add-environment command. Once the connection has been established, we can now install the plugin to the project editorial-neue by running the following:

    ./crafter-cli copy-plugin -e local -s editorial-neue --path /users/myuser/myplugins/vanilla-plugin

  4. Let’s take a look at our plugin in action by entering in your browser the following:

    http://localhost:8080/studio/plugin?site=editorial-neue&type=apps&name=example-vanilla&pluginId=org.craftercms.plugin.vanilla

Below is our plugin host page:

Vanilla plugin host page in action