|
|
| Line 1: |
Line 1: |
| == Where and how to start ==
| | [] |
| Plugins are collected in the folder ui/apps/plugins. Start your new plugin there: Create a folder and in this folder, create two files: <tt>register.js</tt> (where everything happens) and <tt>manifest.json</tt>
| |
| | |
| | |
| == What are you going to do ==
| |
| Your plugin code can interact with the app suite is by way of extension points and extensions. Stated briefly an extension point is an invitation to contributing an implementation to a part of the UI. For example the contact detail view consists of an extension point that receives contributions in the form of renderers, that render different parts of the contact. Say, one for rendering the display name, one for the mail addresses, one for the postal addresses and so on. All these, in turn then, make up the contacts detail view. It is easy for plugins to affect this set of extensions. A plugin can contribute its own extension to an extension point, thereby rendering a different part of a contact or contributing a new button to work on a contact. A plugin can also disable existing extensions, thereby removing parts of the UI.
| |
| | |
| == Hans-On ==
| |
| === Register ===
| |
| As an example, let's add a new renderer to the contact detail view. Let's create a new file myplugin/apps/com.example/contacts/register.js:
| |
| | |
| <pre class="language-javacript">
| |
| define('com.example/contacts/register', ['io.ox/core/extensions'], function (ext) {
| |
| 'use strict';
| |
| | |
| ext.point('io.ox/contacts/detail').extend({
| |
| id: 'com-example-contact-reversename',
| |
| after: 'contact-details',
| |
| draw: function (baton) {
| |
| | |
| var name = baton.data.display_name;
| |
| var rev = name.split("").reverse().join("");
| |
| | |
| this.append(
| |
| $("<h1>").text(rev)
| |
| ));
| |
| }
| |
| });
| |
| });
| |
| </pre>
| |
| | |
| === Manifest ===
| |
| Next we have to make sure our code is actually loaded by the UI at the right moment. The right moment in our case is right before it loads the file apps/io.ox/contacts/view-detail, where the extension point is processed. For this, we need another [[AppSuite:UI_manifests_explained | manifest]] file at myplugin/apps/com.example/contacts/manifest.json:
| |
| | |
| <pre class="language-javacript">
| |
| {
| |
| namespace: "io.ox/contacts/view-detail"
| |
| }
| |
| </pre>
| |
| | |
| After writing your code, always [[AppSuite:GettingStarted#Building | build]] your javascript code to make apply.
| |
| See the [[AppSuite:GettingStarted#Development_cycle | development cycle]] to keep easy steps in mind you need while developing.
| |
| | |
| === Running a local backend? ===
| |
| | |
| If using a local backend, restart it to pick up on the changed manifest, or, for a remote backend, edit myplugin/src/manifests.js again so it reads:
| |
| | |
| <pre class="language-javacript">
| |
| define(function () {
| |
| return [
| |
| {
| |
| path: "com.example/main",
| |
| title: 'Hello World App'
| |
| },
| |
| {
| |
| path: "com.example/contacts/register",
| |
| namespace: "io.ox/contacts/view-detail"
| |
| }
| |
| ];
| |
| });
| |
| </pre>
| |
| | |
| reload the UI and navigate to a contact. It should contain the new section with the display name in reverse.
| |
| | |
| == Extension Points ==
| |
| Trouble [[AppSuite:Extending_the_UI_(Hands-on_introduction)#Trouble_finding_the_right_extension_point.3F | finding the right extension point]]?
| |
| Learn more about Extension points regarding [[AppSuite:Extension_points | these articles]].
| |
| == Stuck somewhere? ==
| |
| You got stuck with a problem while developing? OXpedia might help you out with the article about [[AppSuite:Debugging_the_UI | debugging the UI]].
| |