Lightning Tips are small posts that provide an easy and to-the-point solution for common problems that cross-platform mobile app developers face.
This time, let’s take a look at how you can add newlines into the text of your hybrid Cordova app dialogs to make the information that you present more readable.
Cordova has a nice plugin to show native dialogs in your #hybrid apps. It is called the cordova-plugin-dialog plugin and can be used to show all sorts of dialogs from simple alerts (message statements with an OK button) up to the more complex confirmation and prompt dialogs.
The dialogs use the native OS’s dialog presentation functionality and can contain quite some text. In order to keep the text more clear I strongly advise you to use newlines to make a clear separation from generic text parts and text that might explain the button options to your user.
But how can one add newlines to a dialog to create some spacing? And what is a good way to setup the dialog text?
A code example showing the creation of a confirm dialog with newlines in the text to create paragraphs in your text:
// it's a Cordova plugin, so wait deviceready event
'Welcome to this sample message dialog!\n\nChoos OK to go forward or Cancel to stop.',
When you run the code example, the dialog is being shown as followed (in this case, as shown in the iOS 10 emulator):
It clearly shows how the newlines separate the generic message with from the text that gives information on the available options.
NB: If you’re targeting Windows you might have to use ‘\r\n’ for the desired newline effect. The native implementation for Windows uses Windows.UI.Popups.MessageDialog. The native side uses “Environment.NewLine” to add newline symbols to texts. You can see here that this is being rendered as “\r\n” for Windows environments.
There you have it. Go build & ship stuff.
Take a minute to subscribe to my email list (see the menu) and stay in the loop about my latest creations and content.