OVERVIEW

The configuration box is an essential component of your page layout. It describes the way your end-user dialog will be displayed. The questions of this dialog (called Form Properties) are organized in Forms (FO).

Warning:

You can only insert one configuration box per configurationPage. Form, FormProperty boxes and valueSelectors can only be used in the context of a configurationBox.

A configuration Box contains one or several formBoxes having one or several formPropertyBoxes

ATTRIBUTES DETAILS

VISUAL IDENTITY

In the standard theme, the class configBox (in configBox.css) allows to specify the default colors for texts appearing in the forms and form properties. Moreover, the layout of the configurationBox is similar to the combinedBox. You can personalize the header and corners background, the borders…

OVERVIEW

A formFlyer pops up a formBox which aims at displaying a specific form of the configuration dialog.

The main goal and recommended usage of the formFlyer is to act as an additional guided selling tool, to display a set of questions (most of the time optional) in order to guide the end-user while filing the configuration dialog.

Do Not:

The formFlyer must not be used as a substitute of the standard configurationBox which is the only UI component designed to support the rendering of the full configuration dialog

The best practice is to use a maximum of 10 formFlyers along the configuration process.

Reference:

The formFlyer can be called from any actionBox or linked action. Please refer to: How to use Flyers for more details

Warning:

As the OPEN_FLYER action can call all kind of flyers, the names of these flyers have to be unique in the XML file.

Moreover, when the formFlyer is linked to a specific Form (as defined by the ‘cpeObject’ attribute and not equal to “$CURRENT_FORM”), this form is not displayed in the various selectors (selectorBar, vtSelector etc…) and can only be accessed by activating the corresponding OPEN_FLYER button.

Do Not:

Only 1 form flyer can be opened by the end-user at a given time.

Moreover, to ensure that the redirections to Forms or Form properties contained in a formFlyer are possible, it is necessary to declare the formFlyer in every page (home/configuration/summary...) of the layout file.

From version 11.1, Next/Previous policies are active while the user is in a formFlyer but their scope is limited to this flyer (the user will not be redirected outside of the flyer).

Tip:

formFlyers default position in the screen can be configured through attributes (See below). formFlyers can also be repositioned manually once displayed. To keep the formFlyers display consistent, their position is reinitialized each time a new Catalog or Configuration session is started.

When closing a formFlyer, the focus is automatically set on the current Form Property in the Configuration page.

ATTRIBUTES DETAILS

Example:

XML Sample

<formFlyer resizable="on" cpeObject="CPE.wks/CP/myRootCP.wks/CP/mySubCP.wks/FO/myFOFlyer" name="config.formFlyer" mode="on" cssName="flyer" hzPosition="center" vtPosition="middle" hzSize="600" vtSize="400" titleResourceName="" titleTranslationName="sigFlyer.title">

<formBox mode="on" cssName="formBox" initialState="firstExpanded" autoCollapseExpand="on" userType="*">

…

</formBox>

Warning:

formFlyer “basedOn” attribute

• the basedOn FormFlyer must have been previously declared in the layout page definition
• If the “mode” attribute of the basedOn formFlyer is set to “off”, the definition of the current formFlyer is taken into account anyway
• When declaring the definition of the current formFlyer, the inherited parameters can be overridden. For instance, in the following example, the formFlyer FF2 is based on the formFlyer FF1 definition, but its name and cpeContext are overridden:

  <formFlyer name="FF1" cpeContext="CPE1" ...>

  ...

  <formFlyer />

  <formFlyer name="FF2" cpeContext="CPE2" basedOn="FF1" />

VISUAL IDENTITY

The formFlyer is associated to a main CSS class. The resource associated to the header part of the formFlyer is declared in the XML Layout file.

OVERVIEW

A Form box has two different views the end-user can activate: expanded and collapsed views. Here is an example of a form collapsed view:

Here is an example of a form expanded view:

When a formBox is expanded, the formProperty boxes contained in this form are displayed.

The arrow button allows to switch from a collapsed view to an expanded view (and vice versa). Other action buttons (actionBoxes) can be associated to each view of the formBox to call specific functions.

ATTRIBUTES DETAILS

Example:

XML Sample

<formBox mode="on" cssName="formBox" initialState="firstExpanded" autoCollapseExpand="on">

<!-- Description of the collapsed formBox view -->

<collapsedView showRMOImage="off" showDescription="on" showRMOText="off" showStatus="on">

