/** * * @param {Object} config - This object contains properties needed to boostrap the application. * @property {Object} config.routingInfo - (Internal) Routing information object includes "routesMeta" and "routes" objects. The "routesMeta" includes restAPI information to each route and "routes" incudes payload data to each route. This is internally generated by infinity use D_pxBootstrapConfig to download this. * @example Below is the sample for routingInfo * routingInfo: { * routesMeta: { * "showView": { * "urlPattern": "{pageName}", * "restApi": { * "endPoint": "/api/application/v2/pages/{page}?pageClass={pageClass}", * "reqType": "GET", * "params": { * "page": "", * "pageClass": "" * } * } * }, * ... * } * routes: { * "Home": { * "routeKey": "showView", * "payload": { * "page": "pyHome", * "pageClass": "Data-Portal" * } * }, * ... * } * } * @property {Object} config.actionModel - (Internal) Action model(For internal use only). * @property {Object} config.additionalHeaders - This contains "pzCTkn" property which will have a token value and also which is a default header and bootstrap uses this to avoid CSR attacks. This token will be sent in each DX API request. If constellation needs to send more headers, that should be part of this. * @property {Object} config.tokens - This contains "C11NB2S" property which will have token value which will be used while connecting to constellation app static server in order to download static assets such as custom components, custom images, and localisation rules. (This is internally populated from infinity) * @property {string} config.semanticUrl - This is the user friendly URL to display in the browser. If this is empty default will be calculated by the core engine. * @property {Object} config.queryParams - Extra params which would be set to the browser friendly URL. * @property {boolean} config.noPortal - Indicates whether to disable the portal rendering, by default it would be false. * @property {string} config.timezone - Timezone for the application. * @example "America/New_York" * @property {boolean} config.noHistory - Indicates whether to disable browser back and forward buttons, by default it would be false. * @property {string} config.theme - JSon object of configured application theme, theme can be configured in the AppStudio, default would be empty object. * @property {boolean} config.dynamicLoadComponents - Indicates whether dynamic loading of OOTB react components is disabled or not, by default it would be true. * @property {boolean} config.dynamicSemanticUrl - Indicates whether browser friendly URL updation is to be enabled or not, by default it would be true. * @property {boolean} config.enableRouting - Indicates whether to enable or disable the semantic URL calculation in constellation core, by default it would be true. * @property {string} config.locale - Application locale. * @example "locale": "en_US" * @property {Object} config.environmentInfo - (Internal) Includes environment information of the current application. This includes information about the operator, application, locale, case list. This is internally generated by infinity server, use D_pxBootstrapConfig to download this. * Information about the application environment. * @property {Object} config.environmentInfo.pyUserSettings - User-specific settings. * @property {Object} config.environmentInfo.pxApplication - Information about the application. * @property {string} config.environmentInfo.pxApplication.pyBaseLocale - The base locale. * @property {string} config.environmentInfo.pxApplication.pyBuiltOnApplications - List of applications the current application is built on. * @property {string} config.environmentInfo.pxApplication.pyCaseInstanceListDP - Data page for case instance list. * @property {string} config.environmentInfo.pxApplication.pyDefaultOperatorDP - Data page for default operator. * @property {string} config.environmentInfo.pxApplication.pyDocumentURLDP - Data page for document URL. * @property {string} config.environmentInfo.pxApplication.pyLabel - The label for the application. * @property {string} config.environmentInfo.pxApplication.pyMaxAttachmentSize - The maximum attachment size. * @property {string} config.environmentInfo.pxApplication.pyRuleName - The rule name for the application. * @property {Object} config.environmentInfo.pxApplication.pxLocale - Locale information. * @property {string} config.environmentInfo.pxApplication.pyTimeZone - The time zone (e.g., "America/New_York"). * @property {Object} config.environmentInfo.pxMashupDetails - Details about mashups. * @property {string} config.environmentInfo.pxMashupDetails.pyMashupCodeForLandingPage - Mashup code for the landing page. * @property {string} config.environmentInfo.pxMashupDetails.pyMashupCodeForOpenAssignment - Mashup code for opening assignments. * @property {string} config.environmentInfo.pxMashupDetails.pyMashupCodeForOpenCase - Mashup code for opening cases. * @property {Object} config.environmentInfo.pxOperator - Information about the operator. * @property {string} config.environmentInfo.pxOperator.pyAccessGroup - The access group of the operator. * @property {string} config.environmentInfo.pxOperator.pyDefaultPortal - The default portal for the operator. * @property {string} config.environmentInfo.pxOperator.pyImageInsKey - The image instance key. * @property {string} config.environmentInfo.pxOperator.pyUserIdentifier - The user identifier. * @property {string} config.environmentInfo.pxOperator.pyUserName - The user name. * @property {string} config.environmentInfo.pxOperator.pyWorkGroup - The work group of the operator. * @property {Object[]} config.environmentInfo.pyApplications - List of applications that the operator have access to * @property {string} config.environmentInfo.pyApplications.pyIconSmall - The icon for the application. * @property {string} config.environmentInfo.pyApplications.pyLabel - The label or name of the application. * @property {string} config.environmentInfo.pyApplications.pzApplicationURL - The URL of the application. * @property {Object[]} config.environmentInfo.pyCaseTypeList - An array of case types. * @property {string} config.environmentInfo.pyCaseTypeList.pxIcon - The icon for the case type. * @property {string} config.environmentInfo.pyCaseTypeList.pyIsSearchActive - Indicates if search is active for the case type. * @property {string} config.environmentInfo.pyCaseTypeList.pyWorkTypeImplementationClassName - The class name for the case type implementation. * @property {string} config.environmentInfo.pyCaseTypeList.pyWorkTypeName - The name of the case type. * @property {Object} config.environmentInfo.pySourcePage - Source page information. * @property {string} config.environmentInfo.pySourcePage.pyConnectorType - The connector type for the source page. * @property {string} config.environmentInfo.pySourcePage.pySourceClass - The class of the source page. * @property {string} config.environmentInfo.pySourcePage.pySourceIdentifier - The identifier of the source page. * @property {string} config.environmentInfo.pySourcePage.pySourceNumber - The source number. * @property {string} config.environmentInfo.pySourcePage.pySourceType - The type of the source page. * @example Below is the sample for environment info * const "environmentInfo": { * "pyUserSettings": {}, * "pzLoadTime": "September 28, 2023 at 3:22:49 AM EDT", * "pzPageNameBase": "D_pxEnvironmentInfo", * "pzPageNameHash": "", * "pxApplication": { * "pyBaseLocale": "", * "pyBuiltOnApplications": "C11nGall,Theme-Cosmos,PegaDevelopment,PegaSSOT,PegaRULES", * "pyCaseInstanceListDP": "D_pxAllCaseList", * "pyDefaultOperatorDP": "D_pyC11nOperatorsList", * "pyDocumentURLDP": "D_pxGetDocumentURL", * "pyLabel": "C11n Gallery", * "pyMaxAttachmentSize": "1024", * "pyRuleName": "C11nGall 02.01.01" * }, * "pxLocale": { * "pyTimeZone": "America/New_York" * }, * "pxMashupDetails": { * "pyMashupCodeForLandingPage": "", * "pyMashupCodeForOpenAssignment": "", * "pyMashupCodeForOpenCase": "" * }, * "pxOperator": { * "pyAccessGroup": "C11nGall:Administrators", * "pyDefaultPortal": "Developer", * "pyImageInsKey": "", * "pyUserIdentifier": "tejas1", * "pyUserName": "Tejas", * "pyWorkGroup": "Default" * }, * "pyApplications": [ * { * "pxObjClass": "Rule-Application", * "pyIconSmall": "", * "pyLabel": "crude", * "pzApplicationURL": "https://sde-bos-24.rpega.com/prweb/app/crude/" * }, * { * "pxObjClass": "Rule-Application", * "pyIconSmall": "", * "pyLabel": "C11n Gallery", * "pzApplicationURL": "https://sde-bos-24.rpega.com/prweb/app/C11nGall/" * } * ], * "pyCaseTypeList": [ * { * "pxIcon": "polaris-solid", * "pxObjClass": "Embed-Application-WorkMetaData", * "pyIsSearchActive": "true", * "pyWorkTypeImplementationClassName": "ON8TTL-C11nGall-Work-AddressTest", * "pyWorkTypeName": "AddressTest" * }, * { * "pxIcon": "polaris-solid", * "pxObjClass": "Embed-Application-WorkMetaData", * "pyIsSearchActive": "true", * "pyWorkTypeImplementationClassName": "ON8TTL-C11nGall-Work-ApprovalTest", * "pyWorkTypeName": "Approval Test" * } * ], * "pySourcePage": { * "pxObjClass": "Embed-DataSource", * "pyConnectorType": "", * "pySourceClass": "Data-Admin-Operator-ID", * "pySourceIdentifier": "pxPopulateEnvironmentInfo", * "pySourceNumber": "1", * "pySourceType": "Data Transform" * } * } * @property {string} config.renderingMode - (Internal) Rendering mode for the application which can be FULL_PORTAL,PREVIEW, HYBRID, and EMBED. By default it is 'FULL_PORTAL'. This is internal and used only for react infrastructure. * @property {Object} config.serviceConfig - Contains service configuration info. * @property {string} config.serviceConfig.contextPath - This URL after the domain name * @property {string} config.serviceConfig.appAlias - This is the application alias name * @property {string} config.serviceConfig.googleMapKey - This is googleMapKey used for location services * @property {string} config.serviceConfig.staticContentServer - This is constellation CDN service URL, which serves OOTB files. This is anonymous service. * @property {string} config.serviceConfig.appStaticContentServer - This is a constellation custom assets service, which serves the customer specific assets. This is guarded with authorization. * @property {string} config.serviceConfig.messagingService - This is a constellation websocket service used for server push usecases. * * @example The below is the example for serviceConfig * { * "contextPath": "/prweb", * "appAlias": "app/C11nGall", * "googleMapKey": "AIzaSyAjGxU3bSmuA_6AzgfRtbRHhOw_DCLL-xE", * "staticContentServer": "https://localhost:3000/", * "appStaticContentServer": "https://staging.constellation.pega.io/c11n-appstatic/", * "messagingService": "wss://staging2.constellation.pega.io/c11n-messaging/" * } * @param {Function} [callback] - The callback function to be executed after bootstrapping. * @returns {Promise} A promise that resolves to true if the bootstrapping is successful. * * @example In this example we are the application config and a callback function to the bootstrap API, which inturn is returning a promise on completing bootstrapping. * const config = {...}; * * try { * import(`${staticContentServer}bootstrap-shell.js?v='${randomHash}'`) * .then((boostrapShell) => { * const callback = () => { * //Do call exposed API to load portal or view or case * // boostrapShell.loadViewByName('app-root', viewName, defaultPortalName); * // boostrapShell.loadPortal('app-root', defaultPortalName); * }; * boostrapShell.bootstrap(config).then(callback); * }) * } catch (error) { * console.error("Bootstrap failed:", error); * } */ export function bootstrap(config: Object, callback?: Function): Promise; /** * Loads a view into a target DOM element. * * @param {HTMLElement} targetDom - The target DOM element where the view will be loaded. * @param {Object} viewMetadata - Metadata for the view being loaded. * @param {Array} [preLoadComponents=[]] - (Optional) List of pre-load components, this is used for pre loading react components. * @param {Object} runtimeParams - (Optional and Internal) Runtime parameters for the view. * @param {string} portalTarget - (Optional) DOM element into which view will be loaded and used as cosmos portal target(usually a shadowdom element). * @param {string} styleSheetTarget - (Optional) DOM element into which cosmos styles will be injected. Only applicable for react rendering. * @param {string} containerTargetName - Name of the container that gets created in the redux store. Only applicable for react rendering. * @example In this example we are loading the "WorkList" view in the given targetDom * const targetDom = document.getElementById('viewContainer'); * const viewMetadata = { * name: "WorkList", * config: { * ... * } * } * const containerTargetName = 'hybrid'; * * bootstrapShell.loadView(targetDom, viewMetadata, undefined, undefined, undefined, undefined, containerTargetName) * */ export function loadView(targetDom: HTMLElement, viewMetadata: Object, preLoadComponents?: any[], runtimeParams: Object, portalTarget: string, styleSheetTarget: string, containerTargetName: string): void; /** * Loads a portal into a target DOM element. * * @param {HTMLElement} targetDom - The target DOM element where the portal will be loaded. * @param {string} portalName - The name of the portal to load. * @param {Array} [preLoadComponents=[]] - (Optional) List of pre-load components, this is used for pre loading react components. * @param {string} containerTargetName - (Optional) Name of the container that gets created in the redux store. * In this example we are loading 'C11nEnv' portal in the given targetDom. * const targetDom = document.getElementById('portalContainer'); * const portalName = 'myPortal'; * * bootstrapShell.loadPortal(targetDom, portalName) */ export function loadPortal(targetDom: HTMLElement, portalName: string, preLoadComponents?: any[], containerTargetName: string): void; /** * This API loads the operator's default portal. * @param {HTMLElement} targetDom - The target DOM element where the portal will be loaded. * @param {Array} [preLoadComponents=[]] - (Optional) Preloaded components, this is used for pre loading react components. * @param {String} containerTargetName - (Optional) Name of the container that gets created in the redux store. * In this Example usage of loadDefaultPortal function we are loading the default portal * const targetElement = document.getElementById('portalContainer'); * * bootstrapShell.loadDefaultPortal(targetElement); */ export function loadDefaultPortal(targetDom: HTMLElement, preLoadComponents?: any[], containerTargetName: string): void; /** * Loads a component into a target DOM element. * * @param {HTMLElement} targetDom - The target DOM element where the component will be loaded. * @param {Object} componentMetadata - Metadata for the component being loaded. * @param {Array} preLoadComponents - (Optional) List of pre-load components, this is used for pre loading react components. * @returns {Promise} A promise that resolves when the component is loaded. * @example In this example we are loading the SampleComponent in the given targetDom * const targetElement = document.getElementById('componentContainer'); // Replace with your target element * const componentMetadata = { * name: 'SampleComponent', * ... * }; * * bootstrapShell.loadComponent(targetElement, componentMetadata) * .then(() => { * // resolved action * }) * .catch((error) => { * // rejected action * }); */ export function loadComponent(targetDom: HTMLElement, componentMetadata: Object, preLoadComponents: any[]): Promise; /** * Loads a mashup into a target DOM element. * * @param {string} targetDom - The target DOM element identifier or tag name where the mashup will be loaded. * @param {boolean} [usePegaMashupStyling=true] - (Optional by default it will be true) Indicates whether to use Pega mashup styling. * @example In the below example we are loading constellation mashup in the given "targetElementId". * * const targetElementId = 'mashupContainer'; * * bootstrapShell.loadMashup(targetElementId); */ export function loadMashup(targetDom: string, usePegaMashupStyling?: boolean): void; /** * Loads a view by name into a target DOM element. * * @param {HTMLElement} targetDom - The target DOM element where the view will be loaded. * @param {string} viewName - The name of the view to load. * @param {string} portalName - The name of the portal. * @param {string} viewClass - The view class. * @param {Array} additionalComponents - (Optional) List of pre-load components, this is used for pre loading react components. * @param {string} portalTarget - (Optional) DOM element into which view will be loaded and used as cosmos portal target(usually a shadowdom element). * @param {string} styleSheetTarget - (Optional) DOM element into which cosmos styles will be injected. * @param {string} containerTargetName - (Optional) Name of the container that gets created in the redux store. * @example In this example we are loading the 'MyView' view in the given targetDom. * const targetElement = document.getElementById('viewContainer'); * const viewName = 'MyView'; * const portalName = 'MyPortal'; * const viewClass = 'my-view-class'; * * bootstrapShell.loadViewByName(targetElement, viewName, portalName, viewClass); */ export function loadViewByName(targetDom: HTMLElement, viewName: string, portalName: string, viewClass: string, additionalComponents: any[], portalTarget: string, styleSheetTarget: string, containerTargetName: string): void; /** * Loads a case into a target DOM element. * * @param {HTMLElement} targetDom - The target DOM element where the case will be loaded. * @param {string} caseId - The ID of the case to load. * @param {Array} [preLoadComponents=[]] - (Optional) List of pre-load components, this is used for pre loading react components. * @param {string} portalTarget - (Optional) DOM element into which view will be loaded and used as cosmos portal target(usually a shadowdom element). * @param {string} styleSheetTarget - (Optional) DOM element into which cosmos styles will be injected. * @param {Object} [options={}] - (Optional) Additional options. * @property {boolean} [options.isCaseLocked=false] - (Optional, by default it will be false) Indicates whether the case is locked. * @example In this example we are loading the case 'M-12' in the given targetDom. * const targetElement = document.getElementById('caseContainer'); * const caseId = 'M-12'; * * bootstrapShell.loadCase(targetElement, caseId); */ export function loadCase(targetDom: HTMLElement, caseId: string, preLoadComponents?: any[], portalTarget: string, styleSheetTarget: string, options?: Object): void; /** * Creates a case and loads it into the specified target DOM element. * * @param {string} targetDom - The target DOM element where the case will be loaded. * @param {string} caseId - The ID of the case to be created and loaded. * @param {Array} [preLoadComponents=[]] - (Optional) List of pre-load components, this is used for pre loading react components. * @param {string} portalTarget - (Optional) DOM element into which view will be loaded and used as cosmos portal target(usually a shadowdom element). * @param {string} styleSheetTarget - (Optional) DOM element into which cosmos styles will be injected. * @returns {Promise} A Promise that resolves once the case is created and loaded. * * @example In this example we are creating the with caseID 'C-123' in the given targetDom. * const targetElement = document.getElementById('caseContainer'); * const caseId = 'C-123'; * * bootstrapShell.(targetElement, caseId); */ export function createCase(targetDom: string, caseId: string, preLoadComponents?: any[], portalTarget: string, styleSheetTarget: string): Promise; /** * Loads an assignment into a target DOM element. * * @param {HTMLElement} targetDom - The target DOM element where the assignment will be loaded. * @param {string} assignmentId - The ID of the assignment to load. * @param {Array} [preLoadComponents=[]] - (Optional) List of pre-load components, this is used for pre loading react components. * @param {string} portalTarget - (Optional) Target for the portal. * @param {string} styleSheetTarget - (Optional) Target for the stylesheet. * @param {Object} options - Additional options for loading the assignment. * @property {boolean} options.isUIkit (Internal and Optional) Indicates whether to use UIKit for the assignment. This is used in co-existence scenario * @property {boolean} options.isReloadAssignment (Internal and Optional) Indicates whether to reload the assignment. This is used in co-existence scenario * @property {string} options.caseId - (Internal and Optional) The ID of the case associated with the assignment. This is used in co-existence scenario * @property {boolean} options.acTertiary - Indicates whether the assignment is AC tertiary. * @property {Object} options.uiKitConstellationCaseInCreateStage (Internal and Optional) Indicates whether UIKit is used for the assignment in create stage. This is used in co-existence scenario * @example In the below example we are loading assignment "A-984" in the given targetElement. * const targetElement = document.getElementById('assignmentContainer'); * const assignmentId = 'A-984'; * const options = { * acTertiary: 'additionalContext', * }; * * bootstrapShell.loadAssignment(targetElement, assignmentId, undefined, undefined, undefined, options); */ export function loadAssignment(targetDom: HTMLElement, assignmentId: string, preLoadComponents?: any[], portalTarget: string, styleSheetTarget: string, { isUIkit, isReloadAssignment, caseId, acTertiary, uiKitConstellationCaseInCreateStage }: Object): void; /** * Loads a case preview into a target DOM element. * * @param {HTMLElement} targetDom - The target DOM element where the case preview will be loaded. * @param {Object} caseOptions - Options for the case preview. * @property {string} caseOptions.caseID - The ID of the case for the preview. * @property {string} caseOptions.caseClass - The class of the case for the preview. * @param {Array} [preLoadComponents=[]] - (Optional) List of pre-load components, this is used for pre loading react components. * @param {string} portalTarget - (Optional) DOM element into which view will be loaded and used as cosmos portal target(usually a shadowdom element). * @param {string} styleSheetTarget - (Optional) DOM element into which cosmos styles will be injected. * * @example In this example we are Previewing the case 'C-16' of class 'my-case-class' in the given targetDom * const targetElement = document.getElementById('previewContainer'); * const caseOptions = { * caseID: 'C-16', * caseClass: 'my-case-class' * }; * * loadPreview(targetElement, caseOptions); */ export function loadPreview(targetDom: HTMLElement, caseOptions: Object, preLoadComponents?: any[], portalTarget: string, styleSheetTarget: string): void; /** * Bootstrap the application with authentication header and configuration. * * @param {Object} config - This object contains properties needed to boostrap the application. * @property {string} config.restServerUrl - The REST server URL is a infinity server URL where DXAPI calls will be routed. * @property {boolean} [config.customRendering=false] - (Optional) Default value is false. Indicates whether custom rendering to be honored. * @property {Function} config.onPCoreReadyCallback - Callback function when Pega Core is ready, i.e when constellation bootstrap is completed. * @property {string} config.staticContentServerUrl - The static content server URL. * @property {Object} [config.authInfo={}] - (Optional) Authentication information. * @property {string} config.authInfo.access_token - (Optional) This JWT access token which have short validity period. * @property {number} config.authInfo.expires_in - (Optional) This is the time after which the access_token will get expired. * @property {string} config.authInfo.refresh_token - (Optional) This is the refresh token that will be used to obtain the new access_token, when the original access_token expires. * @property {string} config.authInfo.token_type - (Optional) This is the type of the token. * @example The below is example for authInfo * const authInfo = { * tokenInfo: { * access_token: , * expires_in: 3600, * refresh_token: , * token_type: 'bearer' * } * }; * @property {string} config.renderingMode - (Internal) Rendering mode for the application which can be FULL_PORTAL,PREVIEW, HYBRID, and EMBED. By default it is 'FULL_PORTAL'. This is internal and used only for react infrastructure. * @property {boolean} config.customCookies - (Optional) This will be true if authentication is based on custom cookies * @param {string} target - The target DOM element to load the application. * @param {Array} [preLoadComponents=[]] - (Optional) Preloaded components, this is used for pre loading react components. * @param {string} portalTarget - (Optional) DOM element into which view will be loaded and used as cosmos portal target(usually a shadowdom element) Only applicable for react rendering. * @param {string} styleSheetTarget - (Optional) DOM element into which cosmos styles will be injected. Only applicable for react rendering. * @returns {Promise} A Promise that resolves once the application is bootstrapped. * * @example In this example we are calling the bootstrapWithAuthHeader API with the required application config, which inturn returns a promise * const config = { * restServerUrl: 'https://example.com/api', * customRendering: false, * onPCoreReadyCallback: () => { * console.log('PCore is ready!'); * }, * staticContentServerUrl: 'https://example.com/static', * authInfo: {}, // (Optional) * theme: {}, // (Optional) * renderingMode: 'view', * appAlias: 'app/C11' * }; * const targetElement = document.getElementById('appContainer'); * * bootstrapWithAuthHeader(config, targetElement); */ export function bootstrapWithAuthHeader(config: Object, target: string, preLoadComponents?: any[], portalTarget: string, styleSheetTarget: string): Promise; /** * Initializes the Constellation Core by importing assets and Constellation Core itself. * @private * @param {string} staticContentServer - The static content server URL. * @returns {Promise} A Promise that resolves once initialization is complete. */ export function initConstellationCore(staticContentServer: string): Promise; /** * @private * @returns {boolean} */ export function isNewUnifiedBuild(): boolean; /** * Registers for debug information and sets the application to preview mode. * @private * @param {*} channel - The BroadcastChannel used to post debug information. */ export function registerForDebugInfo(channel: any): void; /** * Toggles the tracer headers based on messages received through the channel. * @private * @param {*} channel - The BroadcastChannel used to toggle tracer headers. */ export function toggleTracerHeaders(channel: any): void; /** * Loads environment information based on the provided configuration. * @private * @param {Object} config - Configuration object containing environment information. * @property {Object} config.theme - Theme information. * @property {string} config.theme.definition - Definition of the theme in JSON format. * @property {Object} config.keyMapping - Key mapping information. */ export function loadEnvironmentInfo(config: Object): Promise; /** * This API overrides the initial locale retrieved by application config. * API must be called at portal loading and bootstrap initialized. * It makes sure all the localized content loads in the given locale instead of the initial locale. * This API can be only called once at the time of portal load. Calling after the portal is loaded * will not load the application's localized content. * * Example usage: * updateLocale('de_DE') * @private * @param {string} locale - The locale to be set. */ export function updateLocale(locale: string): void;