My first back end view

In this tutorial, we will develop a basic plugin to display a view in our plentymarkets 7 back end. Only basic knowledge of creating and editing files in your IDE as well as using plentymarkets is necessary to develop this plugin.

Follow the steps and learn how to create your first view that displays Hello World! in the plentymarkets back end.

Step 1: Creating the plugin files

In our previous tutorials, you learned how to set up the folder structure for template and payment plugins. Our new plugin has a slightly different structure. You still find the src folder containing the plugin source code. One new piece of the plugin puzzle is the ui folder. Another imperative part for back end plugins is the ui.json file.

MyFirstView/
    ├── src/
    │   └── Providers/
    │       └── MyFirstViewServiceProvider.php
    │
    ├── ui/
    │   └── index.html
    │
    ├── plugin.json // plugin information
    └── ui.json // back end information

Step 2: Filling the source files

We start by creating the plugin.json file. We will also need a ui.json, as well as a ServiceProvider in the src folder of our plugin and a index.html file in the ui folder. Create these files and copy the code examples.

Code for the plugin.json

MyFirstView/plugin.json
{
    "name": "MyFirstView",
    "description": "My first back end view",
    "namespace": "MyFirstView",
    "author": "Your name",
    "type": "backend",
    "serviceProvider": "MyFirstView\\Providers\\MyFirstViewServiceProvider"
}

Code for the ui.json

MyFirstView/ui.json
{
    "defaultEntryPoint": "index.html",
    "namespace": "MyFirstView",
    "menuEntries": [
        {
        "label": "Hello World",
        "menu": "start",
        "urlKey": "hello-world",
        "entryPoint": "index.html"
        }
    ]
}

Code for the ServiceProvider

MyFirstView/src/Providers/MyFirstViewServiceProvider.php
<?php

namespace MyFirstView\Providers;

use Plenty\Plugin\ServiceProvider;

class MyFirstViewServiceProvider extends ServiceProvider
{
    public function register()
    {

    }
}

Code for the index.html

MyFirstView/ui/index.html
<h1>Hello World!</h1>

Bonus step: Adding more content

Saying Hello to the world is nice, but let's take it a step further. We will create a resources folder and add a GIF file that will be linked and shown in our view.

  1. Create a resources folder.
  2. Create an images folder in the resources folder.
  3. Save a file in the images folder, e.g. YOUR-FAVOURITE.gif.
  4. Open the index.html file.
  5. Enter the image that you want to display in your back end view into this file and save the file.
    → We simply enter <img src="../images/YOUR-FAVOURITE.gif">.

Getting a clear view

After creating the plugin, we have to add our new plugin to the plentymarkets inbox. Then, we deploy the plugin in a plugin set. Finally, after reloading the plentymarkets back end, go to the Start menu and click on Hello World. Your plugin view will open.

Is this article helpful?

 

Thank you for your Feedback

you can close this field now!