Customizing the iOS Login Screen Programmatically
Here's the standard Salesforce login screen.
Navigation bar widgets you can customize include the back button (1), which is normally hidden, the title (2), and the Settings icon (3). You can also hide the entire navigation bar. By default, the login screen shows both the top navigation bar and its embedded Settings icon.
The Settings icon
is often referred to as the “gear” icon due to its
sprocket-like shape. Customers can use the Settings icon to select a login server from a built-in
list, or to specify a custom login URI. Some companies, however, don’t allow users to choose the
login server. To disable login server selection, you can hide either the Settings icon itself or
the entire navigation bar. You can also customize the navigation bar's color and the color and
font of its text. Use the following SFSDKLoginViewControllerConfig properties to control the visibility and appearance of
these UI elements.
showSettingsIcon
Controls the display of the Settings icon only. Does not affect the visibility of the navigation bar.
- Behavior
-
Value Meaning YES (default) Default value. The Settings icon is visible and accessible. NO The Settings icon is hidden. Users cannot access the login host list and cannot add custom hosts.
showNavbar
Controls the display of the navigation bar, which in turn hides the Settings icon.
- Behavior
-
Value Meaning YES (default) Default value. The navigation bar is visible. The Settings icon display depends on the showSettingsIcon property. NO The navigation bar and the Settings icon are hidden. Users cannot access the login host list and cannot add custom hosts.
Navigation Bar Colors and Font
- navBarColor
- navBarTextColor
- navBarFont
1let loginViewConfig = SalesforceLoginViewControllerConfig()
2loginViewConfig.showsSettingsIcon = false
3loginViewConfig.showsNavigationBar = true
4loginViewConfig.navigationBarColor = UIColor(red: 0.051, green: 0.765, blue: 0.733, alpha: 1.0)
5loginViewConfig.navigationBarTextColor = UIColor.white
6loginViewConfig.navigationBarFont = UIFont(name: "Helvetica", size: 16.0)
7UserAccountManager.shared.loginViewControllerConfig = loginViewConfigOverriding Navigation Bar Widgets by Extending SFLoginViewController
- Enable the back button—Some developers enable the back button to enhance the customer experience if login fails. You're responsible for providing a custom action if you enable the back button. If you don't customize the action, Mobile SDK uses its default behavior for failed logins, which ignores the back button.
- Override the default title widget—You can provide your own title text and define custom actions.
- Override the default Settings icon—You can substitute a custom icon for the gear image.
Here's a partially coded example.
- Extend SFLoginViewController.
1@interface SFLoginExtendedViewController : SFLoginViewController 2 3@end 4 5@implementation SFLoginExtendedViewController 6 7- (UIBarButtonItem *)createBackButton { 8 // Setup left bar button: 9 // UIImage *image = [[SFSDKResourceUtils 10 // imageNamed:@"globalheader-back-arrow"] 11 // imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; 12 // 13 // Return a custom UIBarButtonItem: 14 // return [[UIBarButtonItem alloc] 15 // initWithImage:image 16 // style:UIBarButtonItemStylePlain 17 // target:self action:nil]; 18} 19 20- (void)handleBackButtonAction { 21 [super handleBackButtonAction]; 22 // Add your custom code here 23} 24 25- (BOOL)shouldShowBackButton { 26 // Add your custom code here. 27 // Return YES to show the back button 28} 29 30- (UIBarButtonItem *)createSettingsButton { 31 // Set up left bar button: 32 // UIImage *image = [[SFSDKResourceUtils 33 // imageNamed:@"login-window-gear"] 34 // imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; 35 // 36 // Return a custom UIBarButtonItem: 37 // return [[UIBarButtonItem alloc] 38 // initWithImage:image 39 // style:UIBarButtonItemStylePlain 40 // target:self action:nil]; 41} 42 43- (UIView *)createTitleItem { 44 // Setup top item. 45 // Create a UIView for title 46 // UIView *item = [[UIView alloc] ... ]; 47 NSString *title = [SFSDKResourceUtils localizedString:@"MobileSyncLogin"]; 48 ... 49 return item; 50} 51 52- (void)viewDidLoad { 53 [super viewDidLoad]; 54 // Do any additional setup after loading the view. 55} 56 57@end -
In the application:didFinishLoadingWithOptions: method of your AppDelegate class, set up the following block.
1... 2[SFUserAccountManager sharedInstance]. 3 loginViewControllerConfig.loginViewControllerCreationBlock = 4 ^SFLoginViewController * _Nonnull{ 5 SFLoginExtendedViewController *controller = 6 [[SFLoginExtendedViewController alloc] init]; 7 return controller; 8 }; 9[SFUserAccountManager sharedInstance].loginViewControllerConfig = 10 loginViewConfig; 11....