---
schema_version: "1"
id: 05c75d157dd0cf4e7576fa56118a28e8e029a6cf0494b48c6eff39f8005034bd
title: Define How To Render Each Element
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/service-cloud/messaging-in-app/guides/ios-define-render-element.md
canonical_url: https://developer.salesforce.com/docs/service/messaging-in-app/guide/ios-define-render-element.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 3f1a13b67575d9cbf587064e5fcb5b15413d39add64ef7769c08e7437a4554df
products:
  - Enhanced In-App Chat
  - Service Cloud Developer Content
---
# Define How To Render Each Element

Use the `ChatFeedViewBuilder` protocol to define how to render each chat feed element.

1. `none` renders an empty view.
2. `existing` renders our default view.
3. `replace` renders the view you provide.
   For the elements that you set to `replace`, you must provide a view to render instead of the default view.

```
struct MyEntryViewBuilder: ChatFeedViewBuilder {

    var renderMode: RenderModeClosure? {
        return { model in
            guard let entryModel = model as? ConversationEntryModel else { return .existing }
            switch entryModel.entry.type {
            case .participantChanged:
                if let changed = entryModel.entry.payload as? ParticipantChanged {
                    if changed.operations.first?.type == .add { return .existing }
                    else { return .none }
                } else {
                    return .existing
                }

            default: return .replace
            }
        }
    }

    var completeView: CompleteViewClosure? {
        return { model, client in
            guard let entryModel = model as? ConversationEntryModel else { return Color.red }
            switch entryModel.entry.format {
            case .textMessage: return Color.green
            case .listPicker: return Color.yellow
            default: return Color.blue
            }
        }
    }
}
```

The preceding example shows how you can use logic on the [`participantChanged`](https://salesforce-async-messaging.github.io/messaging-in-app-ios/documentation/smiclientcore/conversationentrytypes/participantchanged) event to set different render modes. It also shows how you can replace the [text messages](https://salesforce-async-messaging.github.io/messaging-in-app-ios/documentation/smiclientcore/conversationformattypes/textmessage) with a green bar and the [list pickers](https://salesforce-async-messaging.github.io/messaging-in-app-ios/documentation/smiclientcore/conversationformattypes/listpicker) with a yellow bar. Similarly, you can define your unique views or our default views for each chat element.