<actionBox mode="on" cssName="actionBox" hzAlignment="right"

vtAlignment="up" widthPercent="40" heightPercent="90"

autosize="off">

<!-- Description of actions associated to the formBox -->

<action actionName="RESET" alignment="left"

resourceName="action.form.reset"

translationName="action.reset" url="" />

<action actionName="COPY" alignment="left"

resourceName="action.form.copy"

translationName="action.copy" url="" />

<action>... </action>

</actionBox>

</collapsedView>

<!-- Description of the expandedView formBox view -->

<expandedView showRMOImage="on" showDescription="on"showRMOText="on" showStatus="on">

<actionBox mode="on" cssName="actionBox" hzAlignment="right"

vtAlignment="up" widthPercent="40" heightPercent="90"

autosize="off">

<!-- Description of actions associated to the formBox -->...

</actionBox>

</expandedView>

<!-- Description of formProperty boxes (check next paragraph) -->

<formPropertyBox cssName="formProperty">

...

</formPropertyBox>

<!-- List of statuses and their associated resources -->

<status statusName="ERROR" statusResourceName="status.error" statusTranslationName="status.error" />

• FormBox - Expanded view
  
  
  Tip: The collapsed view of the Form can be de-activated by removing the corresponding XML element or setting its mode to ‘off’

VISUAL IDENTITY

Each form box has its own main class.

As action boxes are independent components, a main CSS class is also associated to these elements. Mapping between CSS Classes and component structure

OVERVIEW

Instead of a standard set of FormBoxes, a nestedFormBox can be used to represent looped Forms thanks to a table view.

The nestedFormBox has a collapsed and an expanded view. The description used in the header of the box is the description of the parent nested form.

Here is an example of a form expanded view:

The nestedForm box is a table where the lines (resp. columns) represent each instance of the nestedForm and the columns (resp. lines) represent the form properties when the attribute nestedFormInstances is set to “asLine” (resp. “asColumn”)

On mouse over on the form description, an action flyer is displayed on the current line (or column) to allow the end user creating, cloning, or deleting the form instances.

Several nested form boxes can be created if you want to distinguish the boxes visual identity depending on the userType of the nested Form.

ATTRIBUTES DETAILS

Example: Example:

<!-- Description of the collapsed nestedFormBox view -->

<collapsedView showDescription="on" showStatus="on">

<actionBox …></actionBox>

</collapsedView>

<!-- Description of the collapsed nestedFormBox view -->

<expandedView showDescription="on" showStatus="on">

<actionBox …></actionBox>

</expandedView>

<!-- Description of the form cell -->

<formCell showStatus="on">

<actionBox .... >

</formCell>

<!-- Description of the formProperty cell -->

<formPropertyCell>

<actionBox .... > (OPEN_FLYER for example)

</formPropertyCell>

<!-- Description of other actions on the nestedForm -->

<actionBox>

(SET/RESET of the nested Form)

</actionBox >

<!—List of available statuses -->

<status.../>

</nestedFormBox>

• nestedFormBox – asLines
  
  

  Tip:

  The collapsed view of the Form can be de-activated by removing the corresponding XML element.

  It is possible to display only a subset of the formProperties of the current nestedForm by using the fpUserType attribute.

  One of the use case can be to display only a subset of the FPs in the table view of the nestedForm and the complete view of the current form (with all FPs) in an associated formFlyer.

VISUAL IDENTITY

Mapping between CSS Classes and component structure

Tip:

Each cell corresponding to a formProperty is associated to CSS classes corresponding to the status of the FormProperty: Completed, Error …

The following translation is associated to the component:

<translation name="nestedFormBox.firstColumn.title">Action</translation>

It corresponds to the title of the first column of the table (on the left).

OVERVIEW

Like Form boxes, Form Property boxes have two different views the end-user can activate: expanded and collapsed views.

Here is an example of a formProperty collapsed view:

Here is an example of a formProperty expanded view:

The arrow button allows to switch from a collapsed view to an expanded view (and vice versa). Other action buttons (actionBoxes) can be associated to each view of the formPropertyBox to call specific functions.

Each formPropertyBox is a container of a ‘valueSelector’ that controls the way the domain of values is displayed.

ATTRIBUTES DETAILS

Example:

XML Sample

<formPropertyBox cssName="formProperty" userType="*">

<FPCollapsedView showDescription="on" showStatus="on"

