A Resize rule is executed whenever the browser window containing Epicor CPQ changes in size. You can use this rule to change UI settings of your configurator based on the size of the device the configurator is being run on, or if the window on that device changes in dimension (e.g., if the mobile device is rotated, and the screen becomes wider rather than taller).
Note that the Resize rule always runs once (as part of the initial load of the configurator), and then again if either the window height or the window width changes from user interaction.
Resize rules rarely used.
Configurators appear within built-in layouts, such as the "Classic" layout. Layouts follow the philosophy of "responsive design", which means they already do most (if not all) of the work to ensure the configurator UI flows into the user's screen space in the best way. You can confirm this by viewing your configurator through a mobile device (or through a free simulator of a mobile device).
For example, resize rules can help you make image select lists smaller for mobile device screens, or default expanders of help text to a closed state.
Arguments
Arguments are variables passed in to the rule. You can find them by using the Get/Set variable snap blocks. In this rule type, the Get block exposes these arguments:
| Argument | Type | Description |
|---|---|---|
| windowHeight | number | the new, resized height of the current window in absolute pixels. |
| windowWidth | number | the new, resized width of the current window in absolute pixels. |
| clientLanguage | text | the two-character code representing the current user's preferred language. |
| configurator | Configurator | the current running configurator. |
| environment | string | "dev" if you are in the development environment, "test" if you are in the test environment, and "prod" if you are in the production environment. |
| isMobile | boolean | true, if the viewport seems to have the size of a mobile device. Use this flag to show something differently on screen if required by a smaller device. There are many devices with smaller screens considered mobile devices, and these devices are always changing. For this reason the isMobile flag is calculated for you: rather than trying to determine if a certain windowHeight or windowWidth would be that of a mobile device, simply read the isMobile flag. |
| parameters | map | a map of GET or POST parameters passed into the configurator when it was launched. |
Example
You might want to change the image size of select options and page icons, if the configurator is being used by a mobile device:
