NowWebThemeable protocol - iOS

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of NowWebThemeable protocol - iOS

    TheNowWebThemeableprotocol allows ServiceNow customers to customize the colors used within web pages displayed in native iOS web views hosted on their ServiceNow instance. By implementing this protocol, developers can override default web page styling with tailored color themes that align with their brand or application design.

    Show full answer Show less

    Key Features

    • NowWebThemeable protocol: Defines a color property conforming to NowWebColoring, which manages color variables for theming.
    • NowWebColoring protocol: Works alongside NowUIColoring to reference and organize default or custom UI color variables.
    • Defining custom colors: Customers can create a WebColors struct conforming to NowUIColoring to specify custom colors for different UI elements such as brand, primary, alert, background, and text colors.
    • Light theme support: Examples show how to customize colors for light themes by referencing default theme colors and overriding them as needed.
    • WebTheme structure: By implementing a struct conforming to NowWebThemeable (e.g., CarrascoWebTheme), developers encapsulate custom color definitions and provide them to the web view controller.
    • Integration with NowWebService: Theme objects can be passed when creating a web view controller via NowWebService.makeWebViewController, enabling the web content to render with the customized theme.

    Practical Application for ServiceNow Customers

    Implementing NowWebThemeable in your iOS app allows you to:

    • Maintain consistent branding across native and web content within your ServiceNow mobile experience.
    • Enhance user experience by applying custom color schemes that align with your corporate identity or accessibility requirements.
    • Leverage default themes provided by the Mobile SDK or fully customize colors for UI elements such as alerts, headers, backgrounds, and text.
    • Easily instantiate and apply your custom theme when presenting web content, ensuring seamless visual integration.

    This capability empowers ServiceNow customers to deliver a polished, branded mobile interface that aligns with their organization's design standards while using native iOS web views to display ServiceNow web pages.

    The NowWebThemeable protocol provides properties that enable you to override the colors used within web pages hosted on your ServiceNow instance in a native web view.

    public protocol NowWebThemeable {
    var color: NowWebColoring { get }
}

    The NowWebColoring protocol contains NowUIColoring. This property is used to reference default color variables that NowWebThemeable can use.

    For additional information on how to theme the UI, see Use NowUIColoring to theme NowWebTheme and NowChatTheme in the Mobile SDK Developer Guide - iOS.

    Define WebColors using default colors

    /// Sample structure for using default colors that come with Mobile SDK.
struct WebColors: NowUIColoring {
}

    Define WebColors using custom colors

    /// Use custom colors with light theme
struct WebColors: NowUIColoring {
    private var defaultTheme: NowWebDefaultTheme { NowWebDefaultTheme(nowUITheme: NowUIDefaultTheme())
    }
    
    var brand: UIColor { lightBrand }
    var primary: UIColor { lightPrimary }
    var textPrimary: UIColor { lightTextPrimary }
    var screenHeaderText: UIColor { lightScreenHeaderText }
    var screenHeaderBackground: UIColor { lightScreenHeaderBackground }
    var textActionable: UIColor { lightTextActionable }
    var alertCritical0: UIColor { lightAlertCritical0 }
    var alertCritical3: UIColor { lightAlertCritical3 }
    var alertPositive0: UIColor { lightAlertPositive0 }
    var alertPositive3: UIColor { lightAlertPositive3 }
    var alertLow0: UIColor { lightAlertLow0 }
    var alertWarning0: UIColor { lightAlertWarning0 }
    var backgroundPrimary: UIColor { lightBackgroundPrimary }
    
    // Light Colors
    var lightBrand: UIColor { defaultTheme.color.brand }
    var lightPrimary: UIColor { defaultTheme.color.primary }
    var lightTextPrimary: UIColor { defaultTheme.color.textPrimary }
    var lightScreenHeaderText: UIColor { defaultTheme.color.screenHeaderText }
    var lightScreenHeaderBackground: UIColor { defaultTheme.color.screenHeaderBackground }
    var lightTextActionable: UIColor { defaultTheme.color.textActionble }
    var lightAlertCritical0: UIColor { defaultTheme.color.alertCritical0 }
    var lightAlertCritical3: UIColor { defaultTheme.color.alertCritical3 }
    var lightAlertPositive0: UIColor { defaultTheme.color.alertPositive0 }
    var lightAlertPositive3: UIColor { defaultTheme.color.alertPositive3 }
    var lightAlertLow0: UIColor { defaultTheme.color.alertLow0 }
    var lightAlertWarning0: UIColor { defaultTheme.color.alertWarning0 }
    var lightBackgroundPrimary: UIColor { defaultTheme.color.backgroundPrimary }
}

    Define WebTheme structure with NowWebThemeable protocol

    struct CarrascoWebTheme: NowWebThemeable {
    var color: NowWebColoring
    
    struct Color: NowWebColoring {
        var nowUIColor: NowUIColoring
    
        var alertPositive0: UIColor
        var alertPositive3: UIColor
        var alertLow0: UIColor
        var alertWarning0: UIColor
        var backgroundPrimary: UIColor
        
        init(inputs: WebColors) {
            nowUIColor = ThemeColor(inputs)
            
            alertPositive0 = inputs.alertPositive0
            alertPositive3 = inputs.alertPositive3
            alertLow0 = inputs.alertLow0
            alertWarning0 = inputs.alertWarning0
            backgroundPrimary = inputs.backgroundPrimary
        }
    }
    
    public init(webColors: WebColors) {
        color = Color(inputs: webColors)
    }
}

    Instantiate a WebTheme object by passing WebColor as input

    let webTheme = CarrascoWebTheme(webColors: WebColors())

    Pass a WebTheme object to NowWebService.makeWebViewController

    func webViewController(for url: URL, delegate: NowWebViewControllerDelegate) -> NowWebViewController? {
  guard let webService = webService else {
    debugPrint("Web service not initialized")
    return nil
  }
  let result = webService.makeWebViewController(for: url, delegate: delegate, theme: CarrascoWebTheme(webColors: WebColors()) )
    
  switch result {
  case .success(let viewController):
    return viewController
  case .failure(let error):
    debugPrint("Web view creation failed with error: \(error.localizedDescription)")
  }
  return nil
}