Ask Reuben

Native Widgets on Mobile

Why is FORMAT not being respected with a DATEEDIT on a mobile device?

Why is a Presentation Style not being respected on my mobile device?

Why is the widget for this field different on a mobile device? 

In 2018, in the 1.00.47 release of Genero Browser Client (GBC),  the mobile theme was enhanced to use native widgets.  You can see this mentioned in the GBC 1.00.47 New Releases and Upgrade Notes.  What this meant is that on a mobile device, instead of getting the Four Js DATEEDIT, DATETIMEEDIT, TIMEEDIT, SPINEDIT widget you would get the applicable native widget.  The upside is that the user gets a consistent user experience with other applications on their mobile device.  The downside is that there isn’t always a 1-1 correspondence between a 4gl Attributes, 4gl Presentation Style and what the native widget is capable of.   This is most noticeable with the date format where the widget will use the native format setting rather than the 4gl FORMAT setting.

How this is implemented is a good lesson in GBC Customization , the concept of Widget Instantiation Overrides, and the use of Theme Conditions.  With a GBC Customization project, find the file gbc-project-dir/theme/platform/mobile/theme.config.json and note the lines …

{
    "conditions": ["isMobile"],
    "widgetFactory": {
         "DateEdit": "cls.DateEditMobileWidget",
         "DateTimeEdit": "cls.DateTimeEditMobileWidget",
         "TimeEdit": "cls.TimeEditMobileWidget",
         "SpinEdit": "cls.SpinEditMobileWidget"
    }
}

This says that if we detect that a mobile device is being used, then use a different set of widgets for DateEdit, DateTimeEdit, TimeEdit, and SpinEdit.

We can find the source for the standard set of widgets in gbc-project-dir/src/js/base/widget/widgets/formfields and we will find these overriding widgets used on mobile devices in gbc-project-dir/src/js/base/widget/widgets/formfields/mobile.  The key thing to note is the input tag in the .tpl.html file and its type attribute.   If it has type=”text” then the GBC source is emulating a widget and its behaviours.  If it has type=”something other than text” then it is using the native widgets that a browser will use.  You can try these in the w3schools input type= Try-it-yourself pages here.

The screenshots below show the difference between the native widget and the 4gl widget.  The program running is the DateEdit widgets demo from FGLDIR/demo.  The blue themed screen is the default rendering on a mobile device using the widget instantiation override that is built into the default GBC rendering, and is using the native widget.  The red theme is my customisation where I have removed the widget instantiation override and so is using the normal 4gl widgets.


Default (Native Widget used on Mobile)Customisation (Genero Widget used on Mobile)

If you pay attention to the second field in particular, you will note that the FORMAT=”mm-dd-yy” is being ignored in the blue screen and instead we see the format that is coming from the device settings and is dd Mmm yyyy.


Default (Native Widget used on Mobile)Customisation (Default Widget used on Mobile)

In this second series of screenshots, pay attention to the calendar widget.  The blue screen is getting the Native iOS calendar widget, whilst the red screen has the default 4gl calendar widget that you would also see on desktop screens.

One thing to watch out for with native widgets is that they typically don’t have the functionality to enter a QBE criteria.  Hence in a CONSTRUCT, you may see the 4gl widget being used.

Our default rendering uses the native widgets on mobile devices.   Within your customisation, you may choose to use the native widget on all devices, or equally you might choose to not use the native widget at all.