### get(key) examples with results Source: https://docs.combeenation.com/docs/configurator-logic/components/record-component Examples of the get(key) function on a table, showing the returned record for keys 1, 3, and 9 (which returns Empty). ```plaintext #fruits.Records.get(1) ``` ```plaintext #fruits.Record.get(3) ``` ```plaintext #fruits.Record.get(9) ``` -------------------------------- ### Example JSON document with products and categories Source: https://docs.combeenation.com/docs/asset-management/data-source-asset/json-based-data-sources Sample JSON document used in the examples. It contains a 'products' array of objects and a 'categories' array. Download products.json to try the examples. ```json { "products": [ { "id": 21, "title": "Cucumber" }, { "id": 22, "title": "Dog Food" }, { "id": 23, "title": "Eggs" } ], "categories": ["ingredients", "furniture", "pets"] } ``` -------------------------------- ### HTTP GET Request Example Source: https://docs.combeenation.com/docs/integrations-and-api/workflows/workflow-in-depth Example of performing a GET request using the http.get method with the requestConfig and handling the response and error. ```javascript export function run() { return http .get(url, requestConfig) .then(response => { printResponse(response); }) .catch(error => { printError(error); }); } ``` -------------------------------- ### i18n configuration example Source: https://docs.combeenation.com/docs/quote-management/customize-quote-ui Example configuration with an Accordion using a translated title and i18n definitions for English and German. If a translation is missing, the raw key like '$contact' is displayed. ```json { "main": [ { "title": "$contact", "$type": "Accordion" } ], "i18n": { "en": { "contact": "Contact" }, "de": { "contact": "Kontakt" } }} ``` -------------------------------- ### presets.Current.StartUrl Source: https://docs.combeenation.com/docs/configurator-logic/configurator-and-presets-variable Returns the URL to start a new configuration based on the same preset as the current configuration. ```APIDOC ## presets.Current.StartUrl ### Description Returns the URL to start a new configuration based on the same preset as the current configuration. ### Method Property access ### Endpoint presets.Current.StartUrl ### Parameters None ### Request Example ``` presets.Current.StartUrl ``` ### Response #### Success Response - **startUrl** (string) - The URL for starting a brand-new configuration based on the preset. #### Response Example ``` "https://example.com/start?preset=current" ``` ``` -------------------------------- ### Get start URL for current preset Source: https://docs.combeenation.com/docs/configurator-logic/configurator-and-presets-variable Use this expression to retrieve the start URL for a new configuration based on the same preset as the current configuration. The presets variable is mandatory and can be accessed at the top level using @top.presets. ```plaintext presets.Current.StartUrl ``` -------------------------------- ### Shopware6Parameter JSON example Source: https://docs.combeenation.com/docs/integrations-and-api/checkout-types/shopware-6 Example JSON object for passing data from Combeenation to Shopware. Includes main product with optional custom fields and accessories. Note that at least one product must be defined and the price is gross without accessories. ```json new Shopware6Parameter { //addToWishlist: true, // determines if this product and all its accessoires will be added to the wishlist instead of the cart (default: false) products : [ // (mandatory) at least one product must be defined new { main : new { productId : "123456", // SKU id from your Shopware system quantity : 1, price : 99.99, // gross price of the configured product WITHOUT accessories imageUrl : "Assetbundle1.MyImage.url", // url to the image which will be used in the cart title : "My coffee mug", // new title of the product productText : "My product text", // new description of your product customFields : [ // (optional) new { id : "model", // unique identifier label : "Model type", // label which the user will also see in the cart (if it is visible) value : "espresso", // value of the custom field position : 1, // position in the cart //isVisible: true // if it should be visible in the cart (default: true) }, new { id : "productionId", label : "Prod id", value : "DLU-128120-HR", position : 2, isVisible : false } ] }, // (optional) additional predefined Shopware products which will be added to the cart (no custom price/image/title) accessories : [ new { productId : "987654", quantity : 1 }, new { productId : "456789", // Shopware sku quantity : 2, // if false (default) the product will be linked to the main product and can't be deleted from cart // if true the product will be added as a standalone product to the cart isSingleCartItem : true } ] } ]} ``` -------------------------------- ### Result of formatted text example Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/text-type The multi-line text produced by the previous formatted text example. ```hive The answer is of course "42".What else? ``` -------------------------------- ### Math.log2 example Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/math-type Returns the base 2 logarithm of a number. Example: Math.log2(2) returns 1. ```plaintext Math.log2(2) ``` -------------------------------- ### HTTP HEAD, OPTIONS, and DELETE Request Example Source: https://docs.combeenation.com/docs/integrations-and-api/workflows/workflow-in-depth Template for head, options, and delete requests using the http.head method with requestConfig. ```javascript export function run() { return http .head(url, requestConfig) .then(response => { printResponse(response); }) .catch(error => { printError(error); }); } ``` -------------------------------- ### Math.sqrt example Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/math-type Returns the square root of a number. Example: Math.sqrt(4) returns 2. ```plaintext Math.sqrt(4) ``` -------------------------------- ### Example FinishActions rule Source: https://docs.combeenation.com/docs/integrations-and-api/configuration-finish Defines a list of finish actions. Uses an explicit type to allow a list of any finish action type. The example shows conditional actions based on Input: setting a goal and sending a mail for 'Save', or setting a goal and creating a quote for 'Quote'. ```plaintext var actions : List = [ OnFinish.SetOutput({ color: SelectedColor, price: unitPrice * Amount }), ]; if Input = "Save" then actions.concat([ OnFinish.SetGoal("Save"), OnFinish.SendMail(new { from: new { mail: "test@example.com", name: "Test Inc." }, to: [ new { mail: "user@example.com" } ], subject: "Test Mail", message: "Example content", }) ]) elif Input = "Quote" then actions.concat([ OnFinish.SetGoal("Quote"), OnFinish.Quote(MyQuote) ]) else actions end ``` -------------------------------- ### QRCode.generate usage example Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/qr-code Shows the required prefix for calling QRCode functions. All functions on this page must be prefixed with the QRCode type name. ```plaintext QRCode.generate("some text") ``` -------------------------------- ### Sample JSON data with products and options Source: https://docs.combeenation.com/docs/asset-management/data-source-asset/json-based-data-sources Excerpt from the products_options.js file used for the examples. Shows a product object with a property name as key and an options array with objects identified by name. ```json { "products": { "p1": { "title": "Snare Boot", "productType": "Boots", "options": [ { "name": "Color", "optionValues": [ { "name": "Black" }, { "name": "Blue" } ] } ] } }} // collapsed for brevity ``` -------------------------------- ### computeSha256 examples with base64 and hex output Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/hash-type Examples of the computeSha256 function. The second parameter isBase64Encoded defaults to true (base64 output); when false, output is hex (base16). ```plaintext Hash.computeSha256("") // 47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=Hash.computeSha256("some value") // qz0H8xacy9DtbEtF3iFRn5+TjHLSQSSZiquUnOg7tRs=Hash.computeSha256("", false) // e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855Hash.computeSha256("some value", false) // ab3d07f3169ccbd0ed6c4b45de21519f9f938c72d24124998aab949ce83bb51b ``` -------------------------------- ### Math.max examples Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/math-type Returns the greater of two numbers. Examples: Math.max(3, 5) returns 5, Math.max(-7, -2) returns -2. ```plaintext Math.max(3, 5) ``` ```plaintext Math.max(-7, -2) ``` -------------------------------- ### Quote configuration example Source: https://docs.combeenation.com/docs/quote-management/how-to-work-with-quotes Shows a full Quote object with all configurable properties, including customer, company, shipping, items, and rules. Commented lines indicate optional properties. ```csharp new Quote { quoteHubName : "QuoteHubName", assetBundleName: "MyBundle", // pdfAssetPath : "assetFolder.pdfAssetName", assignee: [ user.mail ], subject : "Subject", projectId : "ProjectId", currency : Currency.EUR, // taxRule : QuoteTaxRule.RevealSalesTax, // notes : "Notes text", // paymentDueDays : 30, // offerValidityDays : 90, // contributionMarginRatioThreshold : 60, customer : new { firstName : "John", lastName : "Doe", companyName : "My Company GmbH", city : "City", street : "Street 13", // addressLine1 : "My Company GmbH", // addressLine2 : "Building C", postalCode : "PostalCode", country : "Country", emailAddress : "john.doe@mail.com", phoneNumber : "+43 1 12345678" }, company: new { name: "Combeenation GmbH", city: "Neufelden", street: "Linzer Straße 4", // addressLine1: "Oberösterreich", // addressLine2: "Building A", postalCode: "4120", country: "Österreich", emailAddress: "info@combeenation.com", phoneNumber: "+43 7282 202 00", imageUrl: "", taxId: "ATU23423", // bankDetails: new { // accountHolderName: "Combeenation GmbH", // accountNumber: "324234", // bankName: "Sparkasse", // swift: "BC3234", // bic: "BC3234", // iban: "AT32304203402340" // } }, // shipping: new { // firstName: "John", // lastName: "Doe", // companyName: "My Company GmbH", // // addressLine1: "Upper Austria", // // addressLine2: "Building C", // city: "City", // street: "Street 13", // postalCode: "PostalCode", // country: "Country", // emailAddress: "john.doe@mail.com", // phoneNumber: "+43 1 12345678" // }, items : [ new QuoteSection { name : "Main" }, new QuoteLineItem { name : "My Product 1", description : "Description text", quantity : 10, unit : "m", priceNet : 10, tax : 20 }, new QuoteLineItem { name : "My Product 2", sku : "MP-2", description : "Description text", quantity : 1, unit : "mm", priceNet : 20.5, variableCostNet : 15, // contributionMarginRatioThreshold : 50, tax : 20, discount : new { value : 5, // valueType : PriceAdjustmentType.Percent }, isOptional : true, imageUrl : "https://picsum.photos/id/2/200", rules: new { priceNet: new QuoteMinMaxRule { min: 10, max: 1000 }, quantity: new QuoteAllowedNumbersRule { numbers: [1, 5, 10, 15] }, unit: new QuoteAllowedTextsRule { texts: ["mm", "cm", "m"] }, discount: new { value: new QuoteMinMaxRule { min: 0, max: 10 } } }, fields : new { myItemCustomField : "My line item property value" }, fieldRules: new { myItemCustomField: new QuoteLockRule { } }, actionRules: new { delete: new QuoteLockRule { } } }, new QuoteDiscount { name: "Special Discount", value: 300, valueType: PriceAdjustmentType.Absolute, rules: new { value: new QuoteMinMaxRule { min: 0, max: 400 } }, actionRules: new { delete: new QuoteLockRule { } } }, new QuoteDiscount { name: "Summer Sale", value: 1, valueType: PriceAdjustmentType.Percent, rules: new { value: new QuoteMinMaxRule { min: 0, max: 5 } ``` -------------------------------- ### getFirst example Source: https://docs.combeenation.com/docs/configurator-logic/components/record-component Returns the first record of a table, or empty if there are no records. The comment shows the expected result for the fruits table. ```plaintext #fruits.Records.getFirst() // returns [ 1,"Apples", 10] ``` -------------------------------- ### HTTP POST, PUT, and PATCH Request Example Source: https://docs.combeenation.com/docs/integrations-and-api/workflows/workflow-in-depth Template for post, put, or patch requests. The content must be provided as a string, as shown with JSON.stringify. ```javascript export function run() { const content = { text: 'HTTP request content of a workflow' }; return http .post(url, JSON.stringify(content)) .then(response => { printResponse(response); }) .catch(error => { printError(error); }); } ``` -------------------------------- ### Liquid for-loop context example Source: https://docs.combeenation.com/docs/asset-management/pdf-asset Defines a context with a list of line items to iterate over. ```json { "lineItems": [ { "position": 1, "description": "Service A description", "price": "40,00 €" }, { "position": 2, "description": "Service B description", "price": "25,00 €" } ]} ``` -------------------------------- ### Math.log10 example Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/math-type Returns the base 10 logarithm of a number. Example: Math.log10(2) returns 0.301029995663981. ```plaintext Math.log10(2) ``` -------------------------------- ### Text field examples Source: https://docs.combeenation.com/docs/quote-management/customize-quote-ui Examples of field controls for text: TextField for normal input, TextField with multiline, and RichtextField for rich text. All use the 'notes' property. ```json [ { "property": "notes", "$type": "TextField" }, { "property": "notes", "$type": "TextField", "multiline": true }, { "property": "notes", "$type": "RichtextField" }] ``` -------------------------------- ### computeHmacSha256 examples with base64 and hex output Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/hash-type Examples of the computeHmacSha256 function. The third parameter isBase64Encoded defaults to true (base64 output); when false, output is hex (base16). ```plaintext Hash.computeHmacSha256("", "") // thNnmggU2ex3L5XXeMNfxf8Wl8STcVZTxscSFEKSxa0=Hash.computeHmacSha256("some value", "some secret") // gcOIOIoay4FP/bY7cDX/3xf8JheKkEwUWmL1cyVTdLg=Hash.computeHmacSha256("", "some secret", false) // f6ea2d6efc05da393de3fa47d17eda28ae5e25197501e889e4d995f8e53ea8f6Hash.computeHmacSha256("some value", "some secret", false) // 81c388388a1acb814ffdb63b7035ffdf17fc26178a904c145a62f573255374b8 ``` -------------------------------- ### Math.log example Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/math-type Returns the natural logarithm (base e) of a number. Example: Math.log(2) returns 0.693147180559945. ```plaintext Math.log(2) ``` -------------------------------- ### Math.abs examples Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/math-type Returns the absolute value of a number. Examples: Math.abs(-13.37) returns 13.37, Math.abs(5) returns 5. ```plaintext Math.abs(-13.37) ``` ```plaintext Math.abs(5) ``` -------------------------------- ### Inject viewer into control Source: https://docs.combeenation.com/docs/configurator-ui-ux/controls/3d-viewer-control-with-custom-code Install the viewer with `npm i @combeenation/3d-viewer` and use `injectViewer` to pass it to the control. Requires setting the viewer version property to `Injected`. ```javascript import { Viewer } from '@combeenation/3d-viewer'; // ... CfgrUtils.onCfgrReady(() => { // ... CtrlUtils.getViewerCtrl('viewer3d').injectViewer(Viewer); // ... }); ``` -------------------------------- ### Viewer3d.modelParameter usage example Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/viewer3d-type Shows how to call Viewer3d.modelParameter with Models3d.CoffeeCup to set a parameter. The source warns to use Models3d.CoffeeCup syntax instead of constructing the string manually. ```plaintext Viewer3d.modelParameter(Models3d.CoffeeCup, "visible", true) ``` -------------------------------- ### Liquid math filter example Source: https://docs.combeenation.com/docs/asset-management/pdf-asset Calculates net total price and sum discount percentage using times, divided_by, and round filters. Note that divided_by returns the same type as the divisor. ```liquid {% assign netTotalPriceFloat = netTotalPrice | times: 1.0 %}{% assign sumDiscountPercentage = 100.0 | divided_by: netTotalPriceFloat | times: sumDiscounts | round: 2 %} ``` -------------------------------- ### Use Math.sin(90) Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/math-type Example of using a math type function, prefixed with the math type name. ```plaintext Math.sin(90) ``` -------------------------------- ### Access configurator.owner.logo?.url property Source: https://docs.combeenation.com/docs/configurator-logic/configurator-and-presets-variable Example of accessing the url property of the logo FileUrl, using optional chaining. ```plaintext configurator.owner.logo?.url ``` -------------------------------- ### mail.send Source: https://docs.combeenation.com/docs/integrations-and-api/workflows/workflow-in-depth Example demonstrating how to send an email with a PDF attachment using the mail.send method. ```APIDOC ## mail.send(options) ### Description Sends an email from a workflow. Supports single or multiple recipients and file attachments by URL. Uses mail tenant settings, or the main company's mail settings if no distributor name is provided. Limited to a maximum of 10 mails per workflow run. ### Method mail.send ### Parameters - **options** (object) - Required - Email configuration object with the following fields: - **sender** (string) - Required - Sender email address. - **to** (string or array) - Required - Recipient email address(es). - **subject** (string) - Required - Email subject. - **body** (string) - Required - Email body content. - **attachments** (array) - Optional - List of attachment objects, each containing: - **filename** (string) - Required - Name of the attached file. - **url** (string) - Required - URL to the file. - **mediaType** (string) - Required - MIME type of the file. ### Example ```javascript export function run() { return mail.send({ sender: 'noreply@example.com', to: 'recipient@example.com', subject: 'Your Quote is ready', body: 'Please find the attached Quote.', attachments: [ { filename: 'report.pdf', url: 'https://example.blob.core.windows.net/files/report.pdf', mediaType: 'application/pdf' } ] }); } ``` ``` -------------------------------- ### Liquid object context example Source: https://docs.combeenation.com/docs/asset-management/pdf-asset Defines a context with a company object and name property to inject into an HTML section. ```json { "company": { "name": "Acme Solutions Ltd." }} ``` -------------------------------- ### Access configurator.isPublished property Source: https://docs.combeenation.com/docs/configurator-logic/configurator-and-presets-variable Example of accessing the isPublished property of the configurator variable. ```plaintext configurator.isPublished ``` -------------------------------- ### quotes.get, quote.createPdf, quote.publish Source: https://docs.combeenation.com/docs/integrations-and-api/workflows/workflow-in-depth Example demonstrating how to load a quote using the quotes.get method, access its data, create a PDF asset, modify a property, and publish the quote. ```APIDOC ## quotes.get(hubName, quoteNumber) ### Description Loads a quote using the given hub name and quote number. The returned quote object provides access to quote data and methods to create PDFs and publish changes. ### Method quotes.get ### Parameters - **hubName** (string) - Required - The name of the hub. - **quoteNumber** (string) - Required - The quote number. ### Returns A Promise that resolves to a quote object with the following properties and methods: - **data** (object) - Contains quote properties such as `hubName` and `quoteNumber`. - **createPdf(assetPath)** (function) - Creates a PDF asset and returns a link to it. - **publish()** (function) - Publishes the quote with the current data. ### Example ```javascript export function run() { const hubName = 'HUB'; const quoteNumber = 'A2026200'; return quotes .get(hubName, quoteNumber) .then(quote => { // quote.data can be used to retrieve properties from a quote var quoteData = quote.data; console.log(quoteData.hubName); console.log(quoteData.quoteNumber); // get the link to a pdf asset const linkToQuotePdf = quote.createPdf('myPdfAssetPath'); // change and publish a quote quoteData.state = 'won'; return quote.publish(); }) .catch(error => { printError(error); }); } ``` ``` -------------------------------- ### Query all uploaded files with configuration.GetFiles Source: https://docs.combeenation.com/docs/configurator-logic/file-upload-and-handling Uses configuration.GetFiles() to obtain a table of all uploaded files, which updates automatically. The example filters files by name prefix 'img_' and can be used inside a TableComponent. ```hive from configuration.GetFiles() select allfilter .name.take(4) = "img_" ``` -------------------------------- ### Liquid object input example Source: https://docs.combeenation.com/docs/asset-management/pdf-asset Injects the company name property into the HTML section. ```liquid {{ company.name }} ``` -------------------------------- ### add(table) example Source: https://docs.combeenation.com/docs/configurator-logic/components/record-component Produces the union of two tables. Both tables must have the same columns, and if duplicate keys exist, the first record (from the table on which add is called) is kept. ```plaintext #fruits.Records.add(#vegetables.Records) ``` -------------------------------- ### Fetch order line item by ID Source: https://docs.combeenation.com/docs/integrations-and-api/checkout-types/shopware-6 Example response from the order-line-item endpoint showing the structure of configuration data stored in the payload, including custom fields and configurator URLs. ```json { "id": "b42159bbfcf644809bde62d9d2c0fe5f", "type": "order_line_item", "attributes": { "productId": "c5d43dc9a4784b399b81a774d5ff5377", "quantity": 1, "label": "Single Weiss", "payload": { "combeenationPrice": 359, "combeenationImageId": "4e461b3abd36451aacab32be44f87a0d", "combeenationCustomFields": [ { "id": "textInput", "label": "Texteingabe", "value": "Combeenation", "position": 1, "isVisible": true }, { "id": "textPosition", "label": "Textposition", "value": "Vorne oben", "position": 2, "isVisible": true }, { "id": "font", "label": "Schriftart", "value": "Lobster", "position": 3, "isVisible": true }, { "id": "fontColor", "label": "Schriftfarbe", "value": "Royalblau", "position": 4, "isVisible": true }, { "id": "logoUrl", "label": "Logoupload URL", "value": "https://combeespecs.blob.core.windows.net/resources/ACRIS/PORZELLAN/resources/0C9aCfcJYWG.png", "position": 5, "isVisible": true }, { "id": "logoSize", "label": "Logo-Größe", "value": "M", "position": 6, "isVisible": true }, { "id": "fondColor", "label": "Fond-Bemalung", "value": "Eisenrot", "position": 9, "isVisible": true } ], "combeenationConfiguratorEditUrl": "164537474310767104/edit/0BsbN0hebq4", "combeenationConfiguratorId": "164537474310767104", "isCloseout": false, "customFields": { "acris_cms_layout_slot_config": [] }, "createdAt": "2022-10-07 09:19:35.559", "releaseDate": null, "isNew": false, "markAsTopseller": null, "purchasePrices": "{\"extensions\":[],\"currencyId\":\"b7d2554b0ce847cd82f3ac9bd1c0dfca\",\"net\":0,\"gross\":0,\"linked\":true,\"listPrice\":null,\"percentage\":null,\"regulationPrice\":null}", "productNumber": "158531C-999", "manufacturerId": "0fd9e3fa3a6e4980870116111dc37a15", "taxId": "9a518fcac39347a78155c7a711217dd5", "tagIds": null, "categoryIds": ["12e24ea60d684d5e8116fbc588c6e76c", "617f724d27894167a39e56605f3ed9be"], "propertyIds": null, "optionIds": null, "options": [], "streamIds": ["9e618e47ab5a415d89d71b487c7cb1b1"], "parentId": null, "stock": 999, "features": [] }, "good": false, "position": 2, "unitPrice": 379.0, "totalPrice": 379.0, "customFields": null, "apiAlias": null }, "links": { "self": "https://YOURSHOP.com/api/order-line-item/b42159bbfcf644809bde62d9d2c0fe5f" }, "relationships": [], "meta": null } ``` -------------------------------- ### Start AR Source: https://docs.combeenation.com/docs/configurator-ui-ux/controls/3d-viewer-control Activates the AR mode. Automatically detects if the device is AR capable; if not, shows a QR code that can be scanned by an AR-capable mobile device. ```APIDOC ## Start AR ### Description Activates the augmented reality mode. The viewer automatically detects if the device is capable of showing the model in AR (requires a camera, e.g., mobile phones/tablets, and browser/OS limitations are considered). If the device is AR capable, the AR scene is entered automatically; otherwise, a QR code is shown that leads to the same AR endpoint. ### Parameters #### Optional Parameters - **QR subtitle** (string) - Optional - Customizable text for the QR code layer (e.g., "See the product at home"). - **QR description** (string) - Optional - Customizable text for the QR code layer (the text below the subtitle in the screenshot). - **Preparation text** (string) - Optional - Customizable text for the load mask shown while the 3D model is being prepared for the AR scene. - **Popup blocked title** (string) - Optional - Customizable text shown if the AR endpoint can't be reached due to a popup blocker. - **Popup blocked description** (string) - Optional - Customizable text shown if the AR endpoint can't be reached due to a popup blocker. - **Popup blocked link text** (string) - Optional - Customizable text for the link shown if the AR endpoint can't be reached due to a popup blocker. - **Exclude tags** (string) - Optional - Filter for hiding certain nodes in the AR scene (comma-separated list of tag names). - **Exclude nodes** (string) - Optional - Filter for hiding certain nodes in the AR scene (comma-separated list of node names). - **Environment** (string) - Optional - HDR environment for the AR viewer on the mobile device. - **Loading screen logo** (string) - Optional - Image URL for the logo on the AR loading screen. ``` -------------------------------- ### Create a starter project with npm create @combeenation/custom-code@latest Source: https://docs.combeenation.com/docs/configurator-ui-ux/custom-code/custom-code- Run this command in a terminal to create a new TypeScript starter project for custom code. Requires Node.js and npm (or equivalent) installed. ```bash npm create @combeenation/custom-code@latest ``` -------------------------------- ### List literals: numbers and text Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/list-type Lists are created by wrapping values in square brackets. The first example shows a list of numbers, the second a list of text strings. ```plaintext [ 1, 2, 3 ] ``` ```plaintext [ "red", "green", "blue" ] ``` -------------------------------- ### Minimal Hello World workflow with run() function Source: https://docs.combeenation.com/docs/integrations-and-api/workflows/workflow-in-depth Every workflow must export a function run() and return a Promise. This minimal example returns 'Hello, world!'. The integrated editor provides auto-completion. Parameters defined in the workflow config can be imported from '@workflow/parameters'. ```javascript // When you define parameters in the workflow config, you can import them here to use them:// import { YOUR_PARAMETER } from '@workflow/parameters';/** * @param {WorkflowRunArgument} arg */export function run(arg) { // When a workflow starts, it calls the run() function. // Every workflow must export one and must return a promise! // !!! visit our docs for a number of example workflows to get started !!! // https://docs.combeenation.com/docs/workflow-templates // In most cases, you'll call at least one API function, which will return a promise that you must return here. return Promise.resolve('Hello, world!');} ``` -------------------------------- ### Detail map texture with useDetailmap flag Source: https://docs.combeenation.com/docs/configurator-ui-ux/controls/3d-viewer-control Shows how to set a detail map texture and enable the 'useDetailmap' parameter. The example assigns a checker texture to the detailmapTexture.image channel and sets useDetailmap to true. ```javascript [ Viewer3d.materialParameter(Materials3d.matBox, "detailmapTexture.image", Textures3d.Checker), Viewer3d.materialParameter(Materials3d.matBox, "useDetailmap", true)] ``` -------------------------------- ### Script to get data from value component Source: https://docs.combeenation.com/docs/fundamentals/create-a-basic-3d-configurator Simple script to get the data from the value component 'TopColour' in the dataview's Hive editor. ```hive TopColour ``` -------------------------------- ### Split parameter components to reduce network load (✅ Do) Source: https://docs.combeenation.com/docs/configurator-ui-ux/controls/3d-viewer-control This example splits the parameters into two components: 'StandardParameterValues' and 'PaintableGraphicParameterValue'. Each component is linked as an individual 'set parameter values' slot, so changes only update the relevant component, reducing network load. ```plaintext // ✅ Do instead: Split into 2 components with 2 SigSlos:// Component "StandardParameterValues"[Viewer3d.tagParameter("Handle", "visible", HandleVisible), Viewer3d.tagParameter(Materials3d.matHandle, "color", HandleColor)][ // Component "PaintableGraphicParameterValue" Viewer3d.materialParameter(Materials3d.matPaintable, "albedoTexture.image", PaintableGraphic.Value.ToText())]// If component "HandleVisible" changes, only the component// "StandardParameterValues" will be updated// Component "PaintableGraphicParameterValue" stays untouched// => 👍 Less network load ``` -------------------------------- ### Upload dummy file with CfgnFiles.uploadFiles Source: https://docs.combeenation.com/docs/configurator-logic/file-upload-and-handling Uploads a dummy text file using the CfgnFiles.uploadFiles function. The file is created with the File constructor and uploaded under the key 'fileText'. ```javascript await CfgnFiles.uploadFiles({ fileText: { file: new File(['Lorem ipsum'], 'dummy.txt') }}); ``` -------------------------------- ### Number and date field examples Source: https://docs.combeenation.com/docs/quote-management/customize-quote-ui Examples of field controls for numbers: NumberField for numeric input and DateField for date selection stored as Unix timestamp. Both use the 'fields.customQuoteDate' property. ```json [ { "$type": "NumberField", "property": "fields.customQuoteDate" }, { "$type": "DateField", "property": "fields.customQuoteDate" }] ``` -------------------------------- ### Using components for dynamic parameter values Source: https://docs.combeenation.com/docs/configurator-ui-ux/controls/3d-viewer-control Shows how to use components (like CupIsVisible and HandleColor) as values in Viewer3d parameter functions, allowing the scene to change based on user input or product logic. ```plaintext [ // "CupIsVisible" & "HandleColor" are components Viewer3d.modelParameter(Models3d.CoffeeCup, "visible", CupIsVisible), Viewer3d.tagParameter("Handle", "color", HandleColor)] ``` -------------------------------- ### Liquid date filter without format example Source: https://docs.combeenation.com/docs/asset-management/pdf-asset Displays a UNIX timestamp in a time zone without a format, resulting in ISO 8601 UTC format. The example produces '2026-07-17 11:41:36Z'. ```liquid {{ 1784288496 | time_zone: 'Europe/Vienna' | date }} ``` -------------------------------- ### Entry point: CfgrUtils.onCfgrReady Source: https://docs.combeenation.com/docs/configurator-ui-ux/custom-code/quick-start Main entry point of the configurator. Ensures the configurator is fully up and running before any initialization code that communicates with it. ```typescript CfgrUtils.onCfgrReady(() => {}); ``` -------------------------------- ### Hive code to get X coordinate of second DynamicVisual item Source: https://docs.combeenation.com/docs/releases/release-1200 Shows how to access the X coordinate of the second visual in a DynamicVisual named 'boxes' using the new `Items` property and the `Get` function. ```hive // get the 'x' coordinate of the 2nd visual of the 'boxes' DynamicVisual DefaultView.boxes.Items.Get(2).X ``` -------------------------------- ### Send a mail with a PDF attachment using the mail keyword Source: https://docs.combeenation.com/docs/integrations-and-api/workflows/workflow-in-depth Use the `mail` keyword to send an email with a PDF attachment. The example sends from `noreply@example.com` to `recipient@example.com` with a subject and body, attaching a PDF from a URL. Note that mail tenant settings are used, and there is a hard limit of 10 mails per workflow run. ```javascript export function run() { return mail.send({ sender: 'noreply@example.com', to: 'recipient@example.com', subject: 'Your Quote is ready', body: 'Please find the attached Quote.', attachments: [ { filename: 'report.pdf', url: 'https://example.blob.core.windows.net/files/report.pdf', mediaType: 'application/pdf' } ] });} ``` -------------------------------- ### Basic usage of set parameter values slot Source: https://docs.combeenation.com/docs/configurator-ui-ux/controls/3d-viewer-control Shows how to use Viewer3d parameter functions to set visibility and other parameters for 3D models, tags, nodes, and materials. The example uses static values and demonstrates the syntax for each function. ```plaintext [ // Set visibility of 3d models // // 3d asset path, parameter name, value Viewer3d.modelParameter(Models3d.CoffeeCup, "visible", true), Viewer3d.modelParameter(Models3d.CoffeeCoaster, "visible", false), // Set parameter values using the tagging system // Here: Show all nodes which contain the tag "Handle" and hide all nodes // which contain the tag "Cap" // Also set "metallic" value to 1 for all materials which contain the tag "Metal" // // Tag name, parameter name, value Viewer3d.tagParameter("Handle", "visible", true), Viewer3d.tagParameter("Cap", "visible", false), Viewer3d.tagParameter("Metal" "metallic", 1), // Set parameter values using the node system // Here: Hide the node with the name "Spoon" & set a material for it which // will be applied once the value of the "visible" parameter is changed to // `true` at a later point // // Node name, parameter name, value Viewer3d.nodeParameter("Spoon", "visible", false), Viewer3d.nodeParameter("Spoon", "material", "SilverMat"), // Set parameter values using the material system // Here: Set color red and roughness 0.1 to material "matHandle" // // Material name, parameter name, value Viewer3d.materialParameter(Materials3d.matHandle, "color", "(255, 0, 0)"), Viewer3d.materialParameter(Materials3d.matHandle, "roughness", 0.1)] ``` -------------------------------- ### Hive error message example showing type mismatch in if expression Source: https://docs.combeenation.com/docs/releases/release-1200 Example of a rewritten Hive compiler error message. It shows a type mismatch between the 'then' branch (Number) and the 'else' branch (Text) in an `if` expression, with a hint explaining that all branches must have the same type. ```plaintext -- ERROR in TestComponent -------------------------------------------------------------------------- The branches of this 'if' produce different types of values: The 'then' branch has type Number but the 'else' branch is Text. 3| if true then 1 else "2" end ^^^ Hint: All branches must have the same type so that no matter which one we take, we always get back the same type of value. ``` -------------------------------- ### Access configurator.owner.name property Source: https://docs.combeenation.com/docs/configurator-logic/configurator-and-presets-variable Example of accessing the name property of the owner object. ```plaintext configurator.owner.name ``` -------------------------------- ### Create a test Component rule Source: https://docs.combeenation.com/docs/configurator-ui-ux/custom-code/quick-start Rule for a simple Value Component called MyTestCmp. The rule is `Input or "Hello World"`. ```plain text Input or "Hello World" ``` -------------------------------- ### get(key) Source: https://docs.combeenation.com/docs/configurator-logic/hive-types/map-type Returns the value for the specified key, or Empty if the key does not exist. ```APIDOC ## get(key) ### Description Returns the value for the specified key, or `Empty` if the map contains no such key. Uses the default equality operator for the key type; text keys are compared case-sensitive. ### Method get(key) ### Parameters - **key** (Any) - Required - The key to look up. ### Return Value - **Any** - The value associated with the key, or `Empty` if not found. ### Examples `[ "one" : 1, "two" : 2 ].get("one")` returns `1`. `[ "one" : 1, "two" : 2 ].get("three")` returns `Empty`. ``` -------------------------------- ### Avoid network load: split parameter components (❌ Don't) Source: https://docs.combeenation.com/docs/configurator-ui-ux/controls/3d-viewer-control This example shows a single component 'ParameterValues' that combines tag parameters and a material parameter with a large string value. When any component changes, the whole component value is updated, causing unnecessary network load. ```plaintext // ❌ Don"t: Single component "ParameterValues"[ Viewer3d.tagParameter("Handle", "visible", HandleVisible), Viewer3d.tagParameter(Materials3d.matHandle, "color", HandleColor), Viewer3d.materialParameter(Materials3d.matPaintable, "albedoTexture.image", PaintableGraphic.Value.ToText())]// If component "HandleVisible" changes, the whole content of the component// "ParameterValues" will be updated, even if the graphic component// "PaintableGraphic" didn"t even change// => 🔥 Lots of unnecessary network load ``` -------------------------------- ### Media query for responsive configurator Source: https://docs.combeenation.com/docs/integrations-and-api/embedding-and-whitelist Use min-width and max-width media queries for correct scaling. Avoid device-width queries as they cause poor scaling. ```css @media only screen and (min-width: 123px) and (max-width: 456px) { ...;} ``` -------------------------------- ### Texture parameters with dotted path Source: https://docs.combeenation.com/docs/configurator-ui-ux/controls/3d-viewer-control Shows how to set texture parameters using dotted paths like 'albedoTexture.image' and 'albedoTexture.uScale'. The example assigns a checker texture to the albedo channel and updates the uScale value based on a component value. ```javascript [ // assign checker texture to albedo channel of material "matBox" Viewer3d.materialParameter(Materials3d.matBox, "albedoTexture.image", Textures3d.Checker), // update "uScale" value depending on a component value Viewer3d.materialParameter(Materials3d.matBox, "albedoTexture.uScale", uScale)] ``` -------------------------------- ### Disallowed and allowed record component usage in filter Source: https://docs.combeenation.com/docs/configurator-logic/hive-queries Shows a disallowed filter using a record component with a column value, and an allowed filter where the record component is used as a query parameter. The disallowed example triggers a limit error because the entire component is needed to evaluate the query, while the allowed example is evaluated before the query runs. ```hive // not allowed // a column value is used in Get(), thus the entire component is needed to evaluate the query filter myRecordComponent.Get(.partNumber).Price < MaxPrice ``` ```hive // allowed // everything to the right of (>) is a query parameter, as it doesn't involve a column value // the query parameter is a simple number that can be calculated before the query itself is run filter .price > myRecordComponent.Get(SelectedPartNumber).Price ``` -------------------------------- ### Liquid date filter example Source: https://docs.combeenation.com/docs/asset-management/pdf-asset Formats a string-based date with the date filter. The result is '15.06.2024'. ```liquid {{ "2024-06-15 13:41:36 +02:00" | date: "%d.%m.%Y" }} // Result: "15.06.2024" ``` -------------------------------- ### Implement window.Combeenation.onCheckout Source: https://docs.combeenation.com/docs/integrations-and-api/checkout-types/flex-checkout Define the global function window.Combeenation.onCheckout to handle checkout. The function receives a data object with fields: id, authentication, checkoutParameters, checkoutParametersHash, and queryParameters. Use this to implement custom checkout logic such as AJAX calls or redirects. ```javascript ``` -------------------------------- ### Single-line and multi-line comments Source: https://docs.combeenation.com/docs/configurator-logic/hive-language Comments start with // for single-line and are enclosed in /* */ for multi-line. They have no effect on the rule. ```hive // this is a single-line comment/*this commentspans overmultiple lines*/ ``` -------------------------------- ### GET /version Source: https://docs.combeenation.com/docs/integrations-and-api/combeenation-api Returns information about the API endpoint. This is a general endpoint to check the API version and status. ```APIDOC ## [GET] /version ### Description Returns information about the API endpoint. ### Method GET ### Endpoint https://api.combeenation.com/v1/version ### Authentication Authorization header with API token (raw token or Bearer format). ### Response Returns information about the API endpoint. ``` -------------------------------- ### Accessing image sub-properties Source: https://docs.combeenation.com/docs/configurator-ui-ux/controls/dataview For complex objects like images, use lowercase for the column name and camelCase for sub-properties. Example: 'values.thumbnail.Url'. ```javascript values.thumbnail.Url ``` -------------------------------- ### Custom layout template example Source: https://docs.combeenation.com/docs/configurator-ui-ux/controls/dataview A simple HTML template that repeats for each entry in the dataview. Each entry is wrapped in a div with class 'cfgr-dataview-item'. ```html
hello!
```