@bitpod/p10-platform-bar

p10 platformbar

How to install

Before using platform bar, you need to build platformbar bundle files.

• 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

• To use Application in react Application environment import {PlatformBar,PlatformServices} from 'platformbar.p10platformbar.js'.

• Before using p10platformbar you need to initialize the PlatformService Api(Promise based API, generally called in componentWillMount) which requires following params:

   PlatformServices.initialize({
   	client_id: "",
   	client_secret: "",
   	authorizationUrl: "",
   	authorizationToken:"",
   	authorizationlogoutUrl:"",
   	authorizationuserInfoUrl:"",
   	codeFlowEndPoint:{
   		authenticateURL:"",
   		tokenURL:"",
   		refreshTokenURL:"",
   		logoutURL:""
   	},
   	stateVariable: "",
   	serviceApiUrl:"",
   	logout_redirect_url: "",
   	login_redirect_url: "",
   	flowType:"",
   	hostLabel:"",
   	search:{
   		onsearchrequest:function,
   		searchresults:{
   			labelField:"",
   			keyField:""
   		},
   		onsearchresultselect:function
   	},
   	on_auth_state_change: function
   })

• Params Description:

  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. logout_redirect_url : redirect url after user logouts (String) (required when using implicit flow)
  11. login_redirect_url : 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. on_auth_state_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)

• After initializing p10 platformbar you can render p10 platform bar by Rendering as a jsx component.

USE in JS Application

• To use Application in JS environment include 'showplatformbar.p10platformbar.js' file in your application.

• After including file you will get a global object p10platformbar then you need to call platform services api initialize method.

   p10platformbar.PlatformServices.initialize({
   	client_id: "",
   	client_secret: "",
   	authorizationUrl: "",
   	logout_redirect_url: "",
   	login_redirect_url: "",
   	hostLabel:"",
   	search:{
   		onsearchrequest:function,
   		searchresults:{
   			labelField:"",
   			keyField:""
   		},
   		onsearchresultselect:function
   	},
   	on_auth_state_change: function
   })

• Params Description:

  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. logout_redirect_url : redirect url after user logouts (String) (required when using implicit flow)
  11. login_redirect_url : 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. on_auth_state_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)

• After initializing p10 platformbar you can render p10 platform bar by calling p10platformbar.mountPlatformbar() function by providing, element in which platform bar is to be rendered and props.

  e.g.: p10platformbar.mountPlatformbar(document.getElementById("App"),{});