<FPExpandedView showRMOImage="on" showDescription="on" showDomainMessages="on" showRMOText="on" rmoUserType="*" showStatus="on" multipleSelectSize="3">

<commentSelector heightValue="50" titleTranslationName="" titleResourceName=""/>

<actionBox mode="on" cssName="actionBox" hzAlignment="left" vtAlignment="up" widthPercent="2" heightPercent="90" autosize="off">

<!-- Action box information -->

</actionBox>

</FPExpandedView>

</formPropertyBox>

• FormPropertyBox - Expanded view
  
  

VISUAL IDENTITY

Each formProperty box has its own main class.

As action boxes are independent components, a main CSS class is also associated to these elements. Mapping between CSS Classes and component structure

• Expanded view of the formProperty box
  
  
• Collapsed view of the formProperty box
  
  

OVERVIEW

Value selectors are graphical components which are used to list the possible answers for a form property and to enable the user to input an answer (or several answers).

In the configurable product model, each form property is associated to a ‘Layout’ value. The Layout attribute of the FP corresponds to the name of a value selector that will be used by the Configurator to display the Form Property.

This value selector name is linked to a predefined (or custom) value selector type in the Layout XML file.

A library of selectors is packaged by default with the Configurator.

This following table gives the list of predefined value selector types that can be used:

1. Collapsed view – represented by a very simple selector object (textfield or combobox)
   
   
2. Expanded view – if user needs more information to make a choice. This mode is graphically richer and can be represented by more complex value Selectors (image list selectors, value list Selectors)
   
   

When a value is selected from the collapsed view and then the view is expanded, the same value is selected in the expanded view (both views are synchronized).

ATTRIBUTES DETAILS

parameterized in the Layout file ( section).

Parameters activateCollapsedMode and activateExpandedMode can be multi valuated with values ‘simple’, ‘list’, ‘matrix’.

E.g.:

<valueSelector name="TextListValueSelector"

activateCollapsedMode="off" activateExpandedMode="simple,list">

In that case, the expanded mode of the value selector and its formPropertyBox will be activated when the form property Valuation mode is 'Simple' or 'List'. The collapsed mode of the selector will

never be used.

Parameter assignDefaultValue comes with specifics:

• If the setting is false, then the selector highlights default values instead of ticking the checkbox for the end user
• Setting the FP with default values remains feasible with the Assign Default Value action in the event logics
• Computed FPs will still automatically be set with default values

Example of form property values sorting:

In the following example, the values will be sorted first by description (ascending), then by name (ascending), then by price (descending)

<valueSelector ….. sortBy="description,name,price1"

sortType="ascending,descending,descending">

<myValueSelectorType displayType="description,name" …>

<!-- Pricing tag 1 -->

<pricing method="CPE.GET(CPE.Settings.Session.PricingMethod[1])" range="1" resourceName="" resourceAlignment="left" translationName="" translationAlignment="right"/>

<!-- Pricing tag 2 -->

<pricing method="CPE.GET(CPE.Settings.Session.PricingMethod[1])" range="2" resourceName="" resourceAlignment="left" translationName="" translationAlignment="right"/>

<actionBox … >

....

</actionBox>

</myValueSelectorType>

</ valueSelector>

Tip:

The “SET” action which is present by default for all value selectors and allows the valuation of the

FP can be removed.

In such a case (as well as for the collapsed view), the end-user will value a FP :

• Either by pressing ENTER button
• Or by clicking on the radio button associated to a FP value, or by checking a box or by selecting a value in a combobox (depending on the value selector type)

  For FPs having a ‘List’ valuation type it is strongly recommended to keep the default OK button in the User Interface (“SET” action) to avoid submitting information each time a selection is done.

Some standard value selectors can be associated • to action boxes ( actionBox) related to each value of the FP domain • and to up to two pricing information (Pricing method and Range are mandatory in that case). Moreover, some specific additional parameters can also be defined. The following table lists the predefined value selector types with their parameters:

Table continued:

Table continued:

Table continued:

Table continued:

Table continued:

Table continued:

Table continued:

Table continued:

Table continued:

Table continued:

Table continued:

Table continued:

Example:

XML Example

<!—The value of the Layout attribute -->

<valueSelector name="FPLayoutName" activateCollapsedMode="simple,list,matrix" activateExpandedMode="simple,list,matrix">

<!—The value selector itself -->

<myValueSelectorType attribute="attributeValue " …>

<!-- Action box applying on the whole value selector -->

