enos-app-portal-sdk

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: '[e-mail]',
  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

1. add useDrawer function and useModal function
2. add showMessage function

V0.0.15

1. add getStructureByApp function and getStructureByDetail function
2. add setBeforeLeave function

V0.0.14

1. 添加兼容性处理
2. 此版本建议配合 GA2.2.0版本App Portal 使用

V0.0.13

1. add getTheme function

v0.0.11

1. add getAvailableLocales function
2. remove 404 check

v0.0.9

1. 当app portal 不是顶层window的时候，没法接受信息bug
2. 修改随机数规则，防止同一个Promise.all 调用多次相同方法key一致的问题

v0.0.5

1. 增加 switchPage 在新窗口打开菜单选项
2. 添加 openLink 选项

V0.0.4

1. 页面跳转支持通过应用CODE跳转

V0.0.3

1. 增加 toggleMenu 接口

v0.0.2

1. 混淆压缩代码
2. 添加检验机制，检验是否在 APP-PORTAL 中使用，如果不是理解 reject
3. 代码结构调整

v0.0.

1. 提供基于 ES5 的 SDK Module
2. 新增大屏全屏模式接口
3. 改变菜单 URL 配置规则，可配置相对路径
4. 渲染添加 appId，menuCode， categoryId，locale 参与在内容 query 中
5. 优化加载和调用速度
6. 修改 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: '[e-mail]',
  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

1. add useDrawer function and useModal function
2. add showMessage function

V0.0.15

1. add getStructureByApp function and getStructureByDetail function
2. add setBeforeLeave function

V0.0.14

1. add compatibility handling
2. This version is recommended to be used with the App Portal of version GA2.2.0

V0.0.13

1. add getTheme function

v0.0.11

1. add getAvailableLocales function
2. remove 404 check

v0.0.5

1. Added the option to open a page on a new tab for switchPage.
2. Added the openLink option.

V0.0.4

1. Added support for switching pages by using appCode.

V0.0.3

1. Added toggleMenu API.

v0.0.2

1. Obfuscated the compression code.
2. Added verification to check if an application is running in the app portal. If it is not running, SDK functions will reject the request.
3. Tweaked the code structure.

v0.0.

1. Provided an SDK Module based on ES5.
2. Added API for big-screen mode and full-screen mode.
3. Modified the menu URL configuration rules to enable relative paths.
4. Added appId, menuCode, categoryId, and locale to content queries for rendering.
5. Enhanced load and call speeds.
6. Modified the README content.