npm - @os1-platform/console-ui-react - Versions diffs - 0.8.4 → 0.9.0 - Mend

@os1-platform/console-ui-react 0.8.4 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/commonjs/aaa/index.js +13 -10
package/dist/commonjs/aaa/index.js.map +1 -1
package/dist/commonjs/types/aaa/index.d.ts +1 -1
package/package.json +2 -2
package/readme.md +355 -192

package/dist/commonjs/aaa/index.js CHANGED Viewed

@@ -85,12 +85,12 @@ var HeaderAndSideBar = function (props) {
     var _b = (0, react_1.useState)(true), load = _b[0], setLoad = _b[1];
     (0, react_1.useEffect)(function () {
         if (!props.isLoading) {
-            var console_1 = console_ui_js_1.ConsoleUiInit.getInstance(props.clientId, props.loginRedirectPath, props.logoutRedirectPath, props.authurl, props.orgShortName, props.devTenantId, props.appId, props.userManager);
+            var console_1 = console_ui_js_1.ConsoleUiInit.getInstance(props.clientId, props.loginRedirectPath, props.logoutRedirectPath, props.authurl, props.orgShortName, props.devTenantId, props.appId, props.userManager, props.interTabCommunicationRequired);
             setConsoleInstance(console_1);
             console_1.getSubscription();
         }
     }, [props.isLoading]);
-    document === null || document === void 0 ? void 0 : document.addEventListener("OS1-SubscriptionRequestCompleted", function (e) {
+    document === null || document === void 0 ? void 0 : document.addEventListener('OS1-SubscriptionRequestCompleted', function (e) {
         setLoad(false);
     });
     (0, react_1.useEffect)(function () {
@@ -131,10 +131,11 @@ var HeaderAndSideBar = function (props) {
     return ((0, jsx_runtime_1.jsx)(exports.ConsoleUIContext.Provider, __assign({ value: consoleInstance }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ id: "headerAndSidebar" }, { children: props.children })) })));
 };
 var OS1Provider = function (props) {
-    var _a = (0, react_1.useState)(''), authUrl = _a[0], setAuthUrl = _a[1];
-    var _b = (0, react_1.useState)(''), orgShortName = _b[0], setOrgShortName = _b[1];
+    var _a;
+    var _b = (0, react_1.useState)(''), authUrl = _b[0], setAuthUrl = _b[1];
+    var _c = (0, react_1.useState)(''), orgShortName = _c[0], setOrgShortName = _c[1];
     // const [tenantDns, setTenantDns] = useState('');
-    var _c = (0, react_1.useState)(false), isMountedRef = _c[0], setisMountedRef = _c[1];
+    var _d = (0, react_1.useState)(false), isMountedRef = _d[0], setisMountedRef = _d[1];
     var authHelper = new console_ui_js_1.AuthHelper();
     var authUrls;
     (0, react_1.useEffect)(function () {
@@ -154,16 +155,18 @@ var OS1Provider = function (props) {
             });
         })();
     }, []);