<actionBox mode="on" cssName="myCssClass" hzAlignment="left" vtAlignment="down" widthPercent="100" heightPercent="8" autosize="off">

<action actionName="SET" alignment="left" resourceName="btnOk" translationName="action.Set" url="" />

<action actionName="RESET" alignment="left" resourceName="btnReset" translationName="action.Reset " url="" />

</actionBox>

</valueSelector>

Tip:

The translationName associated to a element is dynamically built following the associated localized message :

<translation name="priceTranslation">From {0} – Fees included </translation>

{0} will be replaced on the fly at runtime by the price to be displayed.

NB: If the translation does not contain {0}, translationAlignment attribute is used to position the translation title and price.

Example:

XML Sample of a productListSelector

<valueSelector name="ProductListValueSelector" activateCollapsedMode="simple,list,matrix" activateExpandedMode="simple,list,matrix">

<productListSelector cssName="productListValueSelector" displayType="description">

<productListBox cssName="productListBox" productCount="5" titleTranslationName="" showBP="on">

<pricing method="CPE.GET(CPE.Settings.Session.PricingMethod[1])" range="1" resourceName="imgPrice1" resourceAlignment="left" translationName="labelPrice1" translationAlignment="left"/>

<pricing method="CPE.GET(CPE.Settings.Session.PricingMethod[1])" range="2" resourceName="" resourceAlignment="left" translationName="labelPrice1" translationAlignment="left"/>

<listView mode="on">

<productRow displayType="name, description" rmoUserType="">

<linkedAction actionName="ACTIVATE_CURRENT" resourceName="" translationName="tooltip.activatecurrent" />

</productRow>

</listView>

<gridView mode="on" columnCount="4">

<productCell displayType="name, description" rmoUserType="">

<linkedAction actionName="ACTIVATE_CURRENT" resourceName="" translationName="tooltip.activatecurrent" />

</productCell>

</gridView>

</productListBox>

</productListSelector>

<!-- Action box applying on the whole value selector -->

<actionBox mode="on" cssName="myCssClass" hzAlignment="left" vtAlignment="down" widthPercent="100" heightPercent="8" autosize="off">

<action actionName="SET" alignment="left" resourceName="btnOk" translationName="action.Set" url="" />

<action actionName="RESET" alignment="left" resourceName="btnReset" translationName="action.Reset " url="" />

</actionBox>

</valueSelector>

VISUAL IDENTITY

Each valueSelector can be associated to a main CSS class (via cssName attribute) like other components. However, this class corresponds to the CSS class associated to the main <div> of the selector when it is displayed in Expanded view mode.

Indeed, when the selector is displayed in collapsed mode, it appears as a comboBox or a textField and then the default CSS class of these value selectors is applied (textFieldValueSelector or comboBoxValueSelector)

• For simple value selectors, the ‘cssName’ attribute is optional. Indeed in expanded view mode (if nothing different is specified in the Layout XML file), a default main CSS class is attributed to their main <div>:

• For advanced value selectors containing multiple sub-components the attribute ‘cssName’ is mandatory in order to customize the UI rendering.

  Tip:

  A class common to all value selectors is associated to the main <div> of each selector: valueSelector

  It allows factorizing information and giving a default value for some properties shared between all value selectors (for example the text decoration depending on the status of values (forbidden, authorized …)):

  Tip:

  For valueSelector using RMO Images:

  • a zoom icon is available if an image ‘Zoom’ is associated to the RMO object.
  • RMO images are displayed following the state of the value:

    Current (resp. On, resp. onMouseOver ) pictures associated to the RMO object in the model appears when the value is Selected (resp. when the value is not selected, resp. when the mouse is positioned on the value)

    1. productSelector visual identity

Mapping between CSS Classes and component structure

1. rollingValueSelector visual identity

Mapping between CSS Classes and component structure

1. itemListSelector visual identity

Mapping between CSS Classes and component structure

1. productListSelector visual identity
   
   

OVERVIEW

The drawingBox allows to display the SVG drawings generated by the generative processes. It displays the list of the drawing compounds.

One or several views (drawing methods) can be generated for a given breakdown line. The different drawing methods are listed in the Setting XML file when launching the Configurator engine.

Each drawing compound is represented in a rolling selector bar which is clickable. The SVG viewer is refreshed depending on the selected compound and view.

If only 1 drawing is generated, the compound selector does not appear.

From the drawing box it is possible to download the drawings as SVG or PNG files. The drawingBox can be included:

