The Device Sensor control reports the device / browser type and screen size to your coach so that layout and behaviour can adapt (responsive rules beyond CSS). It renders nothing; its value is a bound object / options you read in code.
- Read it with the control API: the sensor exposes methods such as isMobile(), isTablet(), isDesktop(), getScreenSize() (XS / SM / MD / LG in Bootstrap terms) and fires an event when the size class changes (On change / on resize).
// coach load or the Device Sensor's "On change" event
var d = ${Sensor};
if (d.isMobile()) {
${Table}.setVisible(false); ${CardList}.setVisible(true); // cards instead of a wide table
${Sidebar}.setVisible(false);
} else {
${Table}.setVisible(true); ${CardList}.setVisible(false);
}
console.log("size class:", d.getScreenSize()); // "xs", "sm", "md", "lg" Typical uses: choose between a table and a card layout, collapse navigation on phones, hide help text on small screens, change page sizes, and pick the camera-based File Uploader options on mobile. Combine with the responsive settings of the layout controls (Horizontal Layout's Responsive columns, per-screen-size widths) which need no code; use the sensor for logic, not for plain layout.
References