openCPQ – A JavaScript Library
for Product Configuration

With recent advances in web technology it has become quite easy to implement product configurators and other configure/price/quote (CPQ) functionality as JavaScript programs running directly in the web browser without the need for a server-side configuration engine. openCPQ is a library providing generic building blocks for CPQ applications. This allows the application code to concentrate on the product model and to ignore technical details of the configurator.

The openCPQ approach provides advantages both for using a product configurator and for modeling products.

Configuring in the Browser

Running product configurators in the browser has advantages for several stakeholders:

  • Users enjoy a smooth user experience since they need not wait for round-trips to the server after each input. Users can even use the configurator in offline mode when they are disconnected from the internet.
  • IT operations need not worry about scaling up a server-side configuration engine since for the server a configurator is just a set of static pages.
  • System integrators implementing a custom user interface can easily access the local configuration state in the browser without the complexity of requests for remote data.

Product Modeling in JavaScript

Writing product models as JavaScript programs using the openCPQ library provides the following advantages to modellers:

  • openCPQ requires little learning effort since it is just a thin layer on top of general-purpose web technology.
  • Modern JavaScript and the openCPQ API support declarative modeling based on a functional programming style. Nevertheless imperative code can be integrated seamlessly where appropriate.
  • Having a full-fledged programming language at hand, modelers can make configurators behave as required and are not subject to the restrictions imposed by a configuration engine.
  • JavaScript functions and classes can be used to implement powerful domain-specific concepts on top of the generic openCPQ API. These functions and classes can be used where needed instead of repeating the implementation every time. This makes models much easier to understand and maintain.
  • Modelers can use state-of-the-art tools such as code editors, debuggers, version-control systems, and integrated development environments. They do not depend on the modeling and model-management tools provided by a configuration framework.

Technology

Configurator users make their choices one by one. After each user input the user interface has to be updated to reflect the new configurator state: Other choices might become available or unavailable, computed values might change, conflicts might appear or disappear, and so on.

Unlike the configurator engines of other CPQ tools openCPQ does not incrementally propagate user input to the configurator state and the user interface. It rather recomputes the entire configurator state and user interface from the accumulated user input. This declarative approach from functional programming is much easier to understand and less error-prone. And it fits perfectly with the ideas behind the user-interface library React. openCPQ uses React to finally determine and execute the required incremental updates to the user-interface.

Even the core application state, namely the accumulated user input is not modified by new input. A new copy of the state is generated instead. This usage of immutable data structures (another concept from functional programming) makes it easy to provide undo and redo functionality.

Professional Open Source

openCPQ has been released as open-source code under the liberal MIT license.

Professional services and support for openCPQ are available from webXcerpt. Contact us for discussing your configuration tasks.

The source code is hosted at Github, making it easy for you to clone the project or even to fork it and to adapt it to your needs. We encourage you to submit your enhancements back (as pull requests) for inclusion in the mainline development.

Demos

The following demonstrations are available online:

  • Optical Networks: A configurator for equipment used in optical networks. Based on a customer project.
    [ Start | Explanations ]
  • openCPQ Components: Examples for all the components provided by openCPQ.
    [ Start ]

Contact us for additional demos, which we cannot make publicly available.

Presentations

The following presentations on openCPQ have been given for audiences with different backgrounds.

Configuring in the Browser, Really!

Configuration Workgroup (CWG) European Conference Prague, April 2015

This presentation has been given to an audience with a background on product-configuration and modeling, especially with SAP variant-configuration tools.

openCPQ – A React-Based Product-Configuration Toolkit

Munich JavaScript User Group (MunichJS) meet-up, May 2015

This presentation has been given to an audience with a background on JavaScript, but did not expect any knowledge of React.

The host of this meet-up, Bayerischer Rundfunk, has published a Youtube video of this presentation.