How to: Integrate your existing application with the Console UI

import { OS1Provider } from "@foxtrotplatform/console-ui-react-sdk";

<OS1Provider
  clientId={"platform:app:ui"} // The clientId you receive after creating an app.
  loginRedirectPath={"/success"} // Path to redirect users after successfully logging in for the first time. 
  logoutRedirectPath={"/"} //Path to redirect users after logging out. 
  appId={"SolutionName-appId"} //The appId you recieve after creating an app 
    devOrgName={"delhivery"} // Optional: Only pass this parameter when using development mode.
  
>
  <Initiate setConsole={handleConsoleInstanceChange} /> //Your component for setting the Console UI instance.
</OS1Provider>;

import React from "react";
import { ConsoleUIContext } from "@foxtrotplatform/console-ui-react-sdk";

function Initiate(props) {
  const consoleInstance = React.useContext(ConsoleUIContext);
  if (consoleInstance) {
    props.setConsole(consoleInstance);
  }
}

export default Initiate;

import { OS1HttpClient } from '@foxtrotplatform/console-ui-react-sdk';

class NetworkClient {
  public readonly instance: any;

  constructor(`instanceName`) {
    this.instance = OS1HttpClient.createClient({
     baseURL: `https://abc.preprod.fxtrt.io/core/api/v1/aaa`,
   },`instanceName`);
  }
}

const toastConfig = {
   bgColor: "yellow", // background color of the toast [green,red,yellow,black,white]
   message: "Operation Successful", // message that will be shown inside the toast [128 character limit]
   timeout: 10, // time in seconds after which toast will disappear
   icon: "error", // icon that will be appearing before the message [info,error,warning,success,failure,none]
   closeButton: true, // denotes whether the close button will be present on the right of the toast
}

<OS1Toast clientId={"platform:app:ui"} loginRedirectPath={"/fms/success"} logoutRedirectPath={"/"} devOrgName={"delhivery"} appId={"Single Leg-app:435858a9-1238-5ca9-b100-a5d46d108910"} elementId={"toastElement"} toastConfig={toastConfig} />

const modalConfig = {
  title: "Deactivate", // Title of the modal [96 characters limit]
  message: "Do you want to continue?", // message that will be appearing on the modal
  icon: "info", // icon that will be appearing along with the message [info,error,warning,success,failure,none]
  buttons: [
    // maximum two buttons allowed
    {
      id: "button-element-1", // unique id of the button
      backgroundColor: "green", // background color of the button
      text: "Cancel", // text appearing on the button
      event: "upEvent", // unique name of the custom event that will be triggered on click
    },
  ],
};
<OS1Modal
  clientId={"platform:app:ui"}
  loginRedirectPath={"/fms/success"}
  logoutRedirectPath={"/"}
  devOrgName={"delhivery"}
  appId={"Single Leg-app:435858a9-1238-5ca9-b100-a5d46d108910"}
  elementId={"modalElement"}
  modalConfig={modalConfig}
/>;

import { OS1Provider } from "@foxtrotplatform/console-ui-react-sdk";

 const controls = [{
     type: "AutoComplete", //Type can be TextBox,TextBoxButton,DropDown, SearchBox, AutoComplete
     width: 100, // width as percentage of the maximum width that is assigned to injectable component
     placeholder: "Search Items", // placeHolder text
     id: "AutoComplete1", //Unique Id which distinguish it with other injectable controls.
     float: "left", // Option to align items left or right
     functionBoundOption: autoComplete(), // Function that returns a value as an array of object in the form of [{ value: string, text: string }]
 }]
  <OS1Provider clientId={"platform:app:ui"} loginRedirectPath={"/fms/success"} logoutRedirectPath={"/"} devOrgName={"delhivery"} controls ={controls} appId={'SolutionName-appId'}>
             <Initiate setConsole={handleConsoleInstanceChange} />
 </OS1Provider>

const { consoleInstance } = props;
if (consoleInstance) {
  consoleInstance
    .eventBus()
    .on(consoleInstance.events().OnChangeEvent, (e) =>
      window.console.log(e)
    );
}

import NetworkClient from "./networkClient";

const handleClick = () => {
//here consoleInstance is the state variable of ConsoleUIContext;
    if (consoleInstance) {
        const client1 = new NetworkClient(consoleInstance.authInitializer); //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,
        };
        client1.users.('45', reqHeaders).catch(function (err) {
        console.log('errr', err);
        console.log('error', JSON.stringify(err));
        });
    };
};

const { consoleInstance } = props;
if (consoleInstance) {
  console.log(
    consoleInstance.convertTime("2014-06-01 12:00", "MM-DD-YYYY HH:mm:ss")
  ); // In this 2nd parameter i.e. format in which we want to convert time is optional.
  console.log(consoleInstance.currentTimeZone());
}