• under a combinedBox in any part of the UI pages or directly under the Left/Main or Right part.
• as part of the summaryBox (in the drawing content)

ATTRIBUTES DETAILS

Example:

XML Sample

<drawingBox mode="on" cssName="drawingBox" framedBox="off" autosize="off" heightPercent="45" widthPercent="99" depth="3" titleTranslationName="drawingBox.title" rmoUserType="*"/>

VISUAL IDENTITY

The drawingBox is associated to a main CSS class. It is possible to specify a personalized CSS class for each embedded module.

OVERVIEW

The summaryBox goal is to present an overview of the configured product: a sales breakdown, generated information, generated drawing, properties of your final product, and links to related products.

A summary Box is made of six main parts:

• A summary header and footer: for example to display the total price of the configuration.
• An Item Sheet displaying the information related to the resulting product.
• One or several tabs storing the summaryContents :
  • Sales Breakdown content (designed on the model side) – contentSource ="salesBreakdown"
    • Partial matching content (to display products returned by a partial matching on the Sales Breakdown root line) – contentSource="partialMatching"
    • Configuration Breakdown content (to display a summary of the configuration dialog) – contentSource="confBreakdown"
• A tab for codificationContent related to the generated business properties of the resulting product.
• A tab for drawingContent related to the generated 2DDrawings of the resulting product.

The summaryBox is most of time inserted in the right part of the configuration page and/or in the summary page. Example of summaryBox in the rightPart of the configurationPage:

OVERVIEW

The manufacturingBox goal is to display an overview of the generated manufacturing process including:

• a tree presenting a view of the generated BOM
• a detailed view of the manufacturing processes
• for each manufacturing process or standard items, the list of routings variants and operations as well as their associated business information grids.

Example of the tree view:

• Default Horizontal view
  
  

The name or description of the manufacturing process or standard item is displayed in the bow depending on the value of the ‘dispayType’ attribute.

It is possible to click on a tree node to expand the sub-levels.

The mouse scroll or zoom controls allow to zoom on certain parts of the manufacturing process and access the ‘Zoomed’ view.

• Default Vertical view
  
  
• Zoomed view

The zoomed view allows to display additional information for the manufacturing processes.

Example of the detailed view:

The detailed view can be accessed by clicking on the icon.

It allows displaying the Routings of the currently selected element as well as the BOM of its children.

The businessInformation grids attached to the BOM and routings can be accessed by clicking on the corresponding action.

A manufacturingBox is made of 2 main parts describing the way the detailedView is displayed:

• A manufacturingContent for the BOM: – contentSource ="bom"
• A manufacturingContent (one tab is generated per routing variant) for the Routings: – contentSource ="routing"
  Warning: Contrary to the summaryBox, the manufacturingBox contains dynamic tabs. One tab is generated per routing variant.

ATTRIBUTES DETAILS

CONTENT STRUCTURE

Each content of the manufacturing is made of a Dynamic table.

Reference: For more details regarding the parameterization of the Dynamic Content table, please refer to Dynamic Content table.

VISUAL IDENTITY

The manufacturing box is associated to a main class. Each sub-tabs (related to a manufacturing content) is monitored through another specific main class. Then, each level of the manufacturing content also corresponds to an independent class.

<resource name="manufacturingBox .detailedView.close">theme/ configuratorDesktop/images/manufacturing/btnBack.png</resource>

<translation name="manufacturingBox

.detailedView.close.label">Close</translation>

The title translation of the routing tabs is dynamic and corresponds to the description of the routing:

<translation name="manufacturingBox.tab.manufacturingBoxContentRouting">{0}</translation>

MANUFACTURING ATTRIBUTES DETAILS

The manufacturing process structure is a hierarchy of codified manufacturing processes and standard items. Each element of the structure can be associated to a business information grid, several routing variants listing a set of operations.

In the XML Layout file, a ‘template’ of the manufacturing content has to be described.

When the end-user clicks on an element of the tree view and access the detailed view, the following data is displayed:

• the BOM and Business information grid associated to the children of the currently selected element
• the routings and operations associated to the current element

Tip:

List of keywords you can use in the cellExpression attribute of cells:

