Skip to content

formSubstore

Manages per-configuration form state. For every config added via configsSubstore.addConfig, a corresponding FormStoreItem is created and stored in fromConfigs. This item holds the evaluated form structure, step navigation state, constraint-generated messages, dynamic price overrides, and loading state.

Table of contents

Top-level

FormStoreItem properties (accessed via fromConfigs[configId])

FormStoreItem methods (accessed via fromConfigs[configId])

Top-level

fromConfigs

fromConfigs: Record<number, FormStoreItemVariables>

Map from config ID to that config’s FormStoreItem state variables.

Each entry is created when configsSubstore.addConfig is called and removed when configsSubstore.removeConfig is called. Access a config’s form state with store.formSubstore.fromConfigs[configId].

Related

setCurrentProgress (store level)

setCurrentProgress: (
  configId: number,
  currentProgress: number | ((prevCurrentProgress: number) => number),
) => void

Updates the current progress value for the given config ID.

Parameters

NameTypeDescription
configIdnumberTarget config
currentProgressnumber | ((prev: number) => number)New value or updater function

Related

setNextCurrentStep (store level)

setNextCurrentStep: (configId: number) => void

Moves to the next available step for the given config ID.

Parameters

NameTypeDescription
configIdnumberTarget config

Related

setPreviousCurrentStep (store level)

setPreviousCurrentStep: (configId: number) => void

Moves to the previous step for the given config ID.

Parameters

NameTypeDescription
configIdnumberTarget config

Related

setOptionDynamicPrice (store level)

setOptionDynamicPrice: (
  configId: number,
  args: {
    groupId: number | undefined;
    elementId: number;
    optionId: number;
    price: number;
  },
) => void

Sets a dynamic price override for a specific option within an element, for the given config ID.

Parameters

NameTypeDescription
configIdnumberTarget config
args.groupIdnumber | undefinedParent group ID, or undefined for top-level elements
args.elementIdnumberElement containing the option
args.optionIdnumberOption whose price to override
args.pricenumberNew price value

Related

FormStoreItem properties

The following properties are available on each fromConfigs[configId] entry.

formId

formId: number

ID of the form this config is associated with.

Matches TConfig.formId from configsSubstore.configs.

constraintsCheckedFormData

constraintsCheckedFormData: TData | undefined

Form data after constraint evaluation, with hidden elements removed.

The raw TData from the API is passed through the constraints engine; any element, group, or option that a constraint marks as hidden is stripped from this object. Your UI should always read from this property rather than the raw API data.

undefined while isLoading is true.

Related

  • steps — derived from this data
  • isLoading — undefined while loading

steps

steps: (TStep | undefined)[]

Ordered list of top-level steps (elements or groups) after constraint checks.

A TStep is either a TElement or a TGroup. Entries may be undefined when a step is hidden by a constraint but must still occupy its position to keep stepsAvailability indices aligned.

Related

form

form: TForm | undefined

Top-level form metadata.

Contains the form’s id, name, vat, and other configuration-level fields. undefined while isLoading is true.

Related

currentStep

currentStep: TStep | undefined

The step the user is currently on.

undefined when the form has not yet loaded. Navigate with setNextCurrentStep and setPreviousCurrentStep.

Related

currentProgress

currentProgress: number

Free-form progress value (e.g., percentage or step index).

Managed entirely by your application; the SDK does not mutate this value automatically. Use setCurrentProgress to update it.

Related

isCurrentStepFinished

isCurrentStepFinished: boolean

Whether all required fields in the current step are filled.

true when every required element in currentStep has at least one selected value in valuesSubstore. Use this to enable/disable a “Next” button.

Related

isLastStep

isLastStep: boolean

Whether the current step is the last one.

true when currentStep is the last available step in stepsAvailability. Use this to show a “Submit” button instead of “Next”.

Related

isFirstStep

isFirstStep: boolean

Whether the current step is the first one.

true when currentStep is the first available step. Use this to hide a “Back” button.

Related

stepsAvailability

stepsAvailability: boolean[]

Parallel boolean array indicating which steps are currently available.

stepsAvailability[i] is true when steps[i] is accessible to the user. A step is unavailable when it is hidden by a constraint. The array is always the same length as steps.

Related

isLoading

isLoading: boolean

Whether the form data is currently being fetched.

true from the moment a config is added until the API response for the form is fully processed. While true, constraintsCheckedFormData, steps, and form are undefined.

Related

messages

messages: {
  options: Record<string, Message[]>;
  elements: Record<string, Message[]>;
  groups: Record<string, Message[]>;
}

Constraint-generated messages keyed by option, element, or group ID.

Messages are produced by the constraints engine during form data evaluation. Each Message has a type (e.g., "info", "warning", "error") and a text. Display these alongside the corresponding UI element.

Related

products

products: TProduct[]

List of products associated with the form.

Products are linked to form options. When an option is selected, the corresponding product becomes part of the active selection (visible via finishedConfigsSubstore.getFinishedConfigs).

debugHistory

debugHistory: DebugHistory

History of constraint evaluations, used for debugging.

Only populated when appearanceSubstore.getAppearance("frontend").data?.frontendDebugMode is true. Each entry records the inputs and outputs of a single constraint run. Not intended for production use.

Related

dynamicPrices

dynamicPrices: DynamicPrices

Runtime price overrides per element and option ID.

A map of { [elementId]: { [optionId]: number } }. When set, numberFormatterSubstore uses these values instead of the prices defined in the form data. Useful for 3D configurators or external pricing engines.

Related

FormStoreItem methods

setOptionDynamicPrice (item level)

setOptionDynamicPrice: (args: {
  groupId: number | undefined;
  elementId: number;
  optionId: number;
  price: number;
}) => void

Sets a dynamic price override for a specific option within an element.

Parameters

NameTypeDescription
args.groupIdnumber | undefinedParent group ID, or undefined for top-level elements
args.elementIdnumberElement containing the option
args.optionIdnumberOption whose price to override
args.pricenumberNew price value

Related

setNextCurrentStep (item level)

setNextCurrentStep: () => void

Moves to the next available step.

Advances currentStep to the next entry in steps that has stepsAvailability[i] === true. Does nothing when isLastStep is true.

Related

setPreviousCurrentStep (item level)

setPreviousCurrentStep: () => void

Moves to the previous step.

Moves currentStep back one position. Does nothing when isFirstStep is true.

Related

setCurrentProgress (item level)

setCurrentProgress: (
  currentProgress: number | ((prevCurrentProgress: number) => number),
) => void

Updates the current progress value.

Accepts a new value directly or an updater function that receives the previous value.

Parameters

NameTypeDescription
currentProgressnumber | ((prev: number) => number)New progress value or updater function

Related