Home > Oracle, Product Cnfigurator, Siebel > Dynamically Show-Hide UI controls in Product Configurator

Dynamically Show-Hide UI controls in Product Configurator

Dynamically Show-Hide UI controls in Product Configurator


Dynamic User properties allows us to

  1. Show or Hide UI controls for product such as relationships, groups, products, tabs, attributes, linked items or resources.
  2. Make User Interface controls read-only
  3. Show or hide images, based on the choices that the user makes in Siebel Configurator.

Requirement: Based on the Product selected by the user, set of attributes should be hidden.

Scenario:

  • We have a root product “Test Product Import” with Attribute “Test Attribute”  Root Product has 3 Sub Products
    • Test Product Import 1
    • Test Product Import 2
    • Test Product Import 3
  • Test Attribute has values “None” and “1” to “6”

clip_image002[1]

  • When the user selects “Test Product Import 1”, some of the values from the “Test Attribute” should be hidden (ex. Values 1 , 2 and 3) as shown in the below screenshot.

clip_image004[1]

  • When the user selects “Test Product Import 2”, some other values from the “Test Attribute” should be hidden ( ex. Values 4 , 5 and 6) as shown in the below screenshot.

clip_image006[1]

Technical Details:

The above solution is achieved by using the Dynamic UI Properties on Root product using function cfgEval(), which returns value “Y” or “N” and using the function returned value in Attributes  to hide the values based on the selection made by the user.

Function cfgEval():  Use CfgEval() to access instance information inside Siebel Configurator, for example, to whether a user has set an attribute or selected a component product. Using the CfgEval() function to create simple expressions that reference session values such as the product quantity and attributes that the user selects.

Here are some examples of how to use this function:

  • Check whether the user has selected an attribute on the Root Product:
    • CfgEval($.[RootProduct]#1.xa[AttributeName].xf[Value])=’ABC’)
  • Check whether the user has selected an attribute on the Child Product:
    • CfgEval($.[RootProduct]#1.[RelationshipName]#[ChildProductName].xa[AttributeName].xf[Value])=’AB’)
  • Check the quantity of a child product:
    • CfgEval($.[RootProduct]#1.[RelationshipName]#[ChildProductName].xf[Quantity]) =‘2′)
  • To return an attribute value of a child product:
    • CfgEval($.[RootProduct]#1.[RelationshipName]#[ChildProductName].xa[AttributeName].xf[Value])
  • To return the quantity of a child product
    • CfgEval($.[RootProduct]#1.[RelationshipName]#[ChildProductName].xf[Quantity])

Now back to the solution. Create below mentioned UI Properties on Root Product or Attributes as mentioned in the table and the screenshot shown below

S.No Property Name Value Level
1 CfgUIStateModel Y Root Product
2 Expr1 CfgEval($.[Test Product Import]#1.[Relationship 1]#[Test Product Import 1].xf[Quantity]) =’1′ Root Product
3 Expr2 CfgEval($.[Test Product Import]#1.[Relationship 2]#[Test Product Import 2].xf[Quantity]) =’1′ Root Product
4 DynamicHide Expr1 Y Attribute
5 DynamicHide Expr2 Y Attribute

clip_image008[1]

clip_image010[1]

You will be able to see the behavior described above once you have completed the changes mentioned above

Note: cfgEval() is a very useful function and can be used to control dynamic behavior of Product/Attribute selection. Dynamic UI property can also be used to display set of products based on the attribute selected. The only difference will be in the Expression written on the Root product. To fetch the value of the attribute selected by the user, the expression will be

Expr1: CfgEval($.[Root Product Name]#1.xa[Attribute Name].xf[Value])=Attribute Value’ .

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: