Customization

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 limepkg-cpq-order-lwc-components to your solution's frontend. This dependency is currently optional and only published with private access, so you can add it for use in your local development environment, while workflows should still be able to build your solution without any changes.

If you have the limepkg-cpq-order repository checked out, you can install the limepkg-cpq-order-lwc-components package that's in the frontend folder as an optional dependency:

npm install --save-optional path/to/limepkg-cpq-order/frontend

Alternatively, you can install it from your venv, where a static build is included with limepkg-cpq-order:

poetry shell
npm install --save-optional $VIRTUAL_ENV/lib/python3.*/site-packages/limepkg_cpq_order/web_components

Interface

import { ArticleSelectorComponent } from 'limepkg-cpq-order-lwc-components';

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.