-    return (isMountedRef ?
-        (0, jsx_runtime_1.jsx)(OS1Provider2, { clientId: props.clientId, loginRedirectPath: props.loginRedirectPath, logoutRedirectPath: props.logoutRedirectPath, devTenantId: props.devTenantId, appId: props.appId, controls: props.controls, authUrl: authUrl, authHelper: authHelper, orgShortName: orgShortName, props: props }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+    return isMountedRef ? ((0, jsx_runtime_1.jsx)(OS1Provider2, __assign({ clientId: props.clientId, loginRedirectPath: props.loginRedirectPath, logoutRedirectPath: props.logoutRedirectPath, devTenantId: props.devTenantId, appId: props.appId, controls: props.controls, authUrl: authUrl, authHelper: authHelper, orgShortName: orgShortName, interTabCommunicationRequired: (_a = props === null || props === void 0 ? void 0 : props.interTabCommunicationRequired) !== null && _a !== void 0 ? _a : false }, props))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
 };
 exports.OS1Provider = OS1Provider;
 var OS1Provider2 = function (props) {
+    var _a;
     //console.log(props);
-    var userManager = (0, react_1.useMemo)(function () { return new console_ui_js_1.AAA(props.clientId, props.loginRedirectPath, props.logoutRedirectPath, props.devTenantId, props.authUrl); }, []);
+    var userManager = (0, react_1.useMemo)(function () {
+        return new console_ui_js_1.AAA(props.clientId, props.loginRedirectPath, props.logoutRedirectPath, props.devTenantId, props.authUrl);
+    }, []);
     var value = '';
     //console.log('userManager', userManager);
-    var _a = (0, react_1.useState)(true), isLoading = _a[0], setIsLoading = _a[1];
+    var _b = (0, react_1.useState)(true), isLoading = _b[0], setIsLoading = _b[1];
     var isMountedRef = (0, react_1.useRef)(false);
     var authHelper = props.authHelper;
     (0, react_1.useEffect)(function () {
@@ -227,7 +230,7 @@ var OS1Provider2 = function (props) {
             isMountedRef.current = false;
         };
     }, [window.location, userManager]);
-    return ((0, jsx_runtime_1.jsx)(exports.AuthContext.Provider, __assign({ value: value }, { children: (0, jsx_runtime_1.jsx)(HeaderAndSideBar, __assign({ userManager: userManager, isLoading: isLoading, loader: props.loader, devTenantId: props.devTenantId, controls: props.controls, appId: props.appId, authUrl: props.authUrl, orgShortName: props.orgShortName }, { children: props.props.children })) })));
+    return ((0, jsx_runtime_1.jsx)(exports.AuthContext.Provider, __assign({ value: value }, { children: (0, jsx_runtime_1.jsx)(HeaderAndSideBar, __assign({ userManager: userManager, isLoading: isLoading, loader: props.loader, devTenantId: props.devTenantId, controls: props.controls, appId: props.appId, authUrl: props.authUrl, orgShortName: props.orgShortName, interTabCommunicationRequired: (_a = props === null || props === void 0 ? void 0 : props.interTabCommunicationRequired) !== null && _a !== void 0 ? _a : false }, { children: props.children })) })));
 };
 // export { Toast, Modal };
 var OS1Toast = function (props) {

package/dist/commonjs/aaa/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/aaa/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AAA, ConsoleUiInit, OS1HttpClient, OS1Components, functionBoundOption, functionBoundAutoCompleteOption, AuthHelper, OS1DropDownDefaultValue} from '@os1-platform/console-ui-js';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { ModalProps } from '../components/modal/interface';\nimport { ToastProps } from '../components/toast/interface';\n\nexport const AuthContext = React.createContext<any \| undefined>(undefined);\nexport const ConsoleUIContext = React.createContext<any>(undefined);\n\nconst HeaderAndSideBar = (props: any) => {\n const [consoleInstance, setConsoleInstance] = useState<any>(null);\n const [load, setLoad] = useState<boolean>(true);\n\n useEffect(() => {\n if (!props.isLoading) {\n const console = ConsoleUiInit.getInstance(\n props.clientId,\n props.loginRedirectPath,\n props.logoutRedirectPath,\n props.authurl,\n props.orgShortName,\n props.devTenantId,\n props.appId,\n props.userManager\n );\n\n setConsoleInstance(console);\n console.getSubscription()\n }\n }, [props.isLoading]);\n\ndocument?.addEventListener(\"OS1-SubscriptionRequestCompleted\", (e: Event) => {\n setLoad(false)\n } )\n\n useEffect(()=>{\n consoleInstance?.renderHeaderAndSidebar('headerAndSidebar', props.controls);\n }, [load])\n\n if (props.isLoading \|\| load) {\n if (props.loader) {\n return props.loader;\n } else {\n const keyframes = `\n @-webkit-keyframes spin {\n 0% {\n -webkit-transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n }\n }\n `;\n const styleSheets = Array.from(document.styleSheets).filter(\n (styleSheet) =>\n !styleSheet.href \|\| styleSheet.href.startsWith(window.location.origin)\n );\n for (let style of styleSheets) {\n if (style instanceof CSSStyleSheet && style.cssRules) {\n style.insertRule(keyframes, style.cssRules.length);\n }\n }\n const loaderStyle = () => ({\n marginTop: '50vh',\n marginLeft: '50vw',\n border: '12px solid #F3F3F3',\n borderRadius: '50%',\n borderTop: '12px solid grey',\n width: '40px',\n height: '40px',\n animationName: 'spin',\n animationDuration: '2s',\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n });\n return <div style={loaderStyle()}></div>;\n }\n }\n //console.log(consoleInstance, props);\n return (\n <ConsoleUIContext.Provider value={consoleInstance}>\n <div id=\"headerAndSidebar\">{props.children}</div>\n </ConsoleUIContext.Provider>\n );\n};\n\nconst OS1Provider = (props: any) => {\n const [authUrl, setAuthUrl] = useState('');\n const [orgShortName, setOrgShortName] = useState('');\n // const [tenantDns, setTenantDns] = useState('');\n let [isMountedRef, setisMountedRef] = useState<boolean>(false);\n \n const authHelper = new AuthHelper();\n let authUrls:{tenantUrl: string, orgName:string };\n useEffect(() => {\n (async function () {\n authUrls = await authHelper.getKeyCloakAuthority(\n window.location.hostname,\n props.devTenantId\n );\n setAuthUrl(authUrls.tenantUrl);\n setOrgShortName(authUrls.orgName)\n setisMountedRef(true)\n })();\n }, []);\n\n return (\n isMountedRef?\n <OS1Provider2\n clientId={props.clientId}\n loginRedirectPath={props.loginRedirectPath}\n logoutRedirectPath={props.logoutRedirectPath}\n devTenantId={props.devTenantId}\n appId={props.appId}\n controls={props.controls}\n authUrl={authUrl}\n authHelper = {authHelper}\n orgShortName= {orgShortName}\n props={...props}\n />:<></>\n );\n};\nconst OS1Provider2 = (props: any) => {\n //console.log(props);\n const userManager = useMemo(()=>new AAA(\n props.clientId,\n props.loginRedirectPath,\n props.logoutRedirectPath,\n props.devTenantId,\n props.authUrl\n ),[])\n const value = '';\n //console.log('userManager', userManager);\n const [isLoading, setIsLoading] = useState(true);\n let isMountedRef = useRef<boolean>(false);\n const { authHelper } = props;\n\n useEffect(() => {\n // Store current isMounted since this could change while awaiting async operations below\n isMountedRef.current = true;\n (async () => {\n let user = undefined;\n try {\n user = await userManager!.getUserInfo();\n } catch (error: any) {\n\n }\n /*\n Check if the user is returning back from OIDC and throws error.\n /\n if (authHelper.hasErrorInUrl(window.location)){\n \n await userManager.logout();\n return\n }\n /\n Check if the user is returning back from OIDC.\n */\n if (authHelper.hasCodeInUrl(window.location)) {\n try{\n await userManager?.logincallback();\n }catch (error: any) {\n window.console.log('Error: ', error);\n await userManager.logout()\n }\n authHelper.cleanBrowserUrl();\n setIsLoading(false);\n return;\n }\n\n if (!(await userManager?.isAuthenticated())) {\n userManager?.login();\n } else if (isMountedRef.current) {\n setIsLoading(false);\n }\n })();\n\n return () => {\n isMountedRef.current = false;\n };\n }, [window.location, userManager]);\n\n\n return (\n <AuthContext.Provider value={value}>\n <HeaderAndSideBar\n userManager={userManager}\n isLoading={isLoading}\n loader={props.loader}\n devTenantId={props.devTenantId}\n controls={props.controls}\n appId={props.appId}\n authUrl={props.authUrl}\n orgShortName= {props.orgShortName}\n >\n {props.props.children}\n </HeaderAndSideBar>\n </AuthContext.Provider>\n );\n};\n\n// export { Toast, Modal };\n\nconst OS1Toast = (props: ToastProps) => {\n\n useEffect(() => {\n const os1Components = new OS1Components()\n os1Components.renderToast(props.elementId, props.toastConfig);\n }, []);\n\n return <div id={props.elementId}></div>;\n};\n\nconst OS1Modal = (props: ModalProps) => {\n\n useEffect(() => {\n const os1Components = new OS1Components()\n os1Components.renderModal(props.elementId, props.modalConfig);\n }, []);\n\n return <div id={props.elementId}></div>;\n};\n\n\nexport {\n OS1Provider,\n OS1Toast,\n OS1Modal,\n OS1HttpClient,\n functionBoundOption,\n functionBoundAutoCompleteOption,\n OS1DropDownDefaultValue\n};\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/aaa/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n AAA,\n ConsoleUiInit,\n OS1HttpClient,\n OS1Components,\n functionBoundOption,\n functionBoundAutoCompleteOption,\n AuthHelper,\n OS1DropDownDefaultValue,\n} from '@os1-platform/console-ui-js';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { ModalProps } from '../components/modal/interface';\nimport { ToastProps } from '../components/toast/interface';\n\nexport const AuthContext = React.createContext<any \| undefined>(undefined);\nexport const ConsoleUIContext = React.createContext<any>(undefined);\n\nconst HeaderAndSideBar = (props: any) => {\n const [consoleInstance, setConsoleInstance] = useState<any>(null);\n const [load, setLoad] = useState<boolean>(true);\n\n useEffect(() => {\n if (!props.isLoading) {\n const console = ConsoleUiInit.getInstance(\n props.clientId,\n props.loginRedirectPath,\n props.logoutRedirectPath,\n props.authurl,\n props.orgShortName,\n props.devTenantId,\n props.appId,\n props.userManager,\n props.interTabCommunicationRequired\n );\n\n setConsoleInstance(console);\n console.getSubscription();\n }\n }, [props.isLoading]);\n\n document?.addEventListener('OS1-SubscriptionRequestCompleted', (e: Event) => {\n setLoad(false);\n });\n\n useEffect(() => {\n consoleInstance?.renderHeaderAndSidebar('headerAndSidebar', props.controls);\n }, [load]);\n\n if (props.isLoading \|\| load) {\n if (props.loader) {\n return props.loader;\n } else {\n const keyframes = `\n @-webkit-keyframes spin {\n 0% {\n -webkit-transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n }\n }\n `;\n const styleSheets = Array.from(document.styleSheets).filter(\n (styleSheet) =>\n !styleSheet.href \|\| styleSheet.href.startsWith(window.location.origin)\n );\n for (let style of styleSheets) {\n if (style instanceof CSSStyleSheet && style.cssRules) {\n style.insertRule(keyframes, style.cssRules.length);\n }\n }\n const loaderStyle = () => ({\n marginTop: '50vh',\n marginLeft: '50vw',\n border: '12px solid #F3F3F3',\n borderRadius: '50%',\n borderTop: '12px solid grey',\n width: '40px',\n height: '40px',\n animationName: 'spin',\n animationDuration: '2s',\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n });\n return <div style={loaderStyle()}></div>;\n }\n }\n //console.log(consoleInstance, props);\n return (\n <ConsoleUIContext.Provider value={consoleInstance}>\n <div id=\"headerAndSidebar\">{props.children}</div>\n </ConsoleUIContext.Provider>\n );\n};\n\nconst OS1Provider = (props: any) => {\n const [authUrl, setAuthUrl] = useState('');\n const [orgShortName, setOrgShortName] = useState('');\n // const [tenantDns, setTenantDns] = useState('');\n let [isMountedRef, setisMountedRef] = useState<boolean>(false);\n\n const authHelper = new AuthHelper();\n let authUrls: { tenantUrl: string; orgName: string };\n useEffect(() => {\n (async function () {\n authUrls = await authHelper.getKeyCloakAuthority(\n window.location.hostname,\n props.devTenantId\n );\n setAuthUrl(authUrls.tenantUrl);\n setOrgShortName(authUrls.orgName);\n setisMountedRef(true);\n })();\n }, []);\n\n return isMountedRef ? (\n <OS1Provider2\n clientId={props.clientId}\n loginRedirectPath={props.loginRedirectPath}\n logoutRedirectPath={props.logoutRedirectPath}\n devTenantId={props.devTenantId}\n appId={props.appId}\n controls={props.controls}\n authUrl={authUrl}\n authHelper={authHelper}\n orgShortName={orgShortName}\n interTabCommunicationRequired={\n props?.interTabCommunicationRequired ?? false\n }\n {...props}\n />\n ) : (\n <></>\n );\n};\nconst OS1Provider2 = (props: any) => {\n //console.log(props);\n const userManager = useMemo(\n () =>\n new AAA(\n props.clientId,\n props.loginRedirectPath,\n props.logoutRedirectPath,\n props.devTenantId,\n props.authUrl\n ),\n []\n );\n const value = '';\n //console.log('userManager', userManager);\n const [isLoading, setIsLoading] = useState(true);\n let isMountedRef = useRef<boolean>(false);\n const { authHelper } = props;\n\n useEffect(() => {\n // Store current isMounted since this could change while awaiting async operations below\n isMountedRef.current = true;\n (async () => {\n let user = undefined;\n try {\n user = await userManager!.getUserInfo();\n } catch (error: any) {}\n /*\n Check if the user is returning back from OIDC and throws error.\n /\n if (authHelper.hasErrorInUrl(window.location)) {\n await userManager.logout();\n return;\n }\n /\n Check if the user is returning back from OIDC.\n */\n if (authHelper.hasCodeInUrl(window.location)) {\n try {\n await userManager?.logincallback();\n } catch (error: any) {\n window.console.log('Error: ', error);\n await userManager.logout();\n }\n authHelper.cleanBrowserUrl();\n setIsLoading(false);\n return;\n }\n\n if (!(await userManager?.isAuthenticated())) {\n userManager?.login();\n } else if (isMountedRef.current) {\n setIsLoading(false);\n }\n })();\n\n return () => {\n isMountedRef.current = false;\n };\n }, [window.location, userManager]);\n\n return (\n <AuthContext.Provider value={value}>\n <HeaderAndSideBar\n userManager={userManager}\n isLoading={isLoading}\n loader={props.loader}\n devTenantId={props.devTenantId}\n controls={props.controls}\n appId={props.appId}\n authUrl={props.authUrl}\n orgShortName={props.orgShortName}\n interTabCommunicationRequired={\n props?.interTabCommunicationRequired ?? false\n }\n >\n {props.children}\n </HeaderAndSideBar>\n </AuthContext.Provider>\n );\n};\n\n// export { Toast, Modal };\n\nconst OS1Toast = (props: ToastProps) => {\n useEffect(() => {\n const os1Components = new OS1Components();\n os1Components.renderToast(props.elementId, props.toastConfig);\n }, []);\n\n return <div id={props.elementId}></div>;\n};\n\nconst OS1Modal = (props: ModalProps) => {\n useEffect(() => {\n const os1Components = new OS1Components();\n os1Components.renderModal(props.elementId, props.modalConfig);\n }, []);\n\n return <div id={props.elementId}></div>;\n};\n\nexport {\n OS1Provider,\n OS1Toast,\n OS1Modal,\n OS1HttpClient,\n functionBoundOption,\n functionBoundAutoCompleteOption,\n OS1DropDownDefaultValue,\n};\n"]}

package/dist/commonjs/types/aaa/index.d.ts CHANGED Viewed

@@ -7,4 +7,4 @@ export declare const ConsoleUIContext: React.Context<any>;
 declare const OS1Provider: (props: any) => JSX.Element;
 declare const OS1Toast: (props: ToastProps) => JSX.Element;
 declare const OS1Modal: (props: ModalProps) => JSX.Element;
-export { OS1Provider, OS1Toast, OS1Modal, OS1HttpClient, functionBoundOption, functionBoundAutoCompleteOption, OS1DropDownDefaultValue };
+export { OS1Provider, OS1Toast, OS1Modal, OS1HttpClient, functionBoundOption, functionBoundAutoCompleteOption, OS1DropDownDefaultValue, };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@os1-platform/console-ui-react",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "React wrapper for console-ui library",
   "main": "dist/commonjs/aaa/index.js",
   "types": "dist/commonjs/types/aaa/index.d.ts",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^5.0.0",
-    "@os1-platform/console-ui-js": "0.8.4",
+    "@os1-platform/console-ui-js": "0.9.0",
     "@react-native-community/eslint-config": "^2.0.0",
     "@types/react": "^17.0.37",
     "axios": "^0.21.4",

package/readme.md CHANGED Viewed

@@ -76,7 +76,7 @@
    <OS1Toast elementId={"toastElement"} toastConfig={toastConfig} />
    ```
-   NOTE: Each toast element that is to be rendered on the page should be given a unique elementId.
+   NOTE: Each toast element that is to be rendered on the page should be given a unique elementId.
 6. Use the Modal function to render a modal component in your webpage.
    For example:
@@ -96,13 +96,10 @@
        },
      ],
    };
-   <OS1Modal
-     elementId={'modalElement'}
-     modalConfig={modalConfig}
-   />;
+   <OS1Modal elementId={'modalElement'} modalConfig={modalConfig} />;
    ```
-   Note:- Listen to event when button is clicked, `event.details` will contain the modal element Id.
+   Note:- Listen to event when button is clicked, `event.details` will contain the modal element Id.
 7. Use state variable of `ConsoleUIContext` context to listen to events emitted by injectable controls. This instance is usually passed as a prop to apps.
    For example:
@@ -124,13 +121,16 @@
    ```javascript
    import { OS1HttpClient } from '@os1-platform/console-ui-react';
-    if (consoleInstane) {
-        var client = new OS1HttpClient(consoleInstane.authInitializer, `https://abc.domain.com`); // Base url is set in OS1HttpClient class.
-    }
+   if (consoleInstane) {
+     var client = new OS1HttpClient(
+       consoleInstane.authInitializer,
+       `https://abc.domain.com`
+     ); // Base url is set in OS1HttpClient class.
+   }
    ```
 9. Use REST api methods, on the instance created for OS1HttpClient.
-    Following headers are automatically configured to requests originating from the `NetworkClient` adding Access token(`x-coreos-access`) or Tenant id(`x-coreos-tid`) or User info(`x-coreos-userinfo`) or Auth token(`x-coreos-auth`) headers to the actual request.
+   Following headers are automatically configured to requests originating from the `NetworkClient` adding Access token(`x-coreos-access`) or Tenant id(`x-coreos-tid`) or User info(`x-coreos-userinfo`) or Auth token(`x-coreos-auth`) headers to the actual request.
    - `withAccess`
    - `withTid`
@@ -146,38 +146,47 @@
    5. If you want to use `X-Coreos-Request-Id`, that is generated by library and also need to send request headers, then send requestId parameter as `undefined`.
    ```javascript
    const handleClick = () => {
-   //here consoleInstance is the state variable of ConsoleUIContext;
-       if (consoleInstance) {
-           const client = new OS1HttpClient(consoleInstance.authInitializer, `https://abc.domain.com`); //consoleInstance.authInitializer is an instance of AAA class that we get from ConsoleUi Context
-           const reqHeaders: any = {
-               withAccess: false,
-               withTid: false,
-               withUserInfo: false,
-               withAuth: false,
-           };
-           client.get(`/users`).then(response => {
-                console.log("api response", response.data)
-            }).catch(function (err) {
-                console.error('error', err);
-            });
-            // this example covers case when requestId is generated from console and requestHeaders are passed
-           client.post(`/todos`,{ "todo": "study" }, undefined, reqHeaders).then(response => {
-                console.log("api response", response.data)
-            }).catch(function (err) {
-                console.error('error', err);
-            });
+     //here consoleInstance is the state variable of ConsoleUIContext;
+     if (consoleInstance) {
+       const client = new OS1HttpClient(
+         consoleInstance.authInitializer,
+         `https://abc.domain.com`
+       ); //consoleInstance.authInitializer is an instance of AAA class that we get from ConsoleUi Context
+       const reqHeaders: any = {
+         withAccess: false,
+         withTid: false,
+         withUserInfo: false,
+         withAuth: false,
        };
+       client
+         .get(`/users`)
+         .then((response) => {
+           console.log('api response', response.data);
+         })
+         .catch(function (err) {
+           console.error('error', err);
+         });
+       // this example covers case when requestId is generated from console and requestHeaders are passed
+       client
+         .post(`/todos`, { todo: 'study' }, undefined, reqHeaders)
+         .then((response) => {
+           console.log('api response', response.data);
+         })
+         .catch(function (err) {
+           console.error('error', err);
+         });
+     }
    };
    ```
 10. Click on Need Help button in case you want to query about any application or want to use product guide.
-- Click on `Raise  a Ticket` button  and Use Contact Us page, if you want to query about any application.
-    - We provide text area to describe the issue in details.
-    - We provide option to upload screenshots if any, that may help to understand the issue.
-    - We will get the query along with your details and we can contact you.`
+- Click on `Raise  a Ticket` button and Use Contact Us page, if you want to query about any application.
+  - We provide text area to describe the issue in details.
+  - We provide option to upload screenshots if any, that may help to understand the issue.
+  - We will get the query along with your details and we can contact you.`
 - Click on `Product Guide` button to learn about the product.
 11. Option to change the timezone of the application. At initital load, time zone will be tenant specific but user can change the time zone according to his choice and it will be stored in his browser's local Storage.
@@ -194,13 +203,14 @@
     }
     ```
-13. We have provided that defines how user navigates on Routing of tabs. Users can choose, how they want to navigate apps  i.e. they want to open the app on new tab or the current tab. This is done by going into user preference in profile dropdown and select the choice in Set App Redirect Behaviour. For the first time, it will ask how, we want to redirect our apps.
+13. We have provided that defines how user navigates on Routing of tabs. Users can choose, how they want to navigate apps i.e. they want to open the app on new tab or the current tab. This is done by going into user preference in profile dropdown and select the choice in Set App Redirect Behaviour. For the first time, it will ask how, we want to redirect our apps.
 14. When user clicks on subroutes, then event naming `changeRoutes` is emitted, which contains the details of subMenu apps and their parent app details like appId, appUrl and appName.
 15. If nothing is selected then, when user clicks on app for the first time, it asks how we want to redirect the app.
 16. To get Access Token, use `getAuthenticationTokens` method, for userInfo, use `getUser`, and check whether user is authenticated use `isAuthenticated()`. User have to use context of consoleUi and call authInitializer method of it. `getTenantConfigurations` method, to get all the organization based tenant data.
 ```Javascript
     if (consoleInstance) {
         const accessToken = await consoleInstance.authInitializer.getAuthenticationTokens();
@@ -210,27 +220,49 @@
     }
 ```
 17. Link to acceess [example app](https://github.com/OS1-logistics/vehicle-reference-app/tree/console-v2-integration)
 18. #### Integration guidelines for Rest Api Calls Using console UI Axios Client:-
-- Console has already exposed the `OS1HttpClient` class that accepts all HTTP methods.
-- Wherever the user wants to send a callback url in their api call, they have to mention it like a placeholder naming `{{SSE_CALLBACK}}`.  Console will look for this placeholder and replace it with a callback url.
+- Console has already exposed the `OS1HttpClient` class that accepts all HTTP methods.
+- Wherever the user wants to send a callback url in their api call, they have to mention it like a placeholder naming `{{SSE_CALLBACK}}`. Console will look for this placeholder and replace it with a callback url.
 - Internally this function will establish the sse connection and obtain the callback url from the server. Application developers just need to provide the parameter in api request where the callback url needs to be set.
-- Console will make an api call by intercepting the request. Once callback is received from the server, the callback data is sent to the UI as a custom event named: `SSECallBackEvent`
+- **Having intertab communication:** The SSE console will make one connection per browser per user agent. If it is not enabled, it will make a new connection for each tab. All events will initially be sent to the master tab, which is the tab that has established the SSE connection. After that, the events will be shared with other tabs.
+- **Broadcasting to different users:** Each tab can subscribe to the topic(s). Any message broadcasted to topic(s) will be delivered to their subscribers.
+##### Enabling inter-tab communication:-
+To enable inter-tab communication, set the interTabCommunicationRequired flag to true, while initializing the console UI. if not set, it defaults to false.
 ```javascript
-        // here consoleInstance is an instance that is being created for consoleUI Context while initialization of console UI
-     document.addEventListener(`${consoleInstance.events().SSECallBackEvent}`, (eventData) => {
-            // This event Data can be used further as per the usage of app
-    })
+<OS1Provider
+  clientId={process.env.REACT_APP_CLIENT_ID}
+  loginRedirectPath={'/redirectPath'}
+  logoutRedirectPath={'/logoutPath'}
+  appId={process.env.REACT_APP_INITIAL_APP_ID}
+  controls={controls}
+  interTabCommunicationRequired={true} // here it is set as true
+>
+  <Initiate setConsole={handleConsoleInstanceChange} />
+</OS1Provider>
+```
+- Console will make an api call by intercepting the request. Once callback is received from the server, the callback data is sent to the UI as a custom event named: `SSECallBackEvent`
+```javascript
+// here consoleInstance is an instance that is being created for consoleUI Context while initialization of console UI
+document.addEventListener(
+  `${consoleInstance.events().SSECallBackEvent}`,
+  (eventData) => {
+    // This event Data can be used further as per the usage of app
+  }
+);
 ```
 - Users can set the callback url in their url path, query, payload or in headers.
-- If any internal error is there while making a connection, It will be thrown back as an error and an api call will be made with null as callback url.
-- Retriable errors like re-establishing connection will not be thrown  as those will be retried internally. Only fatal errors along with api errors are thrown in following format:-
+- If any internal error is there while making a connection, It will be thrown back as an error and an api call will be made with null as callback url.
+- Retriable errors like re-establishing connection will not be thrown as those will be retried internally. Only fatal errors along with api errors are thrown in following format:-
 ```javascript
        "error": {
@@ -243,108 +275,115 @@
 Example to implement this mentioned below.
 - Users can pass the placeholder for callback url as a parameter, body or header in an api and from there a message can be sent.
-```javascript
-    const dto = getDtoFromDisplay(data);
-    dto['callback'] = "{{SSE_CALLBACK}}"
-    // here client is the context of consoleUI that is set at the time of initialization.
-    const axiosClient = new OS1HttpClient(client.authInitializer,  `${process.env.REACT_APP_BASE_URL}`);
-  try {
-   await axiosClient.post(
-            '/vehicles',
-            Dto, // payload for api
-           'createVehicles',
-           { withAuth: false }, // request headers for not sending token headers, this optional parameter
-           {
-           headers: {  // custom headers passed, this is optional parameter
-                'Callback': "{{SSE_CALLBACK}}",
-                'Content-Type': 'application/json',
-              }
-          });
-     return;
-   } catch (error) {
-          console.error('error', error);
-   }
+```javascript
+const dto = getDtoFromDisplay(data);
+dto['callback'] = '{{SSE_CALLBACK}}';
+// here client is the context of consoleUI that is set at the time of initialization.
+const axiosClient = new OS1HttpClient(
+  client.authInitializer,
+  `${process.env.REACT_APP_BASE_URL}`
+);
+try {
+  await axiosClient.post(
+    '/vehicles',
+    Dto, // payload for api
+    'createVehicles',
+    { withAuth: false }, // request headers for not sending token headers, this optional parameter
+    {
+      headers: {
+        // custom headers passed, this is optional parameter
+        'Callback': '{{SSE_CALLBACK}}',
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+  return;
+} catch (error) {
+  console.error('error', error);
+}
 ```
 - Here, in the above mentioned example `{{SSE_CALLBACK}}`, is passed in payload as well as in custom headers. Console Will replace this variable from the callback url and make an api call.
 - When msg is received on the client side, an event naming SSECallBackEvent is emitted and the user can listen to this event using document.addEventListener.
-``` Javascript
+```Javascript
     // here consoleInstance is an instance that is being created for consoleUI Context while initialization of console UI
     document.addEventListener(`${consoleInstance.events().SSECallBackEvent}`, (eventData) => {
             // This event Data can be used further as per the usage of app
-    })
-    // For better performance use removeEventListener to clean up this event listener.
+    })
+    // For better performance use removeEventListener to clean up this event listener.
 ```
 #### Approach for rest and graphql api both-
 - Console has exposed OS1HttpClient to make api calls. To use Server Side Events in apps, users need to instantiate the OS1HttpClient class. Even if they make their api calls with any other way instead of console axios client.
- ```Javascript
-    const cl = new OS1HttpClient(props.console.authInitializer, 'https://abc.sandbox.getos1.com');
-    // here, the first parameter is the console UI context and the second parameter is the domain url for which api call is to be made
- ```
- - In `OS1HttpCLien`t, we have exposed the `getEventBrokerUrl` function to make Server side connection(example is added below). This function returns the callback url that has been established after successful connection establishment. When the callback url is already present, it will just increase the timer for the sliding window so that connection will persist longer for that particular url.
- - A callback url returned from the function, can be set in a state, to be used in the api call.
-    - For optimized behavior, can use UseEffect hook to optimize the update of state. When the api needs to be triggered, users can check whether the callback url that is present in their state is different from the callback url received from the callback function. If it's different, then just update the state and return, else just call the api with the callback url that is stored in state.
-    - Another approach is, users can maintain their global state or context, and store the callback url in it. Then whenever they need to make an api call just pass that context or state in their api. But they need to make sure that the getEventBrokerUrl function is called before an api call as it will always guarantee that the callback url is still active.
-Example:-
- ```Javascript
-  const [ callBackUrl, setCallBackUrl] = useState(null)
-   useEffect(()=>{
-     callEvent()
-   }, [callBackUrl])
-  if (props.console) {  //consoleInstance that is set at console Initialization
-var cl = new OS1HttpClient(props.console.authInitializer,
-         'https://os1devs.sandbox.getos1.com');
-   }
-  //This function is called whenever user want to make an api call
-  const handleHandshake = async () => {
-        const callbackResponse = await cl.getEventBrokerUrl()
-        if (callBackUrl && callbackResponse.callback === callBackUrl){
-            callEvent()
-        } else {
-            setCallBackUrl(callbackResponse.callback)
-        }
-  }
+```Javascript
+   const cl = new OS1HttpClient(props.console.authInitializer, 'https://abc.sandbox.getos1.com');
+   // here, the first parameter is the console UI context and the second parameter is the domain url for which api call is to be made
+```
+- In `OS1HttpCLien`t, we have exposed the `getEventBrokerUrl` function to make Server side connection(example is added below). This function returns the callback url that has been established after successful connection establishment. When the callback url is already present, it will just increase the timer for the sliding window so that connection will persist longer for that particular url.
+- A callback url returned from the function, can be set in a state, to be used in the api call. - For optimized behavior, can use UseEffect hook to optimize the update of state. When the api needs to be triggered, users can check whether the callback url that is present in their state is different from the callback url received from the callback function. If it's different, then just update the state and return, else just call the api with the callback url that is stored in state. - Another approach is, users can maintain their global state or context, and store the callback url in it. Then whenever they need to make an api call just pass that context or state in their api. But they need to make sure that the getEventBrokerUrl function is called before an api call as it will always guarantee that the callback url is still active.
+  Example:-
-  //Sample function to make an api call with generated callback url
-  function callEvent(){
-     if (props.console) {
-        cl.post(`/core/api/v1/aaa/apps`,{
-        properties: {"availability":true,"fuelType":"CNG","operatorId":"op-1" },
-        callBackUrl} // payload passed
-        )
-   .then(response => {
-        console.log("api response", response.data)
-    })
-    .catch(function (err) {
-        console.error('error in api call', err);
-    });
-   }
+```Javascript
+ const [ callBackUrl, setCallBackUrl] = useState(null)
+  useEffect(()=>{
+    callEvent()
+  }, [callBackUrl])
+ if (props.console) {  //consoleInstance that is set at console Initialization
+var cl = new OS1HttpClient(props.console.authInitializer,
+        'https://os1devs.sandbox.getos1.com');
+  }
+ //This function is called whenever user want to make an api call
+ const handleHandshake = async () => {
+       const callbackResponse = await cl.getEventBrokerUrl()
+       if (callBackUrl && callbackResponse.callback === callBackUrl){
+           callEvent()
+       } else {
+           setCallBackUrl(callbackResponse.callback)
+       }
  }
- ```
- Here, in the above example:-
-    - When the user calls handleHandshake function, then a call to establish connection is made and a callback url is received.
-    - This callback url is being set to a state and can be used in an api call as a path, query, header or as a body.
-    - After an api call is made and a message can be sent to that callback url from the backend application and UI application can listen to those messages via `SSECallBackEvent` that is exposed:
+ //Sample function to make an api call with generated callback url
+ function callEvent(){
+    if (props.console) {
+       cl.post(`/core/api/v1/aaa/apps`,{
+       properties: {"availability":true,"fuelType":"CNG","operatorId":"op-1" },
+       callBackUrl} // payload passed
+       )
+  .then(response => {
+       console.log("api response", response.data)
+   })
+   .catch(function (err) {
+       console.error('error in api call', err);
+   });
+  }
+}
+```
+Here, in the above example:- - When the user calls handleHandshake function, then a call to establish connection is made and a callback url is received. - This callback url is being set to a state and can be used in an api call as a path, query, header or as a body. - After an api call is made and a message can be sent to that callback url from the backend application and UI application can listen to those messages via `SSECallBackEvent` that is exposed:
 ```Javascript
 // here consoleInstance is an instance that is being created for consoleUI Context while initialization of console UI
  document.addEventListener(`${consoleInstance.events().SSECallBackEvent}`, (eventData) => {
        // This event Data can be used further as per the usage of app
-     })
+     })
  // For better performance use removeEventListener to clean up this event listener.
 ```
 ### SSE Callback Event Payload:-
-- Event payload that will come from `SSECallBackEvent` will look like this:-
+- Event payload that will come from `SSECallBackEvent` will look like this:-
 ```Javascript
 {
     "payload": {
@@ -365,46 +404,158 @@ var cl = new OS1HttpClient(props.console.authInitializer,
         "agentTimestamp": 1699251799605,
         "consoleTimestamp": 1699251800245
     }
-}
+}
 ```
 - Here, in the above mentioned example. Object will come under the detail property of the event.
-    - The object contains a payload property that contains `data, consoleTimestamp, agentTimeStamp, BrokerTimeStamp,      eventId and X-COREOS-REQUEST-ID`.
-    - The data property contains the response that has been received by callback url.
+  - The object contains a payload property that contains `data, consoleTimestamp, agentTimeStamp, BrokerTimeStamp,      eventId and X-COREOS-REQUEST-ID`.
+  - The data property contains the response that has been received by callback url.
+##### BroadCasting event to users
+- This guide details the integration of Server-Side Events (SSE) using the OS1HttpClient class provided by the Console, allowing for real-time communication from server to client in your application. There are two ways to implement Server Side Events (SSE) broadcasting feature in your application:
+- ##### Prerequisites before using broadcasting feature:-
+  - To use broadcasting features, developers must set the interTabCommunicationRequired flag to true for their app. They need to subscribe to topic(s) they want to listen to the broadcast messages.The maximum number of topics that can be broadcast at a time is five. There should be no commas in topic names.
+- #### Subscribing a Topic:
+  - Developers can subscribe to topics by calling the `subscribeBroadcastTopic` function and passing the desired topic name. It is essential to note that each app has a limit of 10 topics and a maximum of 10 subscribers per topic. To make the most out of these limits, topics should be specific and tailored to the events they represent. This would enable targeted events within the limits while ensuring precision. Therefore, specific topic names that reflect granular contexts should stay within the subscriber limits.
+  ```javascript
+  await cl.subscribeBroadCastTopic([
+    'dispatch:e3956ddf-e7a2-4a9e-914a-ddace6a9d701',
+    'facility:326e7698-c039-416a-a697-768e9bbb451c:dispatches',
+  ]);
+  ```
+- #### Using the {{SSE_BroadCast}} Placeholder
+  This is the simplest option if using the Console’s Axios client.
+- **Step 1:** Setting the Broadcast URL Parameter
+  When making an API call, specify the attribute where the broadcast url is expected on the backend and its value needs to be set by using the placeholder `{{SSE_BROADCAST(topicNames)}}`. The Console will automatically detect and replace this placeholder with the actual broadcast URL. Developers can pass the callback attribute in the request URL, headers, or the request body.
+  The example below adds `{{SSE_BROADCAST(topicNames)}}` to the header for the createVehicles request.
+  ```javascript
+  try {
+    await axiosClient.post(
+      '/vehicles',
+      dto, // The payload for the API call
+      'createVehicles', // The operation or function being called
+      { withAuth: false }, // Options, set to false if authentication is not required
+      {
+        headers: {
+          'Callback':
+            '{{SSE_BROADCAST(dispatch:e3956ddf-e7a2-4a9e-914a-ddace6a9d701, facility:326e7698-c039-416a-a697-768e9bbb451c:dispatches)}}', // Updated automatically by the Axios Client
+          'Content-Type': 'application/json', // Set the content type of the request
+        },
+      }
+    );
+  } catch (error) {
+    console.error('error', error);
+  }
+  ```
+### Calling the broadCastEvents
+- When you are ready to make an API call, ensure that the brodacastEvents function is invoked to broadcast events. This function will accept the topicNames on which it needs to broadcast and payload which needs to be passed. See the example code below:
+```javascript
+const broadcast = await cl.broadCastEvents(
+  ['dispatch:e3956ddf-e7a2-4a9e-914a-ddace6a9d701'],
+  payload
+);
+```
+#### Broadcast Event payload
+```javascript
+{
+    "data": {
+        "businessCommand": "participantsboatsEntityCreate",
+        "callbackMeta": {},
+        "commandName": "ParticipantCreationSuccessEvent",
+        "data": {
+            "appId": "participants",
+            "createdAt": "1707463018469",
+            "createdBy": {
+                "id": "1",
+                "name": "vehicle-consoleUi"
+            },
+            "entityName": "boats",
+            "isActive": true,
+            "name": "sjdsadghafja",
+            "owner": "tenants:436a9b2c-5f79-5b51-92ba-2da25050dd36",
+            "properties": {
+                "availability": true,
+                "failurereason": "",
+                "fuelType": "CNG",
+                "inprogress": false,
+                "isfail": false,
+                "mode": "sdhavdhha",
+                "operatorId": "hdad",
+                "processingstage": "isActive",
+                "servicecode": "",
+                "system": false
+            },
+            "state": {
+                "current": "onboarding:onboarding",
+                "transitions": [
+                    "active:active"
+                ]
+            },
+            "uniqueCode": "bjhgfajdf",
+            "updatedAt": "1707463018469",
+            "updatedBy": {
+                "id": "1",
+                "name": "vehicle-consoleUi"
+            },
+            "id": "boats:c6cf6d0c-7024-5925-90d9-a803b59df46f"
+        },
+        "requestId": "d133e887-e52b-47dc-80ca-9f4228708cab",
+        "tenantId": "developsln1"
+    },
+    "eventId": "e5462690-e8b1-49e6-a082-82bad87ee70d",
+    "X-COREOS-REQUEST-ID": "",
+    "brokerTimestamp": 1707463018742,
+    "agentTimestamp": 1707463018747,
+    "topics": [
+        "TenantId:app:0641372d-802aaeb4:Test17"
+    ],
+    "type": "broadcast", // by this we are distinguishing between broadcast and callback
+    "consoleTimestamp": 1707463018796
+ }
+```
 ## Configuration for Injectable Controls offered by the Library
-#### Common parameters, that will be passed in  all injectable controls:-
-- **type:-**    This field shows the type of injectable controls that is being used. Available types are TextBox, TextBoxButton, AutoComplete, DropDown, SearchBox
-- **width:-**    This field shows the maximum percentage of width that can be passed.
-- **placeholder:-**    This field displays the placeholder text, that is passed in injectable control.
+#### Common parameters, that will be passed in all injectable controls:-
+- **type:-** This field shows the type of injectable controls that is being used. Available types are TextBox, TextBoxButton, AutoComplete, DropDown, SearchBox
+- **width:-** This field shows the maximum percentage of width that can be passed.
+- **placeholder:-** This field displays the placeholder text, that is passed in injectable control.
 - **id:-** This is unique id that is given to injectable controls that uniquely identifies that particular component.
 - **float:-** This is optional component, by default every component is left floated.
 ##### TextBox:-
 - To use textbox in console ui, we provide following configuration:-
 ```javascript
         {
-            type: "TextBox",
-            width: 100,
+            type: "TextBox",
+            width: 100,
             placeholder: "Search Package",
-            float: "left",
-            id: "TextBox1"
+            float: "left",
+            id: "TextBox1"
             attributes: {
                 maxlength: “50”;
-            }
+            }
         }
 ```
-- **Note:-**
-    - Here, attributes is an optional attributes parameter that contains object which defines if any attribute needs to be set to injectable controls.
-    - OnChange and OnBlur event is emitted by this injectable control.
+- **Note:-**
+  - Here, attributes is an optional attributes parameter that contains object which defines if any attribute needs to be set to injectable controls.
+  - OnChange and OnBlur event is emitted by this injectable control.
 ##### TextBoxButton:-
@@ -412,23 +563,24 @@ var cl = new OS1HttpClient(props.console.authInitializer,
 ```javascript
   {
-    type: "TextBoxButton",
-    width: 100,
-    placeholder: "Search Package",
-    float: "left",
+    type: "TextBoxButton",
+    width: 100,
+    placeholder: "Search Package",
+    float: "left",
     id: "TextBoxButton1"
     attributes: {
         maxlength: “50”;
-    }
-    button: true,
-    buttonText: “Search”,
+    }
+    button: true,
+    buttonText: “Search”,
     buttonColor: “red”
   }
 ```
-- **Note:-**
-    - Here button by default set to false, but if we set it to true, then we have to pass buttonText and buttonColor,    which specifies the outlook of a button
-    - Here, attributes is an optional attributes parameter that contains object which defines if any attribute needs to   be set to injectable controls.
-    - OnChange is emitted when we change text in input box and OnClick is emitted when user clicks on button.
+- **Note:-**
+  - Here button by default set to false, but if we set it to true, then we have to pass buttonText and buttonColor, which specifies the outlook of a button
+  - Here, attributes is an optional attributes parameter that contains object which defines if any attribute needs to be set to injectable controls.
+  - OnChange is emitted when we change text in input box and OnClick is emitted when user clicks on button.
 ##### Search Box:-
@@ -436,20 +588,20 @@ var cl = new OS1HttpClient(props.console.authInitializer,
 ```javascript
       {
-          type: "SearchBox",
-          width: 100,
+          type: "SearchBox",
+          width: 100,
           placeholder: "Search Package",
-          float: "right",
+          float: "right",
           id: "SearchBox1"
-          attributes: { maxlength: “50”; }
-          lensIcon: true
+          attributes: { maxlength: “50”; }
+          lensIcon: true
         }
 ```
-- **Note:-**
-    - Here lensIcon is optional, if it is set to true then lensIcon will be shown in injectable control.
-    - Here, attributes is an optional attributes parameter that contains object which defines if any attribute needs to   be set to injectable controls.
-    - OnChange, onBlur, onFocus is emitted on input box.
+- **Note:-**
+  - Here lensIcon is optional, if it is set to true then lensIcon will be shown in injectable control.
+  - Here, attributes is an optional attributes parameter that contains object which defines if any attribute needs to be set to injectable controls.
+  - OnChange, onBlur, onFocus is emitted on input box.
 ##### AutoComplete:-
@@ -457,27 +609,29 @@ var cl = new OS1HttpClient(props.console.authInitializer,
 ```javascript
   {
-  type: "AutoComplete",
-  width: 100,
-  placeholder: "Search Package",
+  type: "AutoComplete",
+  width: 100,
+  placeholder: "Search Package",
   float: "right",
-  id: "AutcoComplete1"
+  id: "AutcoComplete1"
   functionBoundOption: autoComplete(), // This field can be a function which return array of Objects or normal array of objects in the form of [{ value: string, text: string }],
   }
 ```
-- **Note:-**
-    - In this `functionBoundOption` is passed when options are static and they can be passed in the form of  [{ value: string, text: string }], User can declare this as value of this field or can pass the function that returns the value in above mentioned format.
-    - For setting options dynamically, user can set `hasAsyncFunctionBoundOption`, then they can call `functionBoundAutoCompleteOption` from `@os1-platform/console-ui-react` and pass array of objects and id of autocomplete as parameters to that function.
-    ``` javascript
-    import {functionBoundAutoCompleteOption} from '@os1-platform/console-ui-react';
-    if (consoleInstance){
-    functionBoundAutoCompleteOption(autoCompleteValues,"AutoComplete1" ) // here firstParament is a variable that contains the array of objects that needs to be present in dropdown. Second parameter contains the id of dropdown on which we want to load the values
-    }
-    ```
-    - OnChange, onBlur, OnClick, OnScroll is emitted on this injectable controls
+- **Note:-**
+  - In this `functionBoundOption` is passed when options are static and they can be passed in the form of [{ value: string, text: string }], User can declare this as value of this field or can pass the function that returns the value in above mentioned format.
+  - For setting options dynamically, user can set `hasAsyncFunctionBoundOption`, then they can call `functionBoundAutoCompleteOption` from `@os1-platform/console-ui-react` and pass array of objects and id of autocomplete as parameters to that function.
+  ```javascript
+  import { functionBoundAutoCompleteOption } from '@os1-platform/console-ui-react';
+  if (consoleInstance) {
+    functionBoundAutoCompleteOption(autoCompleteValues, 'AutoComplete1'); // here firstParament is a variable that contains the array of objects that needs to be present in dropdown. Second parameter contains the id of dropdown on which we want to load the values
+  }
+  ```
+  - OnChange, onBlur, OnClick, OnScroll is emitted on this injectable controls
 ##### DropDown:-
@@ -494,19 +648,28 @@ var cl = new OS1HttpClient(props.console.authInitializer,
   throttleTime: 300 // this is an optional parameter which enables to set throttletime for on scroll Event. By default it is 500 ms.
   }
 ```
