Control Behavior Overrides
Description
This property is used with mobile devices.
The UX component allows you to customize the behavior of certain controls based on the screen size of the device. For example, normally, the 'picker' for a date control, or an edit-combo control opens in a drop-down window, immediately under the control. However, on a phone, which has a narrow screen, there is not enough room to display the control's 'picker' in a dropdown window. Instead, you are likely to want the control to appear in a window that is docked to the bottom of the screen, centered horizontally.
To define control behavior overrides, click the smart field button for the 'Control behavior overrides' property on the UX Properties pane.
This will open a dialog where you can insert the Javascript that defines the behavior override. The behavior override is expressed in the form of Javascript code that uses the A5.override.add() function to define the behavior override.
For example, in the code snippet shown below, the behavior of the 'Edit-combo' control is changed when the screen size is less than 500 pixels.
/*
if the width of the viewport is less than 500px make datePickers and edit-combos
pop up from the bottom of the screen, centered horizontally
*/
var vpSize = AUI.u.getVPSize();
if(Math.min(vpSize.width,vpSize.height) < 500){
A5.overrides.add('editCombo',{
base: {
decouple: true,
window: {
width: '100%',
height: '50%',
pointer: {show: false},
location: ['dock','bottom'],
animation: {
show: {type: 'css-slide'}
}
}
}
}
);
}Videos
Customizing The Date Picker and Edit-Combo Behavior on a Phone
The UX component allows you to customize the behavior of certain controls based on the screen size of the device. For example, normally, the 'picker' for a date control, or an edit-combo control opens in a drop-down window, immediately under the control.
However, on a phone, which has a narrow screen, there is not enough room to display the control's 'picker' in a dropdown window. Instead, you are likely to want the control to appear in a window that is docked to the bottom of the screen, centered horizontally.
In this video we show how you can define Javascript to override the behavior of certain controls, depending on the screen size.