UI Components

Components can have UI which gets rendered by the platform

Overview

Components can be defined as UI components and will have the ability to be rendered when an input is sent to a navigationTrigger input. The SDK will automatically navigate to the component and will initialize the view.

SwiftUI

Components with UI are only supported with SwiftUI parent structs. The view must comply to the ComponentView protocol

ComponentView

UIKit view can be wrapped within the required parent SwiftUI view which conforms to the ComponentView protocol by using UIViewRepresentable. In fact, many default components leverage UIKit views under the hood

Requirements

The following are required in order for your component to properly interface with the Cloneable SDK

• Conform to the ComponentView protocol

• Have an associated model which conforms to the ComponentSubscriber protocol and further subscribes to the workflowFramework. See: Component implementation structure - Swift

• Have at least one input that is a trigger

• Component type be ui

Code example

import CloneableCore
import CloneablePlatformiOS

struct ExampleView : View, ComponentView { // <- conform to ComponentView
    var staticComponentID: String // required: provided by SDK
    var dynamicComponentID: String // required: provided by SDK
    var component: DeployedWorkflow_components // required: provided by SDK
    
    // The following view model is not required by the protocol, but it is assumed
    // that you will have a model which conforms to `ComponentSubscriber` and 
    // subscribes to the workflow framework on initialization
    @StateObject var exampleModel: ExampleModel
    
    // Currently in order to initialize the model, we must use an init in the SwiftUI view
    init(staticComponentID: String, dynamicComponentID: String, component: DeployedWorkflow_components) {
        self.staticComponentID = staticComponentID
        self.dynamicComponentID = dynamicComponentID
        self.component = component
        
        // initialize the ExampleModel as a wrapped StateObject so that it only get's initialized
        // on the first rendering of the view and will not get re-rendered on subsequent renders
        // this is recommended usage by apple
        _exampleModel = StateObject(wrappedValue: ExampleModel(dynamicComponentID: dynamicComponentID, staticComponentID: staticComponentID, component: component))
    }
    
    var body: some View {
        
        VStack {
            HStack {
                Spacer()
                Button(action: {self.exampleModel.triggerNavigationOutput()}) { // <- custom function in the model to send an output for the navigation
                    Text("Click to navigate")
                }
            }
        }
    }
}