### Install @combeenation/client Source: https://configurator-client.docs.combeenation.com/index.html Install the Combeenation client library using npm. ```bash npm install @combeenation/client Copy ``` -------------------------------- ### getSelectedKey Source: https://configurator-client.docs.combeenation.com/classes/RecordComponent.html Gets the key of the currently selected record. ```APIDOC ## getSelectedKey * getSelectedKey(): Promise Get the key of the currently selected record #### Returns Promise ``` -------------------------------- ### Get Component Value Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Retrieves the current value of a specific component by its name. Use auto-generated component typings for type safety. ```typescript const componentValue = await configurator.getCmpValue("my-text-component"); ``` -------------------------------- ### connect Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Establishes a connection to the Combeenation configurator. Options are automatically retrieved from the URL in managed configurator environments. ```APIDOC ## connect ### Description Establishes a connection to the Combeenation configurator. Options are automatically retrieved from the URL in managed configurator environments. ### Method connect ### Parameters #### Path Parameters - **options** (CfgrConnectionOptions) - Required - Connection options for the configurator. ### Returns Promise ``` -------------------------------- ### constructor Source: https://configurator-client.docs.combeenation.com/classes/ValueComponent.html Initializes a new instance of the ValueComponent class. ```APIDOC ## constructor * new ValueComponent( name: TName, zodType: ZodType ): ValueComponent ### Parameters * name: TName * zodType: ZodType ### Returns ValueComponent ``` -------------------------------- ### Constructor Source: https://configurator-client.docs.combeenation.com/classes/RecordComponent.html Initializes a new instance of the RecordComponent class. ```APIDOC ## constructor * new RecordComponent< TName extends string = string, TKey extends string | number | boolean = string | number | boolean, TRecord extends RecordValue = RecordValue, TInput extends RecordValue = TRecord, >( name: string, zodType: ZodType, ): RecordComponent #### Parameters * name: string * zodType: ZodType ``` -------------------------------- ### Basic React Configurator Usage Source: https://configurator-client.docs.combeenation.com/index.html Demonstrates connecting to the Combeenation configurator, subscribing to component value changes, and updating component inputs within a React application. Ensure you have generated typings for your configurator. ```typescript // See our docs for information on what this is and where to get this file from: // https://docs.combeenation.com/docs/custom-code#update-component-typings import { Amount, TotalPrice } from './generated/cfgr-defs.generated'; import { CombeenationClient } from '@combeenation/client'; function Configurator() { const cfgrClient = useRef(); const [amount, setAmount] = useState(); const [totalPrice, setTotalPrice] = useState(); useEffect(() => { if (!cfgrClient.current) { const client = new ConfiguratorClient(); cfgrClient.current = client; const connectionOptions = { companyName: 'YourCompanyName', configuratorName: 'YourConfiguratorName', }; client.connect(connectionOptions).then(() => { Amount.onValueChanged(setAmount, true); TotalPrice.onValueChanged(setTotalPrice, true); }); } }, []); const onAmountChanged = (e: React.ChangeEvent, updateComponentInput: boolean) => { const value = parseInt(e.target.value); if (!isNaN(value)) { setAmount(value); if (updateComponentInput) { Amount.setInput(value); } } }; return (
Total price: {totalPrice}
); } Copy ``` -------------------------------- ### Connect to Configurator Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Establishes a connection to the Combeenation configurator. Options are automatically retrieved from the URL when running on a managed domain. ```typescript const configurator = new ConfiguratorClient(); await configurator.connect(); ``` -------------------------------- ### checkout(shopInput?: string): Promise Source: https://configurator-client.docs.combeenation.com/functions/Configuration.checkout.html Initiates the checkout process. This function is asynchronous and returns a Promise that resolves when the checkout is complete. ```APIDOC ## checkout(shopInput?: string): Promise ### Description Initiates the checkout process. This function is asynchronous and returns a Promise that resolves when the checkout is complete. ### Parameters #### Query Parameters - **shopInput** (string) - Optional - Identifier for the shop. ### Returns - Promise - A promise that resolves when the checkout process is finished. ``` -------------------------------- ### onNewCfgnIdCreated Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Registers a listener that is called whenever a new configuration ID is created, providing the ID and an authentication token. ```APIDOC ## onNewCfgnIdCreated ### Description Registers a listener that is called whenever a new configuration ID is created, providing the ID and an authentication token. ### Method onNewCfgnIdCreated(listener: (cfgnId: string, authToken: string) => void): void ### Parameters #### Path Parameters - **listener** ((cfgnId: string, authToken: string) => void) - Required - The callback function to execute with the new configuration ID and authentication token. ### Returns void ``` -------------------------------- ### uploadFiles Source: https://configurator-client.docs.combeenation.com/functions/CfgnFiles.uploadFiles.html Uploads one or more files into the current configuration. The key of each file in the input object represents its name, which can be used to retrieve the file later using `configuration.GetFile("")`. ```APIDOC ## Function uploadFiles ### Description Upload one or more files into the current configuration. ### Method Signature `uploadFiles(files: UploadData): Promise>` ### Type Parameters * `T` extends `string`: Represents the type of the file keys. ### Parameters * `files` (UploadData) - Required: An object where keys are file names and values are the file data. The key can be used in Hive with `configuration.GetFile("")`. ### Returns * `Promise>`: A promise that resolves to an object with the same keys as the input `files` object. The values contain the result information for each uploaded file. ``` -------------------------------- ### Html2PdfOptions Source: https://configurator-client.docs.combeenation.com/interfaces/CfgnFiles.Html2PdfOptions.html Defines the configuration options for converting HTML to PDF. Users can specify various properties to control the output, such as header/footer templates, page format, dimensions, and margins. Refer to Pupeteer documentation for detailed explanations of these options. ```APIDOC ## Interface Html2PdfOptions See Pupeteer docs for further details regarding the exposed options. **Note:** You can only use the options mentioned here even though the Pupeteer docs describe some more. Please let us know if you'd need other options as well. interface Html2PdfOptions { displayHeaderFooter?: boolean; footerTemplate?: string; format?: Html2PdfFormats; headerTemplate?: string; height?: string | number; landscape?: boolean; margin?: { bottom?: string | number; left?: string | number; right?: string | number; top?: string | number; }; width?: string | number; } ### Properties * **displayHeaderFooter** (`boolean`, optional): Controls whether to display the header and footer. * **footerTemplate** (`string`, optional): HTML template for the footer. * **format** (`Html2PdfFormats`, optional): The page format (e.g., A4, Letter). Takes priority over `width` or `height`. Defaults to `Html2PdfFormats.A4` if not set. * **headerTemplate** (`string`, optional): HTML template for the header. * **height** (`string | number`, optional): The height of the page. Only takes effect if `format` is not set. * **landscape** (`boolean`, optional): Whether to render the page in landscape mode. * **margin** (`object`, optional): Defines the margins for the page. * **bottom** (`string | number`, optional): Bottom margin. * **left** (`string | number`, optional): Left margin. * **right** (`string | number`, optional): Right margin. * **top** (`string | number`, optional): Top margin. * **width** (`string | number`, optional): The width of the page. Only takes effect if `format` is not set. ``` -------------------------------- ### GraphicComponent Constructor Source: https://configurator-client.docs.combeenation.com/classes/GraphicComponent.html Initializes a new instance of the GraphicComponent class. ```APIDOC ## new GraphicComponent(name: string) ### Description Initializes a new instance of the GraphicComponent class. ### Parameters * **name** (string) - The name of the graphic component. ### Returns * GraphicComponent - An instance of the GraphicComponent. ``` -------------------------------- ### uploadImages Source: https://configurator-client.docs.combeenation.com/functions/CfgnFiles.uploadImages.html Upload one or more images into the current configuration. The key represents the name, which can be used in Hive with `configuration.GetImage("")`. ```APIDOC ## Function uploadImages ### Description Upload one or more images into the current configuration. ### Method Signature `uploadImages(files: UploadData): Promise>` ### Type Parameters * `T` extends `string` ### Parameters * `files` (UploadData) - Required - The key represents the name, which can be used in Hive with `configuration.GetImage("")`. ### Returns * `Promise>` - An object with the same keys as the input. The values contain such result information. ``` -------------------------------- ### createPdfFromHtml Source: https://configurator-client.docs.combeenation.com/functions/CfgnFiles.createPdfFromHtml.html Converts HTML to PDF and uploads the result. The PDF can be accessed later using configuration.GetFile(""). ```APIDOC ## Function createPdfFromHtml ### Description Converts a given HTML to PDF and uploads the resulting pdf to the given resource. ### Signature `createPdfFromHtml(name: string, html: string, displayName?: string, pdfOptions?: Html2PdfOptions): Promise` ### Parameters #### Path Parameters * **name** (string) - Required - Name of the file to which the generated PDF should be uploaded. Can be used in Hive with `configuration.GetFile("")` * **html** (string) - Required - The HTML itself which needs to be converted to a PDF * **displayName** (string) - Optional - Optional name which will be used when downloading the file * **pdfOptions** (Html2PdfOptions) - Optional - PDF generation options ### Returns * Promise - The url of the PDF if successful ``` -------------------------------- ### uploadFiles Source: https://configurator-client.docs.combeenation.com/modules/CfgnFiles.html Uploads configuration files. This function is part of the CfgnFiles namespace and is used to upload various types of configuration files. ```APIDOC ## uploadFiles ### Description Uploads configuration files. ### Parameters (No specific parameters are detailed in the source text.) ### Request Example (No request example is provided in the source text.) ### Response (No specific response details are provided in the source text.) ``` -------------------------------- ### setCmpInputs Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Allows setting input values for multiple components simultaneously. ```APIDOC ## setCmpInputs ### Description Allows setting input values for multiple components simultaneously. ### Method setCmpInputs(values: { name: string; parameter?: string | number | object; value: unknown }[]): Promise ### Parameters #### Path Parameters - **values** ({ name: string; parameter?: string | number | object; value: unknown }[]) - Required - An array of objects, each specifying the component name, an optional parameter, and the value to set. ### Returns Promise ``` -------------------------------- ### share Function Source: https://configurator-client.docs.combeenation.com/functions/Configuration.share.html The share function allows users to share configuration data. It accepts ShareRequestData and returns a Promise that resolves to either undefined or ShareResultData. ```APIDOC ## Function share * share(data: ShareRequestData): Promise ### Description Shares configuration data. This function takes a ShareRequestData object as input and returns a Promise that resolves to either undefined or ShareResultData upon completion. ### Parameters #### Data Parameter - **data** (ShareRequestData) - Required - The data object containing information for sharing. ### Returns - Promise - A Promise that resolves to ShareResultData if the share operation is successful, or undefined if it fails or is not applicable. ``` -------------------------------- ### Listen for New Configuration ID Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Registers a listener that is called whenever a new configuration ID is created. This ID can be used for copying or editing existing configurations. ```typescript configurator.onNewCfgnIdCreated((cfgnId, authToken) => { console.log(`New configuration ID created: ${cfgnId}`); // Use authToken for subsequent requests if needed }); ``` -------------------------------- ### setInput Source: https://configurator-client.docs.combeenation.com/classes/RecordComponent.html Sends the ChangeConfigurationValue request to the server with the provided input value. ```APIDOC ## setInput * setInput(value: undefined | TInput): Promise Sends the ChangeConfigurationValue request to the server #### Parameters * value: undefined | TInput #### Returns Promise ``` -------------------------------- ### setInput Source: https://configurator-client.docs.combeenation.com/classes/ValueComponent.html Sends a request to the server to change the configuration value of the component. ```APIDOC ## setInput * setInput(value: undefined | TInput): Promise ### Parameters * value: undefined | TInput ### Returns Promise ``` -------------------------------- ### onSelectedKeyChanged Source: https://configurator-client.docs.combeenation.com/classes/RecordComponent.html Assigns a listener that is executed when the selected key changes. ```APIDOC ## onSelectedKeyChanged * onSelectedKeyChanged( listener: CmpRecordKeyChangedListener, callImmediately?: boolean, condition?: CmpRecordKeyChangedCondition, ): void With this function a listener can be assigned which is executed whenever the selected key of a record component changes #### Parameters * listener: CmpRecordKeyChangedListener Called whenever the selected key of the given record component has changed * callImmediately: boolean = false `True:` The listener is immediately called with the current key and value of the cmp at the time, the listener is added `False:` The listener will be called for the first time when the key of the cmp actually changes * `Optional`condition: CmpRecordKeyChangedCondition A predicate function which is given the new cmp key and value. The function can decide on whether the listener is called or not by returning true or false. #### Returns void ``` -------------------------------- ### createPdfFromHtml Source: https://configurator-client.docs.combeenation.com/modules/CfgnFiles.html Creates a PDF document from HTML content. This function is part of the CfgnFiles namespace and utilizes HTML to PDF conversion capabilities. ```APIDOC ## createPdfFromHtml ### Description Creates a PDF document from HTML content. ### Parameters (No specific parameters are detailed in the source text.) ### Request Example (No request example is provided in the source text.) ### Response (No specific response details are provided in the source text.) ``` -------------------------------- ### uploadImages Source: https://configurator-client.docs.combeenation.com/modules/CfgnFiles.html Uploads images. This function is part of the CfgnFiles namespace and is specifically for uploading image files. ```APIDOC ## uploadImages ### Description Uploads images. ### Parameters (No specific parameters are detailed in the source text.) ### Request Example (No request example is provided in the source text.) ### Response (No specific response details are provided in the source text.) ``` -------------------------------- ### getRecordByKey Source: https://configurator-client.docs.combeenation.com/classes/RecordComponent.html Retrieves the data of a specific record by its key. ```APIDOC ## getRecordByKey * getRecordByKey(key: TKey): Promise Returns the data of a specific record #### Parameters * key: TKey The key value of the wanted record #### Returns Promise The record (key-value-pair) or undefined if no record with the given key was found ``` -------------------------------- ### Set Multiple Component Inputs Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Allows setting input values for multiple components simultaneously. Each value object requires a name and the value to set. ```typescript await configurator.setCmpInputs([ { name: "component1", value: "new value 1" }, { name: "component2", value: 123 }, { name: "component3", parameter: "param1", value: { key: "value" } }, ]); ``` -------------------------------- ### getValue Source: https://configurator-client.docs.combeenation.com/classes/RecordComponent.html Retrieves the current value of the component. ```APIDOC ## getValue * getValue(): Promise Function for receiving the value of a component. #### Returns Promise ``` -------------------------------- ### getAllRecords Source: https://configurator-client.docs.combeenation.com/classes/RecordComponent.html Retrieves all records associated with this component. ```APIDOC ## getAllRecords * getAllRecords(): Promise #### Returns Promise ``` -------------------------------- ### setInput Method Source: https://configurator-client.docs.combeenation.com/classes/GraphicComponent.html Sets an input property of the graphic component. ```APIDOC ## setInput(property: "Archive" | "Width" | "Height", value: unknown): void ### Description Sets an input property of the graphic component. Ensure that the Hive rule processes the input when setting a value. ### Parameters * **property** ("Archive" | "Width" | "Height") - The name of the input property to set. * **value** (unknown) - The value to set for the specified property. ``` -------------------------------- ### Subscribe to Any Component Value Change (Eager) Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Subscribes a listener to be called when any of the specified components change. With `lazy: false` (default), values for all changed components are fetched immediately. ```typescript CmpUtils.onAnyCmpValueChanged(() => { // The data for both values has been fetched in the background, so no further server request is necessary const bigData1 = await CmpBigData1.getValue(); const bigData2 = await CmpBigData2.getValue(); }, [CmpBigData1, CmpBigData2]); ``` -------------------------------- ### onRecordsChanged Source: https://configurator-client.docs.combeenation.com/classes/RecordComponent.html Assigns a listener that is executed when the record data changes. ```APIDOC ## onRecordsChanged * onRecordsChanged( listener: CmpRecordsChangedListener, callImmediately?: boolean, ): void With this function a listener can be assigned which is executed whenever the data of a record component changes #### Parameters * listener: CmpRecordsChangedListener Called whenever the records of the given record cmp has changed * callImmediately: boolean = false `True:` The listener is immediately called with the current records of the record cmp at the time, the listener is added `False:` The listener will be called for the first time when the records of the cmp actually change #### Returns void ``` -------------------------------- ### setSelectedKey Source: https://configurator-client.docs.combeenation.com/classes/RecordComponent.html Sets the selected key for the record component. ```APIDOC ## setSelectedKey * setSelectedKey(key: TKey): Promise #### Parameters * key: TKey #### Returns Promise ``` -------------------------------- ### onAnyCmpValueChanged Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Subscribes to changes in any of the specified components. The listener can be configured to fetch values lazily. ```APIDOC ## onAnyCmpValueChanged ### Description Subscribes to changes in any of the specified components. The listener can be configured to fetch values lazily. ### Method onAnyCmpValueChanged>(listener: CmpValuesChangedListener, components: TInput[], lazy?: boolean): Promise ### Type Parameters * TInput extends ValueComponent ### Parameters #### Path Parameters - **listener** (CmpValuesChangedListener) - Required - The callback function to execute when component values change. - **components** (TInput[]) - Required - An array of components to monitor for changes. - **lazy** (boolean) - Optional - If true, values are not fetched immediately. Defaults to false. ### Returns Promise ### Example [SCENARIO 1] where `lazy: true` could be benefical ``` CmpUtils.onAnyCmpValueChanged(() => { const useBigData = CmpSimpleBool.getValue(); if(useBigData) { // only now the data will be retrieved from the server const bigData = await CmpBigData.getValue(); } }, [CmpBigData, CmpSimpleBool, CmpSimpleText], true); ``` [SCENARIO 2] where `lazy: false` could be benefical ``` CmpUtils.onAnyCmpValueChanged(() => { // The data for both values has been fetched in the background, so no further server request is necessary const bigData1 = await CmpBigData1.getValue(); const bigData2 = await CmpBigData2.getValue(); }, [CmpBigData1, CmpBigData2]); ``` ``` -------------------------------- ### onValueChanged Method Source: https://configurator-client.docs.combeenation.com/classes/GraphicComponent.html Registers a listener to be called when the value of the graphic component changes. ```APIDOC ## onValueChanged(listener: CmpValueChangedListener, callImmediately?: boolean, condition?: CmpValueChangedCondition): void ### Description Registers a listener to be called when the value (SVG string) of the graphic component changes. The listener can be optionally called immediately upon registration and can be filtered by a condition. ### Parameters * **listener** (CmpValueChangedListener) - The function to call when the value changes. Called whenever the value (SVG string) of the given cmp has changed. * **callImmediately** (boolean, optional, default: false) - If true, the listener is immediately called with the current value. If false, the listener is called only when the value actually changes. * **condition** (CmpValueChangedCondition, optional) - A predicate function that determines whether the listener should be called based on the new value. ``` -------------------------------- ### getValue Source: https://configurator-client.docs.combeenation.com/classes/ValueComponent.html Retrieves the current value of the component. This function is asynchronous and may return undefined. ```APIDOC ## getValue * getValue(): Promise ### Returns Promise ``` -------------------------------- ### setVisualInput Method Source: https://configurator-client.docs.combeenation.com/classes/GraphicComponent.html Sets an input property of a specific visual within the graphic component. ```APIDOC ## setVisualInput(visual: TVisualName, property: string, value: unknown): void ### Description Sets an input property of a specific visual within the graphic component. Ensure that the Hive rule processes the input when setting a value. ### Parameters * **visual** (TVisualName) - The name of the visual. * **property** (string) - The name of the property as seen in the cfgr editor (e.g., 'X' or 'Texture.Source'). * **value** (unknown) - The value to set for the specified property. ``` -------------------------------- ### Subscribe to Any Component Value Change (Lazy) Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Subscribes a listener to be called when any of the specified components change. With `lazy: true`, component values are fetched only when needed within the listener. ```typescript CmpUtils.onAnyCmpValueChanged(() => { const useBigData = CmpSimpleBool.getValue(); if(useBigData) { // only now the data will be retrieved from the server const bigData = await CmpBigData.getValue(); } }, [CmpBigData, CmpSimpleBool, CmpSimpleText], true); ``` -------------------------------- ### onValueChanged Source: https://configurator-client.docs.combeenation.com/classes/RecordComponent.html Assigns a listener that is executed when the component's value changes. ```APIDOC ## onValueChanged * onValueChanged( listener: CmpValueChangedListener, callImmediately?: boolean, condition?: CmpValueChangedCondition, ): void #### Parameters * listener: CmpValueChangedListener Called whenever the value of the given cmp has changed * callImmediately: boolean = false `True:` The listener is immediately called with the current value of the cmp at the time, the listener is added `False:` The listener will be called for the first time when the value of the cmp actually changes * `Optional`condition: CmpValueChangedCondition A predicate function which is given the new cmp value. The function can decide on whether the listener is called or not by returning true or false. #### Returns void ``` -------------------------------- ### onCmpValueChanged Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Subscribes to changes in a specific component's value, with optional conditions and immediate invocation. ```APIDOC ## onCmpValueChanged ### Description Subscribes to changes in a specific component's value, with optional conditions and immediate invocation. ### Method onCmpValueChanged(cmpName: string, listener: CmpValueChangedListener, condition?: CmpValueChangedCondition, callImmediately?: boolean): Promise ### Type Parameters * TValue extends unknown ### Parameters #### Path Parameters - **cmpName** (string) - Required - The name of the component to monitor. - **listener** (CmpValueChangedListener) - Required - The callback function to execute when the component's value changes. - **condition** (CmpValueChangedCondition) - Optional - A condition that must be met for the listener to be invoked. - **callImmediately** (boolean) - Optional - If true, the listener is called immediately upon subscription. Defaults to false. ### Returns Promise ``` -------------------------------- ### getCmpValue Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Retrieves the current value of a specified component. It's recommended to use component-specific methods for type safety. ```APIDOC ## getCmpValue ### Description Retrieves the current value of a specified component. It's recommended to use component-specific methods for type safety. ### Method getCmpValue(cmpName: string): Promise ### Type Parameters * T extends unknown ### Parameters #### Path Parameters - **cmpName** (string) - Required - The name of the component whose value is to be retrieved. ### Returns Promise ``` -------------------------------- ### Subscribe to Specific Component Value Change Source: https://configurator-client.docs.combeenation.com/classes/ConfiguratorClient.html Subscribes a listener to be called when a specific component's value changes. An optional condition and immediate call can be specified. ```typescript await configurator.onCmpValueChanged("my-text-component", (newValue, oldValue) => { console.log(`Value changed from ${oldValue} to ${newValue}`); }); ``` -------------------------------- ### onValueChanged Source: https://configurator-client.docs.combeenation.com/classes/ValueComponent.html Subscribes a listener to value changes of the component. The listener can be called immediately upon subscription and can be filtered by a condition. ```APIDOC ## onValueChanged * onValueChanged( listener: CmpValueChangedListener, callImmediately?: boolean, condition?: CmpValueChangedCondition ): void ### Parameters * listener: CmpValueChangedListener Called whenever the value of the given cmp has changed * callImmediately: boolean = false `True:` The listener is immediately called with the current value of the cmp at the time, the listener is added `False:` The listener will be called for the first time when the value of the cmp actually changes * `Optional`condition: CmpValueChangedCondition A predicate function which is given the new cmp value. The function can decide on whether the listener is called or not by returning true or false. ### Returns void ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.