Action Components
actionFlyer
OVERVIEW
The actionflyer is a menu containing elements triggering specified actions.
ATTRIBUTES DETAILS
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| name: identifier of the Flyer. This name is used as a parameter of the OPEN_FLYER action. | #REQUIRED | |
| vtPosition: gives the vertical position of the flyer relatively to the “invoking” button | up / middle / down | |
| hzPosition: gives the horizontal position of the flyer relatively to the “invoking” button | left / center / right | |
| vtSize: gives in pixel the vertical size of the flyer | #IMPLIED | |
| HzSize: gives in pixel the horizontal size of the flyer | #IMPLIED |
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| action (repeatable section) | #REQUIRED | |
| resourceName: identifier of the resource used to give the image representing the action | #IMPLIED | |
| translationName: identifier of the translation used to give the label of the action | #IMPLIED | |
| actionName: identifier of a standard or a custom action. | #IMPLIED | |
| alignment: gives the location of the action in the box. all actions in an given action box should have the same alignment | left / center / right |
Reference: Please check the list of available actions: CPQ UI Actions
VISUAL IDENTITY
The actionFlyer is associated to a main CSS class. Mapping between CSS Classes and component structure
actionBox
OVERVIEW
The actionBoxes are the container of actions (triggered when clicking on the action box)
ATTRIBUTES DETAILS
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| mode: actionBox visible or not | on / off | |
| widthPercent: percentage of occupancy in the total width of the container/flyer | #IMPLIED | |
| heightPercent: percentage of occupancy in the total height of the container/flyer | #IMPLIED | |
| autoSize | ||
| hzAlignment: gives the horizontal alignment of the box in its container/flyer | left / right / center / justified | |
| vtAlignment: gives the vertical alignment of the box in its container/flyer | up / down / middle / distributed | |
| keyBoardNav: keyboard Navigation activated or not | on / off |
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| action (repeatable section) | #REQUIRED | |
| resourceName: identifier of the resource used to give the image representing the action | #IMPLIED | |
| translationName: identifier of the translation used to give the label of the action | #IMPLIED | |
| actionName: identifier of a standard or a custom action. | #IMPLIED | |
| alignment: gives the location of the action in the box. | left / center / right |
Note:
Actions can be split over a maximum of 3 “virtual” columns and then can be positioned left or right or centered in the box.
Actions COPY/CUT/PASTE/DELETE/NEW are applicable only on nested elements (e.g. CP level of vertical selector, form boxes…). They can be declared in the XML layout file but will only appear if the element is flagged as “nested” in the model structure.
XML Sample
<actionBox mode="on" cssName="actionBox" hzAlignment="right" vtAlignment="down" widthPercent="30" heightPercent="90" autosize="off"> <action actionName="CLOSE" alignment="left" resourceName="action.close translationName="action.close" url=""/>
<action actionName="NEXT" alignment="left" … /> </actionBox>
VISUAL IDENTITY
The actionBox is associated to a main CSS class. The resources associated to each action box are declared in the XML Layout file.
Mapping between CSS Classes and component structure