• $CURRENT_ ITEM: is replaced at runtime by the CPE of the item associated to the manufacturing structure. The CPQ UI iterates on each element to be displayed.

  It allows to browse the entities of the generated manufacturing structure: Name: $CURRENT_ITEM.name

  Descr: $CURRENT_ITEM.descr

  The current_item can represent the children of the currently selected element when the manufacturingContent=‘bom’, or the operations when the manufacturingContent=‘routing’.

  Example:

  XML Sample

  <manufacturingBox cssName="manufacturingBox" autosize="off" widthPercent="100"

  heightPercent="100" hzAlignment="center" vtAlignment="up" displayType="name,

  description" treeNodeWidth="150" treeNodeHeight="70" rmoUserType="*">

  <manufacturingContent cssName="manufacturingBoxContent"

  tabTranslationName="manufacturingBox.tab.manufacturingBoxContentBOM" contentSource="bom">

  <level cssName="manufacturingLevelHeader" level="header"

  collapseable="off">

  <line>

  <cell type="translation" cssName="cellDescrManuf"

  cellTranslationName=""/>

  <cell type="translation" cssName="cellDescrManuf"

  cellTranslationName="manufacturing.header.name"/>

  <cell type="translation" cssName="cellDescrManuf"

  cellTranslationName="manufacturing.header.description"/>

  <!-- .... -->

  </line>

  </level>

  <level cssName="manufacturingLevelOthers" level="others"

  collapseable="off">

  <line>

  <cell type="translation" cssName="cellDescrBkd"

  cellTranslationName="">

  <linkedAction actionName="OPEN_FLYER(flyerName=

  config.sigFlyer)" resourceName="btnOpenSigFlyer"

  translationName="tooltip.openSigFlyer" />

  </cell>

  <cell type="expression" cssName="cellDescrBkd" cellExpression=

  "$CURRENT_ITEM.name"/>

  <cell type="expression" cssName="cellDescrBkd" cellExpression=

  "$CURRENT_ITEM.descr"/>

  <!-- .... -->

  </line>

  </level>

  </manufacturingContent>

  <manufacturingContent cssName="manufacturingBoxContent" tabTranslationName=

  "manufacturingBox.tab.manufacturingBoxContentRouting"

  contentSource="routing">

  <level cssName="manufacturingLevelHeader" level="header"

  collapseable="off">

  <line>

  <cell type="translation" cssName="cellDescrManuf"

  cellTranslationName=""/>

  <cell type="translation" cssName="cellDescrManuf"

  cellTranslationName="manufacturing.header.

  description"/>

  <cell type="translation" cssName="cellDescrManuf"

  cellTranslationName=

  "manufacturing.header.timetype"/>

  <!-- .... -->

  </line>

  </level>

  <level cssName="manufacturingLevelOthers" level="others"

  collapseable="off">

  <line>

  <cell type="translation" cssName="cellDescrBkd"

  cellTranslationName="">

  <linkedAction actionName="OPEN_FLYER(flyerName=config

  .sigFlyer)" resourceName="btnOpenSigFlyer"

  translationName="tooltip.openSigFlyer" />

  </cell>

  <cell type="expression" cssName="cellDescrBkd" cellExpression=

  "$CURRENT_ITEM.descr"/>

  <cell type="expression" cssName="cellDescrBkd"

  cellExpression="$CURRENT_ITEM.timeType"/>

  <!-- .... -->

  </line>

  </level>:

  </manufacturingContent>

  </manufacturingBox>

OVERVIEW

A salesInformationFlyer pops up a salesInformationBox which aims at displaying additional data associated to each Sales Breakdown Codified Line or to a BOM or a manufacturing Routing.

Warning:

salesInformationFlyer/Box are used to display sales information and businessInformation.

Reference:

The SalesInformation flyer can be called from any cell of a codified line in the Sales Breakdown.

The action will be available on a codified salesBreakdown line if a SIG/BIG has been generated on this line or any invisible subLines.

Please refer to: How to use Flyers for more details

Warning:

As the OPEN_FLYER action can call all kind of flyers, the names of these flyers have to be unique in the XML file.

ATTRIBUTES DETAILS

VISUAL IDENTITY

The salesInformationFlyer is associated to a main CSS class. The resource associated to the header part of the salesInformationFlyer is declared in the XML Layout file.

OVERVIEW

The salesInformationBox displays the content of Sales/Business Information Grids (SIG/BIG). This additional data can be generated for codified Sales Breakdown Line or by the manufacturing process. They are structured tables, for which the columns have been defined by Business Properties

ATTRIBUTES DETAILS

Example:

XML Sample