-- **Note:-**
-    - In this `functionBoundOption` is passed when options are static and they can be passed in the form of  [{ value: string, text: string }], User can declare this as value of this field or can pass the function that returns the value in above mentioned format.
-    - For setting options dynamically, user can set `hasAsyncFunctionBoundOption`, then they can call `functionBoundOption` from `@os1-platform/console-ui-react` and pass array of objects and id of dropdown as parameters to that function.
-    - For setting initial Value to dropdown, `OS1DropDownDefaultValue` from `@os1-platform/console-ui-react` needs to be passed with value and id of dropdown. It can only be passed when instance of console UI is available or console UI has been loaded.
-    ``` javascript
-    import {functionBoundOption, OS1DropDownDefaultValue} from '@os1-platform/console-ui-react';
-    if (consoleInstance){
-      functionBoundOption(dropDownValues,"Dropdown1" ) // here firstParament is a variable that contains the array of objects that needs to be present in dropdown. Second parameter contains the id of dropdown on which we want to load the values
-     OS1DropDownDefaultValue('initialValue', "DropDown1"); // Here first parameter contains the value that needs to passed as  initialValue, second Parameter is the id of the dropdown on which Id, needs to be set.
-    }
-    ```
-    - OnChange, onScroll, OnClick, OnSearch, OnBlur is emitted on this injectable controls
+- **Note:-**
+  - In this `functionBoundOption` is passed when options are static and they can be passed in the form of [{ value: string, text: string }], User can declare this as value of this field or can pass the function that returns the value in above mentioned format.
+  - For setting options dynamically, user can set `hasAsyncFunctionBoundOption`, then they can call `functionBoundOption` from `@os1-platform/console-ui-react` and pass array of objects and id of dropdown as parameters to that function.
+  - For setting initial Value to dropdown, `OS1DropDownDefaultValue` from `@os1-platform/console-ui-react` needs to be passed with value and id of dropdown. It can only be passed when instance of console UI is available or console UI has been loaded.
+  ```javascript
+  import {
+    functionBoundOption,
+    OS1DropDownDefaultValue,
+  } from '@os1-platform/console-ui-react';
+  if (consoleInstance) {
+    functionBoundOption(dropDownValues, 'Dropdown1'); // here firstParament is a variable that contains the array of objects that needs to be present in dropdown. Second parameter contains the id of dropdown on which we want to load the values
+    OS1DropDownDefaultValue('initialValue', 'DropDown1'); // Here first parameter contains the value that needs to passed as  initialValue, second Parameter is the id of the dropdown on which Id, needs to be set.
+  }
+  ```
+  - OnChange, onScroll, OnClick, OnSearch, OnBlur is emitted on this injectable controls
 ## Configuration required in Next.js projects.
-- In Next.js, we need to have some library that supports  global CSS.
-- One of these library is `next-global-css`, we require to import `withGlobalCss` from it and wrap our configuration within it. [Link to configure next-global-css](https://www.npmjs.com/package/next-global-css)
+- In Next.js, we need to have some library that supports global CSS.
+- One of these library is `next-global-css`, we require to import `withGlobalCss` from it and wrap our configuration within it. [Link to configure next-global-css](https://www.npmjs.com/package/next-global-css)