View source for AppSuite:Writing a simple application with embedded iframe

{{Stability-experimental}}

<div class="title">Writing a simple application with an embedded iframe</div>

__TOC__

==Provide an iframe for the content area==

Developing an additional app with an iframe for the content area is quite easy.
All it needs is a manifest file manifest.json and the app file main.js.

Both should be located in an designated folder in the apps folder. 
In this example the namespace 'com.example' will be used. (apps/com.example)

To make use of the provided helper function io.ox/core/tk/iframe has to be required in the define section.

<pre class="language-javascript">
define('com.example/main', [
    'io.ox/core/tk/iframe',
    'gettext!com.example'
], function (createIframeApp, gt) {

    'use strict';

    var iframeApp = createIframeApp({
        name: 'com.example',
        title: gt('Hallo, World!'),
        pageTitle: gt('Hallo, World!'),
        domain: 'https://www.example.com/',
        cssNamespace: 'hallo_world',
        acquireToken: true
    });

    return {
        getApp: iframeApp.getApp
    };
});
</pre>

The following option for creating the app are available:
        name: 'com.example‘, // the name of the app
        title: gt('Hallo, World!‘), // the title of the app as used in the AppLauncher
        pageTitle: gt('Hallo, World!‘), // the page Title
        domain: 'https://www.example.com/', // the domain which should be used for the iframe 
        cssNamespace: 'hallo_world‘ // a css class used for namespacing,
        acquireToken: true // generates a login token and appends it to the supplied url

Make sure you build the app (grunt clean default)

==Add app to the launcher==

To display an additional App in the AppLauncher, the property „'topbar': true has to be set in the manifest.json file of the app.
To define the order position use the index value in the manifest.json file.

<pre class="language-javascript">
{
    "title": "Hallo, World!",
    "company": "external",
    "icon": "/images/icon.png",
    "category": "Dev",
    "settings": false,
    "index": 10000,
    "topbar": true
}
</pre>

==reorder  / remove Apps from AppLauncher==

To define a custom order of the apps or remove an app from the AppLaucher the server-side setting topbar/order can be used to provide a comma-separated list of apps which should be available in the AppLauncher.

Example: io.ox/core//topbar/order=io.ox/mail,io.ox/contacts,io.ox/portal

An app which is not listed here ain’t available in the AppLauncher.