Device informations

The Device object provides information about the device on which the application is running.

Responsive breakpoints

The Device object provides the following properties to get the current responsive breakpoint :

The Device.ResponsiveBreakpoint property is a enum of type ResponsiveBreakpoint which can be one of the following values :

• ExtraSmall : The device is extra small (width < 640px)
• Small : The device is small (width >= 640px and width < 768px)
• Medium : The device is medium (width >= 768px and width < 1024px)
• Large : The device is large (width >= 1024px and width < 1280px)
• ExtraLarge : The device is extra large (width >= 1280px)

This property can be used in the UI view template to display different content depending on the device size :

Create a computed named IsSmallDevice :

return Device.ResponsiveBreakpoint == SystemEnvironment.ResponsiveBreakpoint.ExtraSmall || Device.ResponsiveBreakpoint == SystemEnvironment.ResponsiveBreakpoint.Small;

Then use it in the UI view template :

<if condition="@Computeds.IsSmallDevice">
    <text>This is displayed only if the device is small or extra small</text>
</if>
<else>
    <text>This is displayed only if the device is medium, large or extra large</text>
</else>

To avoid the creation of the computed , you can also use the Device.HasLargeScreenWidth or Device.HasSmallScreenWidth property directly in the UI view template :

• HasLargeScreenWidth is true when the device is large or extra large or medium.
• HasSmallScreenWidth is true when the device is small or extra small.

<if condition="@Device.HasSmallScreenWidth">
    <text>This is displayed only if the device is small or extra small</text>
</if>
<else>
    <text>This is displayed only if the device is medium, large or extra large</text>
</else>

Note

Device properties are reactive, so the UI will be updated automatically when the device size changes. Device can be used in the UI view but also in the UI Component and in menu item code.