CPQ Configurator Customisations - Display-Only Text Attributes is not displayed in configurator

[Alexander_0001]

Hi,
I want to realize the following Design of the CPQ configurator page for a configurable product (See screenshot with an example)

How can I add images and text elements based on selected values of a Drop Down attribute?

I have a drop down attribute, where I chose a product type (products referenced as values from the attribute called Series Range). Based on this choice I would like to show the description and the image of the selected product.
How can I achieve this?

I tried to add an attribute (which is configured as Display-Only Text) to the configuration page of a configurable product. An attribute value is pre selected and the checkbox that the value "will be displayed to user" is checked but this value of the attribute doesn't appear in the configurator. The attribute only displays the Hint I have added to the attribute. The entry of the attributes custom label doesn't appear either. Is that normal or do I miss any visibility permissions?

My approach to reach the mentioned objective would be to create two attributes (which is configured as Display-Only Text) to show the description of the selected product in the Hint of Display-Only Text attribute one and the image of the selected product in the Hint of Display-Only Text attribute two. To achieve this I would use the Formula Builder within Hint but <*XWS(getProductDescription,NestedProductName)*> did not work. Does anybody has an Idea how I could master this challenge?

@yoganandamuthaiah

[former_member765355 · Accepted solution]

Hi Alexander,

there are a few different ways to achieve the described behaviour.

First of all, you are not missing anything related to the Display Only Text attribute. It works with Hint only, and Hint is the only thing that will be displayed on the user side. In general, when you create this kind of attribute, give it a name and just one value is enough (i.e. 0 or 1). You don't have to preselect the value.
Then, when you edit the attribute on the product itself, you can start adding things into the Hint field (tags, logics, calculations, URLs, HTML, formulas, etc.).

To display different values to the user you can:

1) Add logic directly at the attribute level, in the Hint field. In the example below, I am displaying a different image based on user's selection of Attribute X.
<img style = "width:80%;,margin-top: 10px;" src="../mt/<*DOMAIN*>/images/attributeimages/[IF]([EQ](<*VALUE(Attribute X)*>,Value 1)){ImageName1.png}{ImageName2.png}[ENDIF]">

2) If logic is more complex (which usually is), then formulas in Hint can get too long and you cannot save the attribute. In this case, you can create several DIsplay Only Text attributes. Give each of them a different Image to display and then create a rule that will regulate which attribute will be allowed/disallowed based on user's selection.

There are more ways of achieving this behaviour, but two examples above are the most usual approaches.

I hope this helps you with your example, but if you need any additional help, feel free to reach out to me directly, and we could jump on a call to discuss everything in more detail.

Best,
Ivan

[Alexander_0001]

Thank very much for your support,
a combination of your answers brought me to my goal.

The image related challenge:
I added a picture in the product images folder (M10DEFAULT.jpg).
Then I renamed all product images with the in the attribute used value codes. With this preparation I was able to use the following IF statement for a dynamic product image visualisation:

[IF]([EQ](<*VALUE("AttributeX")*>,)){
<img style = "border: 1px solid #ddd; border-radius: 4px; padding: 5px; margin: 5px; height: 300px;
"src="../mt/<*DOMAIN*>/images/productimages/M10DEFAULT.jpg">}
{<img style = "border: 1px solid #ddd; border-radius: 4px; padding: 5px; height: 300px;"
src="../mt/<*DOMAIN*>/images/productimages/<*VALUECODE("AttributeX")*>.jpg">}[ENDIF]

This works really well. 🙂

The text related challenge:
To implement static text in the configuration the Hint option works very well.
I just didn't found a solution jet to add text on a dynamic way to the configurator.
The approaches I will try are: to add text to attribute and product descriptions and try to find a formula to call these elements OR to upload a custom table with Part Numbers or Value Codes and specific text in it per Code and then I try to call these information.

[Sergey_L]

Alexander,

The "Display Only Text" attributes do indeed display only the Hint field. I did not find this in the Help files, so you should definitely submit a ticket to update their documentation on the Attribute Display Types page.

I don't know how XWS tags work (I hope someone answers with those so I can learn too), but we display images using the HTML img tag (here's a helpful w3schools page on that).

If you don't want your images stored publicly (for that HTML tag to pull from), you can upload them to CPQ → File Management. You can then still use the HTML img tag, but the URL will now refer to your File Management folder.

Although the File Management help page mentions the URL format, it does not provide the File Management folder names to use in the URLs for each displayed folder name. I'm sure you can submit a ticket to update that documentation, but here is the list: (let's assume your image file is "Drill_H22.png")

1. Product Images: ../mt/<*DOMAIN*>/images/productimages/Drill_H22.png
2. Category Images: ../mt/<*DOMAIN*>/images/categoryimages/Drill_H22.png
3. Attribute Images: ../mt/<*DOMAIN*>/images/attributeimages/Drill_H22.png
4. Actions: ../mt/<*DOMAIN*>/images/quoteactions/Drill_H22.png
5. Lightning Actions: ../mt/<*DOMAIN*>/images/lightning/quoteactions/Drill_H22.png
6. Top Menu: ../mt/<*DOMAIN*>/images/topmenuicons/Drill_H22.png
7. Additional Files: ../mt/<*DOMAIN*>/additionalfiles/Drill_H22.png

(If the ".." doesn't work, insert your actual CPQ URL. For example: https://www.webcomcpq.com

______________________________

To turn off images based on previous selection, you have several options:

1. Use an ordinary product rule to disallow the Display attribute based on selection. Example:
   IF: [NOT](<*ANYSEL(Drill: H22)*>)
   THEN: <*DISALLOWATT(DisplayOnly_Drill_H22)*>
   Downside: You would need a separate Display Only attribute for every Drill selection.
2. In your Display attribute's HINT, add several images, each wrapped in a condition. Example:
   [IF](<*ANYSEL(Drill: H22)*>){<img src="../mt/<*DOMAIN*>/images/attributeimages/Drill_H22.png">}{}[ENDIF]
   [IF](<*ANYSEL(Drill: H23)*>){<img src="../mt/<*DOMAIN*>/images/attributeimages/Drill_H23.png">}{}[ENDIF]
3. If you name your images using the value code of the Drill attribute values, you could try using a single dynamic img tag in your hint field, like so:
   <img src="../mt/<*DOMAIN*>/images/attributeimages/Drill_<*VALUECODE(Drill)*>.png">
   

I don't know if #3 will actually work (haven't tested). If you try it, let us know the results.

Hope this helps! If something ends up not working, or you find a better way, please share.