@abhishek_bitpod/p10-platform-bar 中文文档教程

Question

p10 platformbar

How to install

在使用 platform bar 之前，您需要构建 platformbar 包文件。

• To create platform bar bundle files,
  • open command prompt move to platformbar root folder where package.json is present.
  • fire npm install (Note you need to have node.js installed on your system) command.
• After npm install is complete,
  • fire webpack command, after this command you will find the build js files and related files in dist folder.
• If you want to render Platformbar as a component in React Application use platformbar.p10platformbar.js and platformbar.css, for other JS Applications use show showplatformbar.p10platformbar.js and showplatformbar.css

USE in react Application

• 要在 React 应用程序环境中使用应用程序，请从“platformbar.p10platformbar.js”导入 {PlatformBar,PlatformServices}。

• 在使用 p10platformbar 之前，您需要初始化 PlatformService Api（基于 Promise 的 API，通常在 componentWillMount 中调用），它需要以下参数： <代码>javascript PlatformServices.initialize({ client_id: "", 客户秘密：“”， 授权网址：“”， 授权令牌：“”， authorizationlogoutUrl:"", authorizationuserInfoUrl:"", 代码流端点：{ 验证网址：“”， tokenURL:"", refreshTokenURL:"", 注销网址：“” }, 状态变量：“”， serviceApiUrl:"", 注销重定向网址：“”， login_redirect_url: "", 流量类型：“”， 主机标签：“”， 搜索：{ 关于搜索请求：功能， 搜索结果：{ 标签字段：“”， 关键字段：“” }, 在搜索结果中选择：函数 }, on_auth_state_change：函数 })

• 参数说明：

  1. client_id : client id (String) (required)
  2. client_secret : client secret (String) (required)
  3. authorizationUrl : auth url (String) (required when using implicit flow)
  4. authorizationToken : authorization token endpoint (String) (required when using implicit flow)
  5. authorizationlogoutUrl : oauth server logout endpoint (String) (required when using implicit flow)
  6. authorizationuserInfoUrl : oauth server profile endpoint (String) (required)
  7. codeFlowEndPoint : if application is using auth code flow then endpoints are defined by this object. (object) (required when usin auth code flow)
     • authenticateURL : takes the authentication/login endpoint of passport server (String) (required)
     • tokenURL : passport server endpoint to return token (String)(required)
     • refreshTokenURL : passport server endpoint to return refresh-token (String) (required)
     • logoutURL : passport server logout endpoint (String)(required)
  8. stateVariable : variable name to maintain state when using implicit flow (String) (required when using implicit flow)
  9. serviceApiUrl : platform services api url link (String) (required)
  10. logoutredirecturl : redirect url after user logouts (String) (required when using implicit flow)
  11. loginredirecturl : redirect url after user logins (String) (required)
  12. flowType: enum to initialize platform bar with the type of flow (values: "code" || "token") (String) (required)
  13. hostLabel : Any sample label text application wants to show on platform bar, generally Application name (String) (optional)
  14. search : If application want to use search bar from p10platform then include this param (object) (optional)
      • onsearchrequest : takes a function which is called whenever user types a text in searchbar, type text is passed as param to the function. (function) (required)
      • searchresults : search result provides the keys of label and key field of the search result. (object) (required)
      • onsearchresultselect : takes a function which is called when use selects a result, passing the key as first param, and selected item as the second.(function) (required)
  15. onauthstate_change : takes a function which is called whenever user login or logout of application. If user logins a state object is passed as param, if user logouts null is passed as param. (function) (required)

• 初始化 p10 platformbar 后，您可以通过将呈现为 jsx 组件来呈现 p10 平台栏。

USE in JS Application

• 要在 JS 环境中使用应用程序，请在您的应用程序中包含“showplatformbar.p10platformbar.js”文件。

• 包含文件后，您将获得一个全局对象 p10platformbar 然后您需要调用平台服务 api 初始化方法。 <代码>javascript p10platformbar.PlatformServices.initialize({ client_id: "", 客户秘密：“”， 授权网址：“”， 注销重定向网址：“”， login_redirect_url: "", 主机标签：“”， 搜索：{ 关于搜索请求：功能， 搜索结果：{ 标签字段：“”， 关键字段：“” }, 在搜索结果中选择：函数 }, on_auth_state_change：功能 })

• 参数说明：

  1. client_id : client id (String) (required)
  2. client_secret : client secret (String) (required)
  3. authorizationUrl : auth url (String) (required when using implicit flow)
  4. authorizationToken : authorization token endpoint (String) (required when using implicit flow)
  5. authorizationlogoutUrl : oauth server logout endpoint (String) (required when using implicit flow)
  6. authorizationuserInfoUrl : oauth server profile endpoint (String) (required)
  7. codeFlowEndPoint : if application is using auth code flow then endpoints are defined by this object. (object) (required when usin auth code flow)
     • authenticateURL : takes the authentication/login endpoint of passport server (String) (required)
     • tokenURL : passport server endpoint to return token (String)(required)
     • refreshTokenURL : passport server endpoint to return refresh-token (String) (required)
     • logoutURL : passport server logout endpoint (String)(required)
  8. stateVariable : variable name to maintain state when using implicit flow (String) (required when using implicit flow)
  9. serviceApiUrl : platform services api url link (String) (required)
  10. logoutredirecturl : redirect url after user logouts (String) (required when using implicit flow)
  11. loginredirecturl : redirect url after user logins (String) (required)
  12. flowType: enum to initialize platform bar with the type of flow (values: "code" || "token") (String) (required)
  13. hostLabel : Any sample label text application wants to show on platform bar, generally Application name (String) (optional)
  14. search : If application want to use search bar from p10platform then include this param (object) (optional)
      • onsearchrequest : takes a function which is called whenever user types a text in searchbar, type text is passed as param to the function. (function) (required)
      • searchresults : search result provides the keys of label and key field of the search result. (object) (required)
      • onsearchresultselect : takes a function which is called when use selects a result, passing the key as first param, and selected item as the second.(function) (required)
  15. onauthstate_change : takes a function which is called whenever user login or logout of application. If user logins a state object is passed as param, if user logouts null is passed as param. (function) (required)

• 初始化 p10 platformbar 后，您可以通过调用 p10platformbar.mountPlatformbar() 函数来渲染 p10 平台栏，方法是提供要渲染平台栏的元素和道具。

  例如：p10platformbar.mountPlatformbar(document.getElementById("App"),{});