|
|
| (49 intermediate revisions by 10 users not shown) |
| Line 1: |
Line 1: |
| '''Summary:''' This articles covers how to write a plugin that shows on the portal page. A portal plugin always gives a short overview on a piece of information (the so-called 'tile'). It can link a longer view that is opened when the tile is clicked, this we call the side pop-up. The side pop-up is optional.
| | The content on this page has moved to https://documentation.open-xchange.com/latest/ui/customize/portal-widget.html |
|
| |
|
| == Before we start: How to experiment efficiently==
| | Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition. |
| The AppSuite has a very efficient way of enabling or disabling potential plugins via manifests, which involves caching on the server side. This makes it somewhat cumbersome to just try things out, especially if you have not control over your server/backend and cannot restart it at will. Because of that, there is an array in io.ox/portal/widgets.js that is named DEV_PLUGINS. This will work around the caching mechanism.
| |
| | |
| == Where and how we start ==
| |
| Plugins are collected in the folder ui/apps/plugins. Create your new plugin there: Create a folder and in this folder, create two files: register.js (where everything happens) and manifest.json
| |
| | |
| | |
| == The simplest portal plugin: An advertisement ==
| |
| The simplest portal plugin comes without a side pop-up and shows static content on its tile. Two uses for this would be presenting an advertisement (or your daily creed, an often used check list....) or showing a link list (for example to other parts of an company's intranet that are not integrated into the AppSuite (yet)). We will now build an advertisement, which is just a picture.
| |
| | |
| The beauty of this is that we do not have any dependencies (like needing the file store), so the content of our manifest.json is rather simple:
| |
| | |
| <syntaxhighlight lang="javascript">
| |
| {
| |
| namespace: "portal"
| |
| }
| |
| </syntaxhighlight>
| |
| | |
| Our register.js is only slightly longer:
| |
| | |
| | |
| <syntaxhighlight lang="javascript">
| |
| define("plugins/portal/myAd/register",
| |
| ['io.ox/core/extensions'], function (ext) {
| |
| | |
| "use strict";
| |
| | |
| ext.point("io.ox/portal/widget/myAd").extend({
| |
| preview: function (baton) {
| |
| var content = $('<div class="content">').text("Buy stuff. It's like solid happiness.");
| |
| this.append(content);
| |
| }
| |
| });
| |
| | |
| ext.point('io.ox/portal/widget/myAd/settings').extend({
| |
| title: 'My advertisement',
| |
| type: 'myAd'
| |
| });
| |
| });
| |
| </syntaxhighlight>
| |
| | |
| | |
| == A typical portal plugin ==
| |
| A typical portal plugin uses the tile to display a short summary or teaser of its contents and uses a side-popup to show the whole content.
| |
| | |
| == Special switches ==
| |
| * unique
| |
| * unmovable
| |
| | |
| == Finishing touches ==
| |
| Now that you have learned all there is about portal plugins, it is time to clean up. Have you removed the plugin from DEV_PLUGINS? Good. Maybe we can interest you in [[AppSuite:i18n | preparing the text for readers from other countries]]? Splendid! Now you are good to go.
| |
| | |
| [[Category:AppSuite]]
| |
| [[Category:UI]]
| |