The implementation method of sub-application embedding in enterprise Mobile Portal

In the enterprise mobile portal, such as the positive work, can support the third application of the embedding, let the Mobile Portal unlimited expansion of more features: work reports, mobile OA, attendance, announcements and so on. How do I embed a sub-application? This article will give you a detailed introduction to the implementation method developed using Appcan.

Above is the enterprise mobile portal in the sub-application embedded interface, when we click on the click Area (remove the navigation below) will enter the sub-application, in other words is the entrance of the sub-application. To achieve the above functions, we use the Uexappstoremgr plugin for processing.

1. initializing the Uexappstoremgr plugin

Uexappstoremgr.open (STOREIP);//storeip the store address provided for EMM,

this address, if not written in code, can also be set on a packaged switch in co-development, and the Uexappstoremgr plugin provides an address method for getting this configuration

Here's how:

Uexappstoremgr.cbgetappstorehost = function (a,b,c) {

C is the address configured on the co-development

}

Uexappstoremgr.getappstorehost ();

2. Get the App list

uexappstoremgr.cbgetapplist = function (mid,type,data) {

//Returns the list information for the app, including the type, whether it's installed, the version, and so on, adding processing code here, usually notifying the page showing the app that shows the app list

}

var datajson={"type": "Searchapplist", "Key": ""};//get all apps when type is Installappfromalllist is get installed app

Uexappstoremgr.getapplist (Json.stringify (Datajson));

3. app launch or download

Uexappstoremgr provides method Loadwidget, this method automatically handles widgets and native type of application, if no download will be downloaded automatically, if downloaded, the native type will automatically start, Widget types can start widgets in the Loadwidget callback method. The code is as follows:

Uexappstoremgr.cbloadwidget = function (A, B, c) {

var obj = Json.parse (c);

var status = Obj.status;

Different processing code according to status

if (status = = 0) {

} else if (status = = 1) {

Appcan.window.openToast (' opening ');

opening = 1;

Uexwidget.cbstartwidget = function (Opid, dataType, data) {

opening = 0;

Appcan.window.closeToast ();

}

Uexwidget.startwidget (obj.data.appId, ' 10 ', ', parameter, ' + ', obj.data.appKey);

} else if (status = = 2) {

Uexappstoremgr.loadwidget (Obj.data);

}

}

Uexappstoremgr.loadwidget (JSON);//json the JSON string for each piece of data to get the list, just pass in.

If the download is not installed, a callback is available to prompt the user

Uexappstoremgr.onstartdownload = function () {

Uexappstoremgr.cbgetprogress = function (A, B, c) {

Here c is the progress of the download

}

}

Because the type of app is also a Web type, if this type can handle itself, such as open a new window, open a floating window in a new window, the URL of the floating window is the web address.

4. Get a list of cards

This plugin also provides a way to get a list of cards, the card information list contains application information, so the relevant launch application can refer to the above method.

Uexappstoremgr.cbgettiles = function (A, B, c) {

The card information configured on the EMM is obtained here and is then displayed for self-processing

}

Uexappstoremgr.gettiles ();

The list of cards that this method obtains is the underlying data that displays the topmost image.

5. parsing card data display

The returned card data is as follows:

{

"Status": "OK",

"Applist": [{

"AppKey": "xxxxx",

"AppId": "xxxxx",

"Iconloc": "XXX",//icon address

"Name": "Customer Relationship Management",

"Curversion": "00.00.0018",

"Pkgurl": "Xxx.zip",//child app package address

"Apptype": "Tools",

"Appcategory": "Appcanwgt",

"MaxVersion": "00.00.0018",

"Installversion": "00.00.0008",

"SHORTIMG1": "",

"ShortImg2": "",

"SHORTIMG3": "",

"Tileslist": [{

"DefaultTab": true,

"Icon": "",

"param": {//Card specific data

"Cardtype": "Spare",

"CardId": "Crm_card",

"Describe": "Create customer, contact, assign sales opportunity",

"Cardbtn": [{

"Operation": "Top,refresh,delete",

"Type": "Collapse"

}],

"Header": {

"Headericon": "http"

},

"Content": [{

"Label": "Clue",

"url": "Http://xxxx",

"Refresh": "86400000"

},

{

"Label": "Customer",

"url": "Http://xxxx",

"Refresh": "86400000"

},

{

"Label": "Opportunity",

"url": "Http://xxxx",

"Refresh": "86400000"

}]

},

"StartPage": "",

"Systime": 0,

"TabURL": "",

"Template": "Create customer, contact, assign sales opportunity",

"Tilesid": "28",

"Tilespath": "",

"Tilesname": "CRM",

"Uistyle": "",

"Version": "1"

}]

}]

}

In the above data, the tileslist is the specific card display data.

The front-end code displays specific styles based on this data. The data in the Tileslist is configured in the EMM.

6. Data Source Configuration

This image is an application interface in the EMM Environment application management, where the relevant application card is added and the card is in XML format. Based on the card interface gets to this XML configuration, which is the data in Tileslist.

XML style:

<?xml version= "1.0" encoding= "Utf-8" standalone= "no"?>

<widget appid= "1" version= "00.00.0000" >

<item>

<ICON>ICON.PNG</ICON>//PC-side icon

<tabUrl></tabUrl>

<refreshtime>86400000</refreshtime>//Card Refresh Time

<name> Enterprise CIS</NAME>//PC End title name

<defaulttab>true</defaulttab>//whether the default display to the first page card

<version>v1</version>//version

<param> Specific Parameters </param>

</item>

</widget>

The specific parameters are as follows:

{//Card specific data

"Cardtype": "Standby",//card type: Entrance quick entry, others are cards, not currently processed for other types

"CardId": "Crm_card",//card unique identification, but also the ID of the card in the first page div

"Describe": "Create customer, contact, assign sales opportunity",

"Cardbtn": [{

"Operation": "Top,refresh,delete",//sticky, refresh, delete

"Type": "Collapse"//Combo button------"BTN"//Support single button

}],

"Header": {

"Headericon": "http"

},

"Content": [{

"Label": "Clue",

"url": "Http://xxxx", the content path under this heading

"Refresh": "86400000"

},

{

"Label": "Customer",

"url": "Http://xxxx",

"Refresh": "86400000"

},

{

"Label": "Opportunity",

"url": "Http://xxxx",

"Refresh": "86400000"

}]

}

When the cards are configured, you also configure roles, permissions, and so on on the Emm to control card access. Developers according to the card parameters display card (i.e.: sub-application portal), set up the event processing call sub-application, is through the above 3rd to start, download and other operations to complete.

The implementation method of sub-application embedding in enterprise Mobile Portal