<salesInformationBox cssName="salesInformationBox" hzAlignment="right" vtAlignment="up" widthPercent="100" heightPercent="100" autosize="off" showSBLDescription="on" titleTranslationName="salesInfoGrid.title" showSublines="on" />

VISUAL IDENTITY

The salesInformationBox is associated to a main CSS class. Mapping between CSS Classes and component structure

OVERVIEW

The bundle page is the container of the Configurable Bundle user interface. It contains the dialog of the bundle (bundleBox), the access to the optimization flyer, and the view on the bundle output.

Warning:

You can only insert one bundle page per Configurator UI file. Bundle, Selection Group, Selection boxes and dedicated valueSelectors can only be used in the context of a bundlePage.

A configuration Page contains one BundleBox.

ATTRIBUTES DETAILS

Tip:

Optimization, Undo and Filter buttons visibility are driven by the bundlePage settings.

Optimization button is used to open the optimization flyer.

Undo button is used to rollback on the last user action and put the configurable bundle back in the previous situation.

Filter button is used by the end-user to add minimum and/or maximum limits on output dimensions, that are used as constraints during the bundle configuration.

VISUAL IDENTITY

In the standard theme, the class bundlePage (in bundlePage.css) allows specifying the default colors for texts appearing in the Selection Groups and Selections. You can personalize the header and corners background, the borde, etc.

OVERVIEW

The bundleBox is an essential component of the page layout when using configurable bundles. It describes the way the dialog is displayed to you. The questions of this dialog (called Selections) are organized in Selection Groups (SG).

Warning:

You can only insert one bundleBox per bundlePage. Selection Groups, Selection boxes and dedicated valueSelectors can only be used in the context of a bundleBox.

A bundle Box contains one or several selectionGroupBoxes having one or several selectionBoxes.

ATTRIBUTES DETAILS

VISUAL IDENTITY

In the standard theme, the class bundleBox (in bundleBox.css) allows specifying the default colors for texts appearing in the Selection Groups and Selections. You can personalize the header and corners background, the borders, etc.

OVERVIEW

A Selection Group has only one view mode which is the expanded one.

When a Selection Group is selected, the Selection boxes contained in this Selection Group are displayed.

ATTRIBUTES DETAILS

Example:

XML Sample

<selectionGroupBox mode="on" cssName="selectionGroupBox" userType="*">

<actionBox mode="on" cssName="actionBox" hzAlignment="right"

vtAlignment="up" widthPercent="40" heightPercent="90"

autosize="off">

<action actionName="RESET" alignment="left"

resourceName="action.form.reset"

translationName="action.reset" url="" />

<!-- Description of selection boxes (check next paragraph) -->

<selectionBox cssName="selectionBox">

...

</selectionBox>

<!-- List of statuses and their associated resources -->

<status statusName="ERROR" statusResourceName="status.error"

statusTranslationName="status.error" />

<status statusName="MANDATORY"

statusResourceName="status.mandatory"

statusTranslationName="status.mandatory" />

<status>...</status>

</selectionGroupBox>

VISUAL IDENTITY

Each selection box has its own main class.

As action boxes are independent components, a main CSS class is also associated to these elements.

OVERVIEW

Like Selection Group boxes, Selection boxes only have one state which is expanded.

Each selectionBox is a container of a ‘valueSelector’ that controls the way the domain of values is displayed.

ATTRIBUTES DETAILS

Example:

XML Sample

< selectionBox cssName="selectionBox" userType="*">

<actionBox mode="on" cssName="actionBox" hzAlignment="right"

vtAlignment="up" widthPercent="2" heightPercent="90" autosize="off">

<action actionName="OPEN_FLYER(flyerName=config.rmoFlyer)"

alignment="left" resourceName=" btnInfo" translationName="

action.openRmoFlyer" url=""/>

</actionBox>

</selectionBox>

VISUAL IDENTITY

Each selectionBox has its own main class.

As action boxes are independent components, a main CSS class is also associated to these elements.

OVERVIEW

Value selectors are graphical components which are used to list the possible products for a selection and to enable the user to input a choice (or several choices).

In the Configurable Bundle model, each Selection is associated to a ‘Layout’ value. The Layout attribute of the SE corresponds to the name of a value selector that will be used by the Bundle to display the Selection.

This value selector name is linked to a predefined (or custom) value selector type in the Layout XML file.

A library of selectors is packaged by default with the Bundle.

This following table gives the list of predefined value selector types that can be used:

ATTRIBUTES DETAILS

Tip:

The “SET” action which is present by default for all value selectors and allows the valuation of the SE can be removed.

In that case (as well as for the collapsed view), the end-user values a SE :

• Either by pressing Enter.
• Or by clicking on the radio button associated to a SE value, or by checking a box or by selecting a value in a combobox (depending on the value selector type).

  For SE having a multi-selection valuation type, it is strongly recommended to keep the default OK button in the User Interface (“SET” action) to avoid submitting information each time a selection is done.

Some standard value selectors can be associated:

• to action boxes ( actionBox) related to each value of the SE domain
• and to up to two pricing information (Pricing method and Range are mandatory in that case).

Moreover, some specific additional parameters can also be defined.

The following table lists the predefined value selector types with their parameters:

Example:

XML Sample

<!—The value of the Layout attribute -->

<valueSelector name="BundleLayoutName" activateCollapsedMode="simple,list,matrix" activateExpandedMode="simple,list,matrix">

<!—The value selector itself -->

<myValueSelectorType attribute="attributeValue " …>

<pricing> <!-- Pricing Information --> </pricing>

<actionBox>

<!-- Action box related to values -->

</actionBox>

</myValueSelectorType >

<!-- Action box applying on the whole value selector -->

<actionBox mode="on" cssName="myCssClass" hzAlignment="left" vtAlignment="down" widthPercent="100" heightPercent="8" autosize="off">

<action actionName="SET" alignment="left" resourceName="btnOk"

translationName="action.Set" url="" />

<action actionName="RESET" alignment="left" resourceName="btnReset" translationName="action.Reset " url="" />

</actionBox>

</valueSelector>

Tip:

The translationName associated to a element is dynamically built following the associated localized message :

<translation name="priceTranslation">From {0} – Fees included </translation>

{0} will be replaced on the fly at runtime by the price to be displayed.

NB: If the translation does not contain {0}, translationAlignment attribute is used to position the translation title and price.

OVERVIEW

This box allows displaying both results associated with the Configurable Bundle dialog and the elements you selected to build your Bundle. When a selection is made, selected elements automatically appear under the format of a list in the Selection section.

ATTRIBUTES DETAILS

VISUAL IDENTITY

Each summary Bundle box has its own main class.

The dialog managed in a bundlePage / bundleBox is driven by rules, among which the Validation rule. Validation rules allows raising Informative or Blocking messages along the dialog to guide you and suggest actions while configuring a Bundle.

Fonctionally speaking, messages pop up on the screen in an informationFlyer whenever they are raised. In that case, either you can acknowledge and close the flyer or click on the redirection action when available and be redirected to a selection where you will be able to take action.

The infomationFlyer in that scenario should be setup to behave as follows:

• Informative and Blocking business explanations are listed at the top of the flyer so that you can focus on them in priority.
• Other potential messages are gathered in a collapsible / expandable "Other Messages" section below the one above.
• For each Informative or Business explanation, the flyer displays:
  • The type of message, e.g. Informative or Blocking.
  • The message itself.
  • A button redirecting you to the corresponding selection where you will be able to modify your choice.

The informationFlyer should specifically include the following categories of messages to support that scenario:

• businessMessages_blockingBusinessExplanations
• businessMessages_informativeBusinessExplanations

In addition, the informationFlyer can also be openened on-demand so that you can consult the list of pending Informative and / or Blocking business explanations. To do so, an OPEN_FLYER action pointing at an informationFlyer including the two above categories must be defined in the layout to open that flyer on-demand. The message persistence must be activated for the overall process to be possible (common.message.persistence=true in cameleon.properties)

CODE SAMPLES

Example of informationFlyer with relevant categories:

<informationFlyer name="bundle.infoFlyer" cssName="flyer" mode="on" openByAction="true" hzPosition="center" vtPosition="middle" resizable="on" hzSize="440" vtSize="300" titleResourceName="" titleTranslationName="bundle.infoFlyer.title" displayType="description" subSectionsMode="off" autoOpen="off" collapsible="off">

<messageCategory mode="on" name="businessMessages_blockingBusinessExplanations"/>

<messageCategory mode="on" name="businessMessages_informativeBusinessExplanations"/>

</informationFlyer>

Example of OPEN_FLYER action:

<action actionName="OPEN_FLYER(flyerName=bundle.infoFlyer)" alignment="left" resourceName="" translationName="tooltip.openBundleInfoFlyer" url="" />

VISUAL IDENTITY