Settings Dialogs with Titanium

The handling for prompts for network, location, and other settings is fairly common when building apps. I think we have all written code that verifies a network connection and then prompts the user to check their network settings.

For a recent project I encapsulated a network and location prompt into a CommonJS model called SettingsDialog. This is just a light wrapper around Ti.UI.AlertDialog. You can find the module here along with a sample app.js.

Network Example

Many of my apps deal with travel, so I end up dealing with network issues more than I would like. Once a network issue has been identified you might have to alert the user that a feature is unavailable to them do to their network conditions. The following example shows how to use the module to create a cross platform dialog with a network settings button. When clicked on Android this will take the user directly to their Network Settings and on iOS will take them directly to their Application Settings.

The below is an example how to create a cross platform network dialog as shown below. When the user taps on the Settings button, they are taken to the device’s settings screen. On iOS you are taken to the App’s Settings and on Android you are taken directly to the Network Settings screen.

Code:


//Before we get started, require the module into our project
var alertSettings = require("settings-dialogs");
	alertSettings.prompt({
		title:"Information",
		message:"We can't find a network connection. Please check your settings.",
		buttonNames:["Settings", "Continue"],
		settingsType : alertSettings.SETTINGS_TYPE.NETWORK, //The type of prompt
		settingsIndex : 0 //What button index should launch the settings
	}, function(d){
		console.log("prompt results = " + JSON.stringify(d));
	});

UI Example:

Location Example

With greater permissions being applied to both iOS and Android likely will need to handle the scenario where the user might change location permissions needed for a feature. You can use the SettingsDialog module to create a prompt asking them to enable Location Services and providing a Settings button to jump them to the Settings screen to make the change. The below example illustrates how to use the module to create cross platform location dialogs.

Code:


//Before we get started, require the module into our project
var alertSettings = require("settings-dialogs");
	alertSettings.prompt({
		title:"Information",
		message:"Please enable location services to use this feature.",
		buttonNames:["Settings", "Continue"],
		settingsType : alertSettings.SETTINGS_TYPE.LOCATION_SERVICES, //The type of prompt
		settingsIndex : 0 //What button index should launch the settings
	}, function(d){
		console.log("prompt results = " + JSON.stringify(d));
	});

UI Example: