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.
Challenge
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?
Solution
It seems that it is quite simple, as you can use the generic JavaScript symbol for newline, to show a newline in your Cordova Hybrid apps while utilizing the cordova-plugin-dialog plugin. The JavaScript symbol that inserts a newline is “\n”.
A code example showing the creation of a confirm dialog with newlines in the text to create paragraphs in your text:
[crayon-661e6d7706b4a461773430/]
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.
If you like to see the text in the same layout as it is being presented – ergo, you like to create multiline strings in JavaScript – then you can use backticks in your notification.x (where x is either alert, confirm or prompt) call.
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.
