@bitpod/p10-platform-bar NPM

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:

	```javascript
	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.

	```javascript
	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"),{});```
```