The Webex Connect UI SDK for iOS builds on the message transport capabilities exposed within the Core SDK through a collection of customisable user interface components. These components may be used to easily integrate a fully-featured rich messaging capability within a host application.

ICConversationsViewController

Displays a list of conversations for the current user and a floating action button for creating a new conversation, use this view controller when you wish to integrate a conversation list within your own layouts.

The view controller does not open or create new conversations directly, instead, events are raised through the ICConversationsViewControllerDelegate and it is your responsibility to write the code in response to those events if you are not using ICConversationSplitViewController.

Message data is lazily loaded from a local ICMessageStore and remotely from the Webex Connect backend services. To achieve the best possible user experience it is recommended that you configure an appropriate message synchronization policy within the Core SDK in order to pre-fetch data.

Prerequisites

This component loads data from ICMessageStore and therefore requires that a valid instance is set within the Core SDK, please refer to ICMessaging messageStore.

If you are not using ICConversationSplitViewController, you must implement the ICConversationsViewControllerDelegate.

Properties

Methods

Below properties have been added to this class to implement accessibility to the elements of this class.

Properties:

Sample Code:

ICConversationsViewController *conversationsVC = conversationSplitViewControllerInstance.conversationsViewController;
conversationVC.titleLabelAccessibilityText = @”title”;
conversationVC.audioRecordStateLabelTextColor = [UIColor blueColor];

Responding to events

Whenever a user selects a conversation or taps the create conversation button, the appropriate event will be raised through the ICConversationsViewControllerDelegate interface.

ICConversationsViewControllerDelegate

Methods:

ICInboxTableView

This component displays a list of conversations that are provided via the dataSource.

Styling:
This class allows you to customise the conversations table view.

Properties:

Sample Code

[[ICInboxTableView appearance] setBackgroundColor:[UIColor lightGrayColor]];

Methods:

ICInboxTableViewDataSource

Contains the methods needed to populate the ICInboxTableView with some data

Methods:

ICInboxTableViewDelegate

Contains the methods needed to handle an event on the ICInboxTableView.

Methods:

ICInboxMessageTableViewCell

This component is a concrete implementation of the ICMessageTableViewCell.

Below properties have been added to this class to implement accessibility to the elements of this class.

Properties:

Sample Code:

[[ICInboxMessageTableViewCell appearance] setAvatarAccessibilityText:@”Avatar Image”];

Styling:

This class allows you to customise the conversations list.

Properties:

Sample Code

[[ICInboxMessageTableViewCell appearance] setTitleTextColor:[UIColor blueColor]];
[[ICInboxMessageTableViewCell appearance] setDateTextColor:[UIColor redColor]];
[[ICInboxMessageTableViewCell appearance] setReadMessageTextColor:[UIColor redColor]];

ICMessageTableViewCellFactory

This factory has the responsibility to create all the table view cells that will be displayed in the inbox.

ICConversationViewController

Displays messages within a conversation and provides a message composer.

Messages are displayed to the user in chronological order and new messages can be composed and published directly from the view controller. Supports typing indicators, delivery and read receipts, message attachments, and connection indicator.

Message data is lazily loaded from a local ICMessageStore and remotely from the Webex Connect backend services. To achieve the best possible user experience, it is recommended that you configure an appropriate message synchronization policy within the Core SDK in order to pre-fetch data.

Prerequisites

This component loads data from ICMessageStore and therefore requires that a valid instance is set within the Core SDK, please refer to ICMessaging messageStore.

Properties:

Methods:

Below properties have been added to this class to implement accessibility to the elements of this class.

Properties:

Sample Code:

ICConversationViewController *conversationVC = conversationSplitViewControllerInstance.conversationViewController;
conversationVC.audioRecordStateLabelFont = [UIFont systemFontOfSize:15];   
conversationVC.audioRecordStateLabelTextColor = [UIColor blueColor];

Styling

ICMessageComposerFlavor

This class allows you to customize the composer. You can select the plugins that will be displayed in the composer and the composer style.

Properties:

Methods:

ICMessageComposerStyle

Determines the style (color and appearances) of the message composer.

Properties:

ICNewMesssagesToastView

This class is a view component which gets displayed on receiving the new messages when user is in conversation screen and the most recent message is not visible as user scrolled to see the other messages.

Properties:

Sample Code:

[ICNewMesssagesToastView appearance].backGroundColor = [UIColor blueColor];

[ICNewMesssagesToastView appearance].toastViewTitleColor = [UIColor whiteColor];

[ICNewMesssagesToastView appearance].toastViewTitleFont = [UIFont systemFontOfSize:15.0f];

ICConversationCollectionView

This component will display the incoming and outgoing messages in some bubbles.

Properties:

Methods:

ICConversationCollectionViewDataSource

Contains the methods needed to populate the ICConversationCollectionView with some data

Methods:

ICConversationCollectionViewDelegate

It contains the methods needed to handle an event on the ICConversationCollectionView.

Methods:

ICAlertMessageCollectionViewCell

Displays an alert event in the ICConversationCollectionView. This alert could be a conversation that is now closed or reopened for example.

Styling:
This class allows you to customise the alert message collection view cell inside a conversation.

Properties:

Sample Code

[[ICAlertMessageCollectionViewCell appearance] setContainerBackgroundColor:[UIColor blackColor]];
[[ICAlertMessageCollectionViewCell appearance] setContainerCornerRadius:10.0f];    
[[ICAlertMessageCollectionViewCell appearance] setContainerTextColor:[UIColor lightGrayColor]];
[[ICAlertMessageCollectionViewCell appearance] setContainerFont:[UIFont systemFontOfSize:12.0f weight:UIFontWeightRegular]];

ICIncomingMessageCollectionViewCell

Displays the incoming messages in the ICConversationCollectionView. It has the appearance of a bubble.

Styling:

This class allows you to customise the incoming messages inside a conversation.

Properties:

Sample Code

[[ICIncomingMessageCollectionViewCell appearance] setContainerBackgroundColor:[UIColor redColor]];
[[ICIncomingMessageCollectionViewCell appearance] setContainerCornerRadius:10.0f];
[[ICIncomingMessageCollectionViewCell appearance] setContainerTextColor:[UIColor redColor]];
[[ICIncomingMessageCollectionViewCell appearance] setContainerFont:[UIFont systemFontOfSize:15.0f weight:bold]];
[[ICIncomingMessageCollectionViewCell appearance] setTimeFont:[UIFont systemFontOfSize:12.0f weight:bold]];

Methods:

ICOutgoingMessageCollectionViewCell

Displays the outgoing messages in the ICConversationCollectionView. It has the appearance of a bubble.

Styling:

This class allows you to customise the outgoing messages inside a conversation.

Properties:

Sample Code

[[ICOutgoingMessageCollectionViewCell appearance] setContainerBackgroundColor:[UIColor redColor]];
[[ICOutgoingMessageCollectionViewCell appearance] setContainerCornerRadius:10.0f];   
[[ICOutgoingMessageCollectionViewCell appearance] setContainerTextColor:[UIColor redColor]];
[[ICOutgoingMessageCollectionViewCell appearance] setContainerFont:[UIFont systemFontOfSize:15.0f weight:bold]];
[[ICOutgoingMessageCollectionViewCell appearance] setMessageStateFont:[UIFont systemFontOfSize:12.0f weight:bold]];
[[ICOutgoingMessageCollectionViewCell appearance] setTimeFont:[UIFont systemFontOfSize:12.0f weight:bold]];

Methods:

ICConversationHeaderCollectionReusableView

Displays the group where the messages belong. Those groups represents by default the day when the messages have been received.

Styling:
This class allows you to customise the header view of the collection view inside a conversation.

Properties:

Sample Code

[[ICConversationHeaderCollectionReusableView appearance] setMessageGroupFont:[UIFont systemFontOfSize:12.0f weight:UIFontWeightRegular]];
[[ICConversationHeaderCollectionReusableView appearance] setMessageGroupTextColor:[UIColor lightGrayColor]];

Methods:

ICMessageCollectionViewCellFactory

This factory has the responsibility to create all the collection view cells that will be displayed in the conversation.

Methods:

ICConversationSplitViewController

This view controller leverages the functionality of the lower-level components and provides the necessary wiring to combine them into a fully-featured in-app chat experience with minimal code.

The activity supports the display of the user conversation list and provides a means to open them or create new conversations. Selecting a conversation displays the conversation view and allows users to read, compose and send messages.

Prequisites

This component requires that a valid ICMessageStore instance is set within the Core SDK.

Adaptive Layout

The layout of the view controller adapts to the device display, typically when running on a iPhone the activity will display the conversation list full screen, when a conversation is displayed this replaces the conversation list display. Navigating back from the conversation will cause the conversation list to be re-displayed.

When running on an iPad, the layout is split into two sections. The conversation list is shown on the left and the active conversation is shown on the right.

Properties:

ICConversationCategoryViewController

The ICConversationCategoryViewController displays a list of conversation categories.

Categories are represented by ICConversationCategory instances, these instances may be nested to create a hierarchy of categories. The view controller displays one level of categories at a time when the user taps a category the fragment with either:

(a) Where the category has sub-categories, displays the list of sub-categories
(b) Where the category does not have sub-categories, raise an event via the

Properties:

Below properties have been added to this class to implement accessibility to the elements of this class.

Properties:

Interaction

The view controller displays a single level of categories at a time, if a category is selected which has sub-categories then the sub-category list replaces that which is currently shown. Pressing the back button will navigate up one level in the hierarchy.

When a final selection is made the selection is raised as an event through the ICConversationCategoryViewControllerDelegate. A final selection is determined as a category that has no sub-categories.

ICConversationCategoryViewControllerDelegate

Methods:

ICConversationCategoryTableViewCell

Below properties have been added to this class to implement accessibility to the elements of this class.

Properties:

ICConversationCategory

Organizations typically have multiple contact points to which a customer may be directed depending on their query. Conversation categories provide the means to drive users to the correct contact point.

The information contained in a ICConversationCategory instance is also used to establish the correct communication stream for a conversation. Within Webex Connect, real-time messages are sent over a stream, the stream is used to direct messages to the correct service to process the message.

Properties:

Methods:

ICCustomerDetails

Certain integrations, such as IMIchat, allow customer details to be sent to the agent serving customer requests. This class encapsulates that information.

Properties:

Methods:

ICConnectionStatusView

The view is displayed to show the current connection status with the message broker.
3 statuses can be displayed: “Connected.”, “Connecting…” and “Disconnected.”

Styling:
This class allows you to customise the connection status view in conversations screen.

Properties:

Sample Code

[[ICConnectionStatusView appearance] setDisconnectedBackgroundColor:[UIColor redColor]];
[[ICConnectionStatusView appearance] setDisconnectedTextColor:[UIColor blackColor]];    
[[ICConnectionStatusView appearance] setConnectingBackgroundColor:[UIColor orangeColor]];
[[ICConnectionStatusView appearance] setConnectingTextColor:[UIColor blackColor]];    
[[ICConnectionStatusView appearance] setConnectedBackgroundColor:[UIColor greenColor]];
[[ICConnectionStatusView appearance] setConnectedTextColor:[UIColor whiteColor]];

Below properties have been added to this class to implement accessibility to the elements of this class.

Properties:

Sample Code:

[[ICConnectionStatusView appearance] setConnectionStatusLabelAccessibilityText:@"Connection Status"];

ICConversationButton

This button allows the user to open a new conversation screen. Some features will be added to that component in the future.

Styling:

This class allows you to customise the conversation button.

Properties:

Sample Code

[[ICConversationButton appearance] setButtonBackgroundColor:[UIColor redColor]];
[[ICConversationButton appearance] setButtonTintColor:[UIColor blueColor]];    
[[ICConversationButton appearance] setButtonTextColor:[UIColor blueColor]];    
[[ICConversationButton appearance] setButtonCornerRadius:10.0f];

Accessibility Changes

Below properties have been added to this class to implement accessibility to the elements of this class.

Sample Code:

[[ICConversationButton appearance] setAccessibilityText:@"New Conversation"];

ICConversationButtonDelegate

Methods:

Protocols

ICNewMesssagesToastViewDelegate

@protocol ICNewMesssagesToastViewDelegate

This protocol handles the new messages toast view selection made by the user. Below is the method that is been declared in this protocol.

didTapNewMessagesToast;

This method will be used to handle the new messages toast view selection made by the user.

Syntax: - (void)didTapNewMessagesToast;

Sample Code:

if (self.messagesToastDelegate != nil

&& [self.messagesToastDelegate respondsToSelector:@selector(didTapNewMessagesToast)]) {

[self.messagesToastDelegate didTapNewMessagesToast];

}