# Angular back end UI

 The Terra-Components and the Plugin Terra-Basic have been deprecated and will no longer be maintained. Although you can still work with them, we recommend using Material components instead.

This page gives an introduction to back end UIs and its components.

First of all, some basics about Angular and its usage in plentymarkets:

• All plentymarkets UIs are Angular UIs.

• At the moment, we are using version 12.

• Angular is a Javascript framework for creating web, desktop and mobile applications.

• To develop Angular applications, you have to know Typescript, HTML and CSS.

• Angular applications use components.

• These components define different areas in the UI, where you can display static content or provide user inputs.

If you’re not familiar with Angular yet and want to find out more, refer to the Angular documentation.

All information about the back end menu entries is saved in a ui.json file. This file defines the entry points for the plugin. Views are then available at the respective menus.

The following example shows a basic ui.json:

ui.json
{
"defaultEntryPoint": "index.html",
"namespace": "MyPlugin",
{
"label": "Settings",
"urlKey": "basic-settings",
"entryPoint": "index.html?action=basic-settings"
},
{
},
{
"label": "Shipping settings",
"urlKey": "shipping-settings",
"entryPoint": "index.html?action=shipping-settings"
}
]
}

The following table lists the specific properties of your plugin’s menu entries.
Required All entries listed below are mandatory.

Property Explanation

defaultEntryPoint

The default entry point of your plugin

namespace

The following information is saved for a menu entry:

• label: plentymarkets displays the label as menu entry in the back end.

• menu: The menu the plugin accesses via an entry point.

• urlKey: The route for the view in our plentymarkets back end, e.g. http://your-plentystore.co.uk/plenty/ui-backend/start/hello-world.
Note: The URL key of the plugin may not contain any special characters except for hyphens.

• entryPoint: The entry point of your plugin

• icon: The icon for the menu entry in the system tree. If no icon is specified, the standard plugin icon is displayed. To not display any icon, use "icon": "none". Find a list of all icons on the Terra icons page.

## Integrating plugins into the back end

It is possible to seamlessly integrate your plugin into the plentymarkets back end. You can use entry points to add your plugin to the top navigation bar or routes to add it to the navigation tree of the Setup menu.

 Format for system tree path Note that all routes need an introducing system. Older routes beginning with settings will be mapped to match the new format. Since the new menu item for the system tree was renamed to 'Setup', the new full system tree path also starts with 'Setup'.