NowWebThemeable protocol - iOS

  • Release version: Xanadu
  • 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 in iOS enables ServiceNow customers to customize the color scheme of web pages hosted within native web views on their ServiceNow instance. By conforming to this protocol, developers can override default colors to align the web content’s appearance with their brand or UI theme requirements.

    Show full answer Show less

    Key Features

    • The protocol defines a color property of type NowWebColoring, which references customizable color variables.
    • NowWebColoring builds upon NowUIColoring to provide default and custom color definitions for UI elements such as alerts, headers, backgrounds, and actionable text.
    • Developers can define their own WebColors structs either by using default Mobile SDK colors or by specifying custom UIColor values for light themes.
    • A complete theme structure (e.g., CarrascoWebTheme) implements NowWebThemeable and initializes its colors from the defined WebColors.
    • The custom theme is passed when creating a web view controller through NowWebService.makeWebViewController, allowing the web content to render with the specified colors.

    Practical Application

    To apply custom theming in your iOS app:

    • Create a WebColors struct defining your preferred colors.
    • Implement a theme struct conforming to NowWebThemeable, initializing color properties from your WebColors.
    • Instantiate the theme object and supply it as a parameter when invoking makeWebViewController on the ServiceNow web service.

    This approach ensures consistent branding and UI coherence between native app views and ServiceNow web content, enhancing user experience.

    Key Outcomes

    • Full control over the color styling of embedded ServiceNow web pages in iOS apps.
    • Ability to maintain brand alignment and improve visual integration between native and web components.
    • Seamless method to apply and update themes through structured color definitions and protocol conformance.

    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
}