Responsive Configuration & Breakpoint context aware configuration

We use in our configurations ResponsiveConfiguration and Breakpoint context aware configuration. The first one is an instance having nested a collection of Breakpoint context aware configurations. You can check a usage example in docs application Those breakpoints are computed and stored in the request bindings breakpoints, that is an array of ordered breakpoints.

Some configuration to pay specifically importance to:

key

key specific to that breakpoint, that we use in the different accesses

propertySuffix

this will be used by consumer code to fetch a property value specific to that breakpoint, say property text fetched with breakpoint desktop that has Desktop as property suffix will allow a lookup to textDesktop property.

inherit

this property is looked at to know whether or not we should fallback to next breakpoint for a property fetch (see inherited usage of responsive properties).

mediaQuery

this property sets the media query specific to that breakpoint, leave it empty for "default" behaviour

Responsive Properties

At each sling request, a responsive properties instance is built upon above configured breakpoints, and available in 2 different forms:

As a value map

in the bindings, you'll find a responsive properties instance, that is a linked hash map of value maps, it's available from the bindings with resprops key, so e.g. resprops.mobile.text will give you text version of the mobile breakpoint.

As an "inherited" map

Say there is no textDestkop value for current component and current desktop breakpoint, and inherit property for that same breakpoint is set to inheritProp that has a value of inherit or not set (default behaviour), then textTablet will be looked up (if next breakpoint is tablet, with property suffix Tablet