Customization

Lime CPQ customizations are created as web components. This requires your solution to have a frontend folder. If it doesn't exist, just generate a random web component using lime-project to set up the folder structure.

Article Selector

It's possible to create a customized article selector component. Typical customizations could be:

1. Pricing based on customer classification or price lists.
2. Extra properties on dealarticles and orderrows.
3. Article selection based on customer market.

Getting started

Start by copying one of the examples below.

Example: Colorized article

This example imports the normal article and article group pickers, and adds a color picker and saves the picked color. The price is also raised when a color is picked.

To try it out:

1. Create a color string property on dealarticle and orderrow respectively.
2. Add article-selector-color.tsx to your solution's frontend/src.
3. Input example-article-selector-color as the custom web component for article selector in Lime Admin.
4. Add color to additional item properties.
5. Build the frontend.

Examplifies:

• Loading and saving of item.additionalProperties.
• Price adjustments.

Example: Company classification discount

This example imports the normal article and article group pickers and adjusts the discount based on the customer's classification.

To try it out:

1. Create a classification option property on company with the option keys empty, A, B, C.
2. Add article-selector-company.tsx to your solution's frontend/src.
3. Input example-article-selector-company as the custom web component for article selector in Lime Admin.
4. Build the frontend.

Examplifies:

• How to load a company from the dealarticle or orderrow's parent (deal or order).
• Discount adjustments.

Example: Articles with stock

This example uses a custom stock property on article to show the available stock in the article picker.

To try it out:

1. Create a stock integer property on article.
2. Add article-selector-stock.tsx to your solution's frontend/src.
3. Input example-article-selector-stock as the custom web component for article selector in Lime Admin.
4. Build the frontend.

Examplifies:

• Using the slot property to replace the standard article picker.
• Extending CPQ interfaces.
• Modifying the article query and handling the result.
• Adjusting the item's quantity so that it doesn't exceed what's in stock.

Dependencies

To import the interface that your web component should implement and other useful types, you need to add @limetech/limepkg-cpq-order to your solution's frontend.

cd frontend
npm install -D @limetech/limepkg-cpq-order

Note

Whenever an upgrade to a new major version of Lime CPQ is done, the npm package's major version must also be updated to match.

Interface

import { ArticleSelectorComponent } from '@limetech/limepkg-cpq-order';

Tips

• It's not possible to change the parent object (deal or order). That can be done using custom limeobjects.
• Additional properties must be configured in Lime Admin for loading and saving to properly work.
• The additional properties must exist on both dealarticle and order.