AppSuite:Writing a simple application with embedded iframe: Difference between revisions

From Open-Xchange
No edit summary
No edit summary
Line 5: Line 5:
__TOC__
__TOC__


==Add app to the launcher==
==Provide an iframe for the content area==


To display an additional App in the AppLauncher, the property „topbar“ = true has to be set in the manifest.json file of the app.
Developing an additional app with an iframe for the content area is quite easy.
To define the order position use the index value in the manifest.json file.
All it needs is a manifest file manifest.json and the app file main.js.


==reorder  / remove Apps from AppLauncher==
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 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 wich should be available in the AppLauncher.
To make use of the provided helper function io.ox/core/tk/iframe has to be required in the define section.
Example: io.ox/core//topbar/order=io.ox/mail,io.ox/contacts,io.ox/portal
An app wich is not listed here ain’t available in the AppLauncher.


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


Developing an additional app wich provide an iframe for the content area is quite easy.
    'use strict';
All it needs is a manifest file
manifest.json


and the app file main.js
    var iframeApp = createIframeApp({
It is convention to name your main application file main.js.
        name: 'com.example',
        title: gt('Hallo, World!'),
        pageTitle: gt('Hallo, World!'),
        domain: 'https://www.example.com/',
        cssNamespace: 'hallo_world',
        acquireToken: true
    });


Both should be located in an designated folder in the apps folder.  
    return {
In this example the namespace com.example will be used. (apps/com.example)
        getApp: iframeApp.getApp
    };
});
</pre>


To make use of the provided helper function io.ox/core/tk/iframe has to be required in the define section.
The following option for creating the app are available:
The following option for creating the app are available:
         name: 'com.example‘, // the name of the app
         name: 'com.example‘, // the name of the app
         title: gt('Hallo, World!‘), // the title of the app as used in the AppLauncher
         title: gt('Hallo, World!‘), // the title of the app as used in the AppLauncher
         pageTitle: gt('Hallo, World!‘), // the page Title
         pageTitle: gt('Hallo, World!‘), // the page Title
         domain: 'https://ox6-dev.open-xchange.com/', // the domain wich should be used for the iframe  
         domain: 'https://www.example.com/', // the domain which should be used for the iframe  
         cssNamespace: 'hallo_world‘ // a css class used for namespacing,
         cssNamespace: 'hallo_world‘ // a css class used for namespacing,
         acquireToken: true // generates a login token and appends it to the supplied url
         acquireToken: true // generates a login token and appends it to the supplied url


Make sure you build the app (grunt clean default)
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.

Revision as of 06:51, 13 May 2015

API status: In Development

Writing a simple application with an embedded iframe

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.

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
    };
});

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.

{
    "title": "Hallo, World!",
    "company": "external",
    "icon": "/images/icon.png",
    "category": "Dev",
    "settings": false,
    "index": 10000,
    "topbar": true
}

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.