4D for Mobile: Custom Data Formatters for Light & Dark Appearances

For some time, you’ve been able to create your own custom data formatters and convert strings, booleans, or integers to images in your generated app.

This new 4D v19 R2 feature will allow you to take full advantage of those formatters for iOS and Android, and make sure images look good in both light and dark appearances.

Let’s see how!

You can do this in three different ways :

• using black and white colors
• using different pictures depending on the active mode
• mixing the above two options

UsING black and white colors

This option will allow you to obtain color-optimized images depending on the mode set on your mobile device (light or dark).


{  "name": "textToImage",
   "type": ["text"],
   "binding": "imageNamed",
   "choiceList": {"clear":"clear.png","cloudy":"cloudy.png","rain":"rain.png"},
   "assets": {
      "size": 54,
      "tintable": true
   }
}

For all your classic formatters, the formatter manifest.json file should already contain the following information :

• a “choiceList” that contains the values that are going to be replaced by images
• images (or assets) properties such as “size”

 

The significant difference here is that the “tintable” key is set to true so that the image color (black or white) can be dynamically adapted according to the UI’s theme mode.

Here’s what you get on your phone when you switch modes:

UsING different pictures depending on the mode

This option lets you set different optimized images to be displayed depending on the mode set on your mobile device.


{  "name": "textToImage",
   "type": ["text"],
   "binding": "imageNamed",
   "choiceList": {"clear":"clear.png","cloudy":"cloudy.png","rain":"rain.png"},
      "assets": {
      "size": 54
   }
}

Here, the formatter is the same as the previous one. What changes is the name of the image. If an image suffixed with “_dark,” it is used for dark mode.

Example: “clear_dark.png” is set as the dark version of “clear.png”

Here’s the result:

MixING Both options

This option will allow you to take advantage of the two previous options. This means that you can set the “tintable” key to true, and at the same time specify optimized images and colors to be displayed depending on the mode set on your mobile device.

You’re now ready to use your formatters whether your iOS and Android device is in dark or light mode.

Yes, this feature is also available on Android!

Don’t hesitate to give us feedback on the 4D forum, and check out the dedicated documentation for more details.