enos-app-portal-sdk
v0.0.16
Published
App portal SDK
Downloads
81
Readme
ENOS-APP-PORTAL 前端 SDK
⚠ enos-app-portal-sdk 已经迁移到 @envision-digital/enos-app-portal-sdk,请前往新页面获取最新版本信息。
Installation
前端 SDK 基于 NPM,安装方式如下
yarn add enos-app-portal-sdk
或者
npm install enos-app-portal-sdk
渲染规则
如果在中文环境下选择进入 appId 为 ”“, menuCode 为 ""的应用,并且 state 为""的应用菜单,内容 window location 为:
https:<domain>/<配置的menu-URL>?appId=<appId>&menuCode=<menuCode>&categoryId=<categoryId>&state=<state>&locale=zh-CN
其中:categoryId 指的是应用所在的分类的 id,比如光伏为 22
API
框架本身提供 API,供内部 App 调用,主要用于用户信息获取和页面操作等
需要引入 SDK 模块。 此 SDK 时基于单向的 window 之间 Postmessage 和 Promise 搭建的 Iframe 之间双向数据通道,所以,所有 API 均返回Promise
。
import appPortalSDK from 'enos-app-portal-sdk';
1.getUserInfo
获取当前用户信息
调用示例
appPortalSDK.getUserInfo()
返回示例
{
createdTime: '2019-05-14 08:38:31.0',
description: 'test',
email: '[email protected]',
id: 'u15578231118721',
name: 'portal_test01',
nickName: 'quququ',
phone: '123232323'
phoneArea: '',
organization: {
id: 'o15578227985571',
name: 'portal_test01'
}
accessToken: "APP_PORTAL_S_zv7dFSHmevr6Xs64fGKm4MbKSRe79qeW"
}
2.getAppInfo
获取应用信息
调用示例, 调用当前应用信息
appPortalSDK.getAppInfo()
返回示例
{
"id": '123',
"name": 'wind',
"category":{
"id": 21,
"name": "Wind"
},
"permissions": [
{
"id": "cillu",
"code": "adipisicing",
"name": "magna"
},
{
"id": "cillu",
"code": "adipisicing",
"name": "magna"
}
],
"menus":[
{
"children": null
"code": "wyfMenu1"
"displayOrder": 1
"id": "24cb078c-a119-4fa9-aad8-7f161a2b53f2"
"name": "wyfMenu1"
"parentId": ""
"url": "https://localhost:9000/",
"children": [
{
"id": "ut incididunt ex",
"name": "ullamco veniam",
"url": "laborum aute minim mollit laboris",
"displayOrder": 12,
"parentId": "do ad sint elit"
},
{
"id": "aliquip sint",
"code": "laborum consequat exercitation in tempor",
"name": "ullamco veniam",
"url": "laborum aute minim mollit laboris",
"displayOrder": 12,
"parentId": "fugiat mollit"
}
]
}
3.getAppAssets
返回当前 app 对应的资产树
调用示例
appPortalSDK.getAppAssets();
返回示例
[
{
"id": "a1232-123123123",
"parentId": "",
"name": "asset-1",
"tag": "auth-unit"
"displayOrder": 0,
"children": [
{
"id": "a1232-sfasdfasdfasdf",
"parentId": "",
"name": "asset-1",
"tag": "auth-unit",
"displayOrder": 0,
"children": [
"id": "a1232-ss",
"parentId": "",
"displayOrder": 0,
"name": "asset-1",
"tag": "auth-unit",
"tags": [],
"children": []
],
"tags": []
}
],
"tags": [
{
"id": "xnka",
"key": "name",
"value": "auiqknd"
}
]
}
]
4.getLocale
获取当前语言信息
调用示例
appPortalSDK.getLocale();
‘en-US’ // 'zh-CN'
5.switchPage
APP 跳转页面
调用示例
appPortalSDK.switchPage({
appId: xxx,
appCode: xxxx, //开发者注册应用时,所填写的应用唯一标识符, appId 和 appCode 二选一, appCode优先级高于appI
menuCode: xxx,
openOnNewTab: false, // 是否在新窗口打开菜单
state:xxx // 会在绘制ifreame的时候加入url的query中
})
返回示例
true
6.setNotificationUrl
设置消息窗口
调用示例
appPortalSDK.setNotificationUrl(’https://xxx.xxx/ss.html‘)
返回示例
true
7.setHelpUrl
设置帮助信息
调用示例
appPortalSDK.setHelpUrl('https://xxx.xxx/ss.html');
返回示例
true
8.logout
调用示例
appPortalSDK.logout();
9.设置显示模式
setViewMode()
调用示例
appPortalSDK.setViewMode(0); // 默认模式,菜单和顶部导航都显示
appPortalSDK.setViewMode(1); // 隐藏菜单模式
appPortalSDK.setViewMode(2); // 大屏模式,隐藏菜单和顶部导航
10. 显示/隐藏菜单(保留用户可点击按钮)
调用示例
appPortalSDK.toggleMenu(boolean); // true / false
11.打开外部链接
openLink(link)
12.获取当前支持的语言列表
getAvailableLocales()
13. 获取当前主题
getTheme()
14.getStructureByApp
返回用户在当前app内的可见组织结构列表
调用示例
appPortalSDK.getStructureByApp();
返回示例
[
{
"id": "a1232-123123123",
"parentId": "",
"name": "asset-1",
"displayOrder": 0,
"description": "ajkxnamedyh"
"tags": {
"key1": "value1"
}
}
]
15.getStructureByDetail
返回可见组织结构的资产详情, 与getStructureByApp搭配使用可用于切换资产树
调用示例
appPortalSDK.getStructureByDetail(structureRootId);
返回示例
同3.getAppAssets
16.setBeforeLeave
设置页面离开前二次确认弹窗信息
调用示例
appPortalSDK.setBeforeLeave(true, 'xxxxxx'); // 页面离开前需要二次确认弹窗,弹窗自定义提示信息“xxxxxx”
appPortalSDK.setBeforeLeave(false); // 页面离开前不需要二次确认弹窗(默认状态)
17.useDrawer
唤起App Portal抽屉
调用示例
appPortalSDK.useDrawer(urlData, componentData);
urlData = {
url: 'xxxx', // 抽屉内部打开的页面地址
openNewUrl: 'xxxxxxxxxx' // 点击新页面打开按钮时在浏览器新页面打开的页面地址
}
componentData = {
placement: 'right', // 'bottom'/'right', 默认bottom
title: 'title',
subTitle: 'subTitle',
width: '60%', // placement='right'时设置有效, 默认'70%'
height: '60%', // placement='bottom'时设置有效, 默认'80%'
showNewOpen: false, // 是否展示新页面打开按钮, 默认true
theme: 'WHITE', // 'DARK'/'WHITE', 默认为App Portal当前主题色
maskClosable: 'true', // 点击遮罩层时抽屉是否可关闭, 默认false
destroyOnClose: 'false' // 关闭时是否销毁抽屉内部子元素, 默认true
}
18.useModal
唤起App Portal弹窗
调用示例
appPortalSDK.useModal(urlData, componentData, type = 1);
urlData = {
url: 'xxxx', // 弹窗内部打开页面地址
}
componentData = {
title: 'title',
size: 'large', // 'small'/'medium'/'large', 弹窗大小, 用于设置宽度, 默认medium
height: 340, // 弹窗内容高度, 设置后弹窗高度范围为200px-600px, 若超出或不足弹窗高度范围, 按极值展示
theme: 'WHITE', // 'DARK'/'WHITE', 默认为App Portal当前主题色
maskClosable: 'true', // 点击遮罩层时弹窗是否可关闭, 默认false
destroyOnClose: 'false' // 关闭时是否销毁弹窗内部子元素, 默认true
}
type = 1 / 2 // 1代表普通弹窗,2代表二次确认弹窗
19.showMessage
展示接口调用的提示信息
调用示例
appPortalSDK.showMessage(type = 'success', 'message'); // type = 'success'/'failed'/'warning'
版本依赖
SDK版本 | app portal版本 ---------|---------- 0.0.16 | >=2.3.14 0.0.15 | >=2.3.10
Release Notes:
V0.0.16
- add useDrawer function and useModal function
- add showMessage function
V0.0.15
- add getStructureByApp function and getStructureByDetail function
- add setBeforeLeave function
V0.0.14
- 添加兼容性处理
- 此版本建议配合 GA2.2.0版本App Portal 使用
V0.0.13
- add getTheme function
v0.0.11
- add getAvailableLocales function
- remove 404 check
v0.0.9
- 当app portal 不是顶层window的时候,没法接受信息bug
- 修改随机数规则,防止同一个Promise.all 调用多次相同方法key一致的问题
v0.0.5
- 增加
switchPage
在新窗口打开菜单选项 - 添加
openLink
选项
V0.0.4
- 页面跳转支持通过应用CODE跳转
V0.0.3
- 增加 toggleMenu 接口
v0.0.2
- 混淆压缩代码
- 添加检验机制,检验是否在 APP-PORTAL 中使用,如果不是理解 reject
- 代码结构调整
v0.0.
- 提供基于 ES5 的 SDK Module
- 新增大屏全屏模式接口
- 改变菜单 URL 配置规则,可配置相对路径
- 渲染添加 appId,menuCode, categoryId,locale 参与在内容 query 中
- 优化加载和调用速度
- 修改 readme 信息
=========================
ENOS-APP-PORTAL Frontend SDK
⚠ enos-app-portal-sdk has migrated to @envision-digital/enos-app-portal-sdk,Please go to the new page for the latest version information.
Installation
Front end SDK is based on NPM, and the installation method is as follows:
yarn add enos-app-portal-sdk
OR
npm install enos-app-portal-sdk
Rendering rules
If you are using a Chinese environment, appId refers to the "", menuCode refers to the "" application, state refers to the "" application menu, and the content window URL is:
https:<domain>/<configured menu-URL>? appId=<appId>&menuCode=<menuCode>&categoryId=<categoryId>&state=<state>&locale=zh-CN
Note: categoryId refers to the ID of the category of the application ID. For example, the category ID for solar is 22.
API
The framework itself provides APIs that can be called by internal apps. They are mainly used for user information acquisition or page operations.
You need to connect the SDK module. This development tool will create a promised data channel which is based on the postmessage
API and ES6 promise.
import appPortalSDK from 'enos-app-portal-sdk';
1.getUserInfo
Acquire current user's information
Call example
appPortalSDK.getUserInfo()
Return example
{
createdTime: '2019-05-14 08:38:31.0',
description: 'test',
email: '[email protected]',
id: 'u15578231118721',
name: 'portal_test01',
nickName: 'quququ',
phone: '123232323'
phoneArea: '',
organization: {
id: 'o15578227985571',
name: 'portal_test01'
}
accessToken: "APP_PORTAL_S_zv7dFSHmevr6Xs64fGKm4MbKSRe79qeW"
}
2.getAppInfo
Acquire app information
Call example, where the current app's information is called
appPortalSDK.getAppInfo()
Return example
{
"id": '123',
"name": 'wind',
"category":{
"id": 21,
"name": "Wind"
},
"permissions": [
{
"id": "cillu",
"code": "adipisicing",
"name": "magna"
},
{
"id": "cillu",
"code": "adipisicing",
"name": "magna"
}
],
"menus":[
{
"children": null
"code": "wyfMenu1"
"displayOrder": 1
"id": "24cb078c-a119-4fa9-aad8-7f161a2b53f2"
"name": "wyfMenu1"
"parentId": ""
"url": "https://localhost:9000/",
"children": [
{
"id": "ut incididunt ex",
"name": "ullamco veniam",
"url": "laborum aute minim mollit laboris",
"displayOrder": 12,
"parentId": "do ad sint elit"
},
{
"id": "aliquip sint",
"code": "laborum consequat exercitation in tempor",
"name": "ullamco veniam",
"url": "laborum aute minim mollit laboris",
"displayOrder": 12,
"parentId": "fugiat mollit"
}
]
}
3.getAppAssets
Return the asset tree of the current app
Call example
appPortalSDK.getAppAssets();
Return example
[
{
"id": "a1232-123123123",
"parentId": "",
"name": "asset-1",
"tag": "auth-unit"
"displayOrder": 0,
"children": [
{
"id": "a1232-sfasdfasdfasdf",
"parentId": "",
"name": "asset-1",
"tag": "auth-unit",
"displayOrder": 0,
"children": [
"id": "a1232-ss",
"parentId": "",
"displayOrder": 0,
"name": "asset-1",
"tag": "auth-unit",
"tags": [],
"children": []
],
"tags": []
}
],
"tags": [
{
"id": "xnka",
"key": "name",
"value": "auiqknd"
}
]
}
]
4.getLocale
Acquire the current language information
Call example
appPortalSDK.getLocale();
‘en-US’ // 'zh-CN'
5.switchPage
Switch app pages
Call example
appPortalSDK.switchPage({
appId: xxx,
appCode: xxxx, //When a developer registers an app, he/she needs to enter either the appId or the appCode. appCode takes precedence over appId.
menuCode: xxx,
openOnNewTab: false, //Whether to open the page on a new tab
state: xxx // To be added to the URL query when rendering iframe
})
Return example
true
6.setNotificationUrl
Set the notification URL
Call example
appPortalSDK.setNotificationUrl(’https://xxx.xxx/ss.html‘)
Return example
true
7.setHelpUrl
Set the Help URL
Call example
appPortalSDK.setHelpUrl('https://xxx.xxx/ss.html');
Return example
true
8.logout
Call example
appPortalSDK.logout();
9. Set the view mode
setViewMode()
Call example
appPortalSDK.setViewMode(0); // The default mode. This mode displays the menu and the top navigation bar.
appPortalSDK.setViewMode(1); // This mode hides the menu.
appPortalSDK.setViewMode(2); // This mode hides the menu and the top navigation bar. It is suitable for display on big screens.
10. Show/hide the menu (retaining buttons that users can click)
Call example
appPortalSDK.toggleMenu(boolean); // true / false
11. Open external links
openLink(link)
12.get Available Locales
getAvailableLocales()
13. get current theme
getTheme()
14.getStructureByApp
Return the visible organization structure list of the current user by app
Call example
appPortalSDK.getStructureByApp();
Return example
[
{
"id": "a1232-123123123",
"parentId": "",
"name": "asset-1",
"displayOrder": 0,
"description": "ajkxnamedyh"
"tags": {
"key1": "value1"
}
}
]
15.getStructureByDetail
Return the asset details for the visible organization structure. Can be used with getStructureByApp to switch asset trees.
Call example
appPortalSDK.getStructureByDetail(structureRootId);
Return example
Same as 3.getAppAssets
16.setBeforeLeave
Set the information of the second confirmation modal before leaving the page
Call example
appPortalSDK.setBeforeLeave(true, 'xxxxxx'); // Before leaving the page, need show a modal to confirm whether to leave, and the custom prompt message is "xxxxxx"
appPortalSDK.setBeforeLeave(false); // Not show the confirmation modal before leaving the page(default state)
17.useDrawer
Raise App Portal Drawer
Call example
appPortalSDK.useDrawer(urlData, componentData);
urlData = {
url: 'xxxx', // The URL of the page opened inside the drawer
openNewUrl: 'xxxxxxxxxx' // The URL of the page opened in the new page of the browser when the newOpen button is clicked
}
componentData = {
placement: 'right', // 'bottom'/'right', the default is bottom
title: 'title',
subTitle: 'subTitle',
width: '60%', // The setting is valid when placement='right', the default is '70%'
height: '60%', // The setting is valid when placement='bottom', the default is '80%'
showNewOpen: false, // Whether to display the newOpen button, the default is true
theme: 'WHITE', // 'DARK'/'WHITE', the default is the current theme color of the App Portal
maskClosable: 'true', // Whether to close the Drawer when clicking on the mask, the default is false
destroyOnClose: 'false' // Whether to destroy the inner child elements of the drawer when it is closed, the default is true
}
18.useModal
Raise App Portal Modal
Call example
appPortalSDK.useModal(urlData, componentData, type = 1);
urlData = {
url: 'xxxx', // The URL of the page opened inside the Modal
}
componentData = {
title: 'title',
size: 'large', // 'small'/'medium'/'large', used to set the modal width, the default is medium
height: 340, // The content height of the modal. After setting, the height range of the modal is 200px-600px. If over or under the height range of the modal, it will be displayed according to the extreme value
theme: 'WHITE', // 'DARK'/'WHITE', the default is the current theme color of the App Portal
maskClosable: 'true', // Whether to close the Modal when clicking on the mask, the default is false
destroyOnClose: 'false' // Whether to destroy the inner child elements of the Modal when it is closed, the default is true
}
type = 1 / 2 // 1 represents a normal Modal, 2 represents a double confirm Modal
19.showMessage
Display the prompt message of the interface call
Call example
appPortalSDK.showMessage(type = 'success', 'message'); // type = 'success'/'failed'/'warning'
Version Dependency
SDK version | app portal version ---------|---------- 0.0.16 | >=2.3.14 0.0.15 | >=2.3.10
Release Notes:
V0.0.16
- add useDrawer function and useModal function
- add showMessage function
V0.0.15
- add getStructureByApp function and getStructureByDetail function
- add setBeforeLeave function
V0.0.14
- add compatibility handling
- This version is recommended to be used with the App Portal of version GA2.2.0
V0.0.13
- add getTheme function
v0.0.11
- add getAvailableLocales function
- remove 404 check
v0.0.5
- Added the option to open a page on a new tab for
switchPage
. - Added the
openLink
option.
V0.0.4
- Added support for switching pages by using appCode.
V0.0.3
- Added toggleMenu API.
v0.0.2
- Obfuscated the compression code.
- Added verification to check if an application is running in the app portal. If it is not running, SDK functions will reject the request.
- Tweaked the code structure.
v0.0.
- Provided an SDK Module based on ES5.
- Added API for big-screen mode and full-screen mode.
- Modified the menu URL configuration rules to enable relative paths.
- Added appId, menuCode, categoryId, and locale to content queries for rendering.
- Enhanced load and call speeds.
- Modified the README content.