App UI Customization

Integration Options

Setup

This page sets out how to customize your App Drop-in UI to match the look and feel of your brand by creating an OrcaFlavor object.

Android & iOS examples

The following is a complete example for Android and iOS:

import com.fourthline.networking.NetworkEnvironment.Sandbox
import com.fourthline.orca.core.flavor.OrcaFlavor
import com.fourthline.orca.core.flavor.OrcaFonts
import com.fourthline.orca.Orca
import com.fourthline.orca.workflow.WorkflowConfig
import com.fourthline.orca.workflow.WorkflowCustomizationConfig
import com.fourthline.orca.workflow.workflow
import java.io.File

// Generated by POST https://{{baseUrl}}/v1/workflows/{{workflowId}}/validationcode
val validationCode: String

// Choose `Mock` to test locally or Sandbox/Production for networking
val config = WorkflowConfig(networkEnvironment = Sandbox)

val customFlavor = OrcaFlavor(
    fonts = OrcaFonts(
        screenHeader = OrcaFonts.Font.FromFontRes(fontRes = R.font.roboto_medium, size = 20),
        primaryButton = OrcaFonts.Font.FromFile(file = File("..."), size = 18)
    )
)

val customizationConfig = WorkflowCustomizationConfig(flavor = customFlavor)

Orca.workflow(context, validationCode)
    .configure(config)
    .customize(customizationConfig)
    .present { result -> }
import FourthlineSDK
import UIKit

override func viewDidLoad() {
    super.viewDidLoad()

    var flavor = OrcaFlavor()

    var palette = OrcaPalette()
    palette.primary = UIColor(red: 82.0/255.0, green: 30.0/255.0, blue: 135.0/255.0, alpha: 1)

    var colors = OrcaColors(colorPalette: palette)
    colors.hint.backgroundColor = UIColor(red: 221.0/255.0, green: 210.0/255.0, blue: 232.0/255.0, alpha: 0.5)
    colors.box.borderColor = .gray
    colors.screen.tableCells.cellStyle2.iconColor = UIColor(red: 221.0/255.0, green: 210.0/255.0, blue: 3.0/255.0, alpha: 1)
    flavor.colors = colors

    let customization = WorkflowCustomizationConfig(flavor: flavor)
    let configuration = WorkflowConfig(networkEnvironment: .mock)

    // Generated by POST https://{{baseUrl}}/v1/workflows/{{workflowId}}/validationcode
    let validationCode = "xxxxxxxx"

    Orca.workflow(validationCode: validationCode)
        .configure(with: configuration)
        .customize(with: customization)
        .present { [weak self] result in
            switch result {
            case let .failure(error): self?.handleError(error)
            case .success: break
            }
        }
}

Support

For support or any questions, contact your Fourthline delivery manager.