Skip to content

Properties Config

The Properties Config is an object passed as an optional prop to the <CommonProperties< React object containing the following fields:

  • containerType string: type of container to display the properties, can be “Modal”, “Tearsheet”, or “Custom”. default: "Custom"

  • rightFlyout boolean: If set to true, groups will be displayed as an accordion. If false, groups are displayed as tabs. default: false

  • applyOnBlur boolean: calls applyPropertyChanges when focus leave Common Properties. default: false

  • disableSaveOnRequiredErrors boolean: Disable the properties editor “save” button if there are required errors

  • enableResize boolean: adds a button that allows the right-side fly-out editor to expand/collapse between small and medium sizes. default: true

  • conditionReturnValueHandling string: used to determine how hidden or disabled control values are returned in applyPropertyChanges callback. Current options are “value” or “null”. default: "value"

  • buttonLabels object:

    • primary string: Label to use for the primary button of the properties dialog
    • secondary string: Label to use for the secondary button of the properties dialog

  • heading boolean: show heading and heading icon in right-side fly-out panels. default: false

  • showHeadingDesc boolean: When set to true, it will display a tooltip containing a description and a button that redirects to the provided URL in help. The default value is false.

  • schemaValidation boolean: If set to true, schema validation will be enabled when a parameter definition has been set in CommonProperties. Any errors found will be reported on the browser dev console. It is recommended you run with schema validation switched on while in development mode.

  • applyPropertiesWithoutEdit boolean: When true, will always call applyPropertyChanges even if no changes were made. default: false

  • maxLengthForMultiLineControls number: Maximum number of characters allowed for multi-line string controls (e.g., textarea). Set to -1 to disable the character limit. default: 1024

  • maxLengthForSingleLineControls number: Maximum number of characters allowed for single-line string controls (e.g., textfield). Set to -1 to disable the character limit. default: 128

  • showCharacterCounter boolean: Controls the visibility of character counters for textfield and textarea controls. When set to false, the counter is hidden until the character limit is reached. The counter is never shown in table controls regardless of this setting. Character limits are always enforced. default: true

  • convertValueDataTypes boolean - Default false. If set to true, currentParameter values whose data type does not match what is defined in the parameter definitions will be converted to the specified data type.

  • trimSpaces boolean - Default true. If set to false, condition ops(isEmpty, isNotEmpty) and required fields are allowed to only contain spaces without triggering condition errors.

  • showRequiredIndicator boolean - Default true to show (required) indicator. If set to false, show (optional) indicator next to properties label.

  • showAlertsTab boolean - Default true to show “Alerts” tab whenever there are error or warning messages. If set to false, Alerts tab won’t be displayed.

  • returnValueFiltering array - Default []. When set this will filter out any values in the array in the parameters returned when applyPropertyChanges is call. Only primitive data types are currently supported.

  • categoryView string - View categories in right-flyout. Can be "accordions" or "tabs". default: "accordions".

  • enableTanstackTable boolean: Feature flag to enable using Tanstack tables instead of React-virtualized tables. default: true

  • cspNonce string - Default undefined. A Content Security Policy nonce value to pass to Common Properties subcomponents that inject runtime styles. This includes the expression editor (powered by CodeMirror 6) and table-related components. When your application enforces a style-src CSP directive without 'unsafe-inline', those subcomponents can be blocked from injecting their required stylesheets unless a nonce-based policy is used. Providing a nonce allows those stylesheets to be permitted under that policy.

    How to use:

    1. On your server, generate a cryptographically random nonce for each HTTP response: 

      const crypto = require("crypto");
const nonce = crypto.randomBytes(16).toString("base64");

    2. Include the nonce in your Content-Security-Policy header: 

      style-src 'self' 'nonce-<your-nonce-value>'

    3. Pass the nonce to <CommonProperties>: 

      <CommonProperties
    propertiesConfig={{ cspNonce: nonce }}
    ...
/>

    Note: If your application does not use any Common Properties feature that injects runtime styles, this field is not required and 'unsafe-inline' is not needed in style-src for Common Properties. If you do use those features and do not provide a nonce, you must include 'unsafe-inline' in your style-src policy for them to function correctly.