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.
- fire
- 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:
- client_id : client id (String) (required)
- client_secret : client secret (String) (required)
- authorizationUrl : auth url (String) (required when using implicit flow)
- authorizationToken : authorization token endpoint (String) (required when using implicit flow)
- authorizationlogoutUrl : oauth server logout endpoint (String) (required when using implicit flow)
- authorizationuserInfoUrl : oauth server profile endpoint (String) (required)
- 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)
- stateVariable : variable name to maintain state when using implicit flow (String) (required when using implicit flow)
- serviceApiUrl : platform services api url link (String) (required)
- logout_redirect_url : redirect url after user logouts (String) (required when using implicit flow)
- login_redirect_url : redirect url after user logins (String) (required)
- flowType: enum to initialize platform bar with the type of flow (values: "code" || "token") (String) (required)
- hostLabel : Any sample label text application wants to show on platform bar, generally Application name (String) (optional)
- 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)
- 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:
- client_id : client id (String) (required)
- client_secret : client secret (String) (required)
- authorizationUrl : auth url (String) (required when using implicit flow)
- authorizationToken : authorization token endpoint (String) (required when using implicit flow)
- authorizationlogoutUrl : oauth server logout endpoint (String) (required when using implicit flow)
- authorizationuserInfoUrl : oauth server profile endpoint (String) (required)
- 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)
- stateVariable : variable name to maintain state when using implicit flow (String) (required when using implicit flow)
- serviceApiUrl : platform services api url link (String) (required)
- logout_redirect_url : redirect url after user logouts (String) (required when using implicit flow)
- login_redirect_url : redirect url after user logins (String) (required)
- flowType: enum to initialize platform bar with the type of flow (values: "code" || "token") (String) (required)
- hostLabel : Any sample label text application wants to show on platform bar, generally Application name (String) (optional)
- 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)
- 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"),{});