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.
Updated 8 days ago