TI-Customer
Last updated
Was this helpful?
Last updated
Was this helpful?
Client App creates a Flow but, the End-User experiences this Flow using the Customer App. This guided Flow - experience is made possible by TI-Framework SDK in the Customer App and TI-Server.
Eg: Flow consists of two Tasks Terms and Conditions, Privacy Policy respectively. These Tasks are presented to the End-User in the Customer App in a predefined order. End-User is also provided with UserActions to accept or acknowledge the Terms and Privacy policy. The Client app will receive UserActions for all the tasks via TI-Server before the Flow is completed.
TI-Customer app is implemented in Angular. Please refer to the individual sections below to understand the design. are used to define and implement the behavior needed for each Task. are designed to abstract and simplify the signaling between the app, SDK and server. declares interfaces to enforce data types when the Components and Services interact with each other or with the SDK/TI-Server. are passed when delegating the functionality from app to SDK, so that app can receive updates(app listens to updates).
This is the base component for all the tasks. It consists of BaseTouchlessTask class, TouchlessInteract interface, and TouchlessFlowListeners interface.
BaseTouchlessTask contains methods to update Task status and any user-input data from individual Task components to the TI Server. This information is key to the server to understand whether Task has started or about to complete and update the Flow Session in the database, while simultaneously relaying all the updates to the .
TouchlessInteract declares methods to be implemented for sending data from TI-Customer app to TI-Client app.
TouchlessFlowListeners is needed for the individual Tasks in TI-Customer app to receive updates on TaskStatus (eg: whether TI-Server determined that a Task is completed. etc.). This interface declareslistenToTaskStatus to receive such updates, later implemented in TouchlessTaskComponent.
There are two types of components used in the TI-Customer App. and It is important to note that TI-Client can only create a Task, but the corresponding user experience must be implemented by TI-Customer App. This is achieved through TaskComponent. So, each TaskComponent in TI-Customer App corresponds to a unique Task.
TouchlessTaskComponent is the parent component for all the individual Task components like DocumentComponent, TermsComponent etc. It implements all the interfaces needed to initiate Tasks, send and receive Flow related data to TI-Client and TI-Server, and navigate between multiple Tasks that are part of the active Flow/Session. More details below.
TaskPathHandler is an interface present in ti-framework SDK. It declares nextTaskPath and its uniqueId to facilitate navigation from the current Task to the next eligible Task in the Flow.
TaskProgressListener is an interface that needs to be implemented by each Task to process the updates received from TI-Server such as Task/Flow is updated or finished.
Other utility methods needed for each Task to handle component related actions needed to process the Flow Eg: getTaskConfiguration, deRegisterPathHandler, taskSubmitAndFinish are also implemented here.
Our demo implementation for TI-Customer app contains below Task components to handle a simple Flow
The TermsComponent presents End-User, a sample terms & conditions and offers options to accept or reject. this must call. The PrivacypolicyComponent presents a sample privacy policy and offers options to accept or reject. The DocumentComponent presents a sample acknowledgment text and a sign-pad for End-User to draw a signature and click submit to finish the Flow.
All the above components must implement AfterViewInit and call getTaskConfiguration to receive all the details like the resourceUrl created by TI-Client app as part of the Task. They should also implement appropriate methods and call taskSubmitAndFinish to send UserProvidedAction for that Task as a TaskOutput object.
Other components are an integral part of TI-Customer app to facilitate the Flow Orchestration. Please read through the below sections to understand each component's role.
RegisterComponent is a mandatory component in TI-Customer app and is the entry point for End-Users. This is not a Task Component created by TI-Client app and is not part of any Flow. This component is only used to consume the 4 digit invite code sent by TI-Client app while initiating a Flow. Using this unique 4 digit code, RegitserComponent connects the TI-Customer app to the corresponding Session via FlowService, get path for the first Task in the flow and navigate to it.
NavbarComponent is a mandatory component in TI-Customer app and is persistent through all screens of the app. It is used to provide access to features like Interaction/ Help section etc.
InteractionComponent is a mandatory component in TI-Customer app. It can be accessed using NavbarComponent and is responsible for displaying all the interaction/chat messages for that Session. It also provides a UI to send new messages.
FlowcompleteComponent is used to inform the user that Flow is complete.
AlertComponent is used throughout the app to display useful alerts or notifications to the End-User. It is usually consumed by other components as a child view. It accepts string parameters to display a custom message and AlertType.
FlowprogressComponent displays the percentage of Tasks and or Stages that are completed so far in the Session, in the form of progress bars.
SignpadComponent is used by DocumentComponent to display and draw a signature view.
This is a Customer specific implementation for FlowListener in ti-framework SDK.
Usage:
CustomerDataInterface is a Connection listener, used for getting updates on Interaction connection status.
hasInteractionStarted is a utility method to find out if interaction started.
receiveData is used to store and update the interaction data received from client app.
Services are used by components to process complex operations like Server communication, data computations, etc. Below is the list of the key services implemented in the TI-Customer app.
This is the base service for the customer app. Utility methods, objects needed throughout the app are declared and implemented here.
registerByCode is used by FlowService to connect to the Session. It sends code to TI-Server via SDK and receives details about the session like FlowDetails, channels for Flow, etc.
startInteraction is used by FlowService to request SDK to start the Interaction. After SDK brings up the Interaction channel successfully and connects to TI-Server, _hasInteractionStarted is set to true.
broadcastMessage sends InteractionData on Interaction Channel <This Data will be converted to ti.CommunicationData by SDK and forwarded to TI-Client from Server
All the TaskComponents use FlowService either directly or via their parent components to complete actions like connecting to a Session, send or receive updates on the Flow, enable interaction data etc. FlowService can communicate with SDK directly or via BaseTIService to serve the TaskComponents on the above-mentioned actions. A few important methods in FlowService are described below.
setEnvironment is a utility to configure your server url to a production server or to your localhost for debug purposes.
startInteraction is called automatically when TI-Customer app successfully connects to a Session. This uses BaseTIService to request SDK to start Interaction for this Session. If you do not want to enable Interaction featue for your Session, disable this method.
sendTaskUpdateToServer is a key utility method offered by FlowService to the TaskComponents to send updates like TASK_STARTED , TASK_COMPLETION_REQUEST etc.
registerPathHandler adds a new TaskPathHandler to the existing list of FlowService's routePathHandlers. Knowledge of the next task's path is needed when trying to navigate between tasks
deRegisterPathHandler removes existing TaskPathHandler from the list of FlowService's routePathHandlers. This is called when there is no need for a Task to obtain a path for the next Task.
registerTaskListener adds a new TaskProgresslistener to the existing list of FlowService's taskListeners, when a new TaskComponent is initiated.
InteractionService is the entry point for all Sessions where Interaction feature is enabled.
sendInteraction is a method used by TaskComponents to send Interaction data to TI-Client app. This method uses BaseTIService to communicate above request to the SDK.
listenToInteraction is a utility method that the InteractionComponent uses to receive the latest interaction data.
Most of the Data models are declared as interafaces and available in the ti-framework SDK.Please refer to SDK models A select few that are cutsomer specific are defined the TI-Customer app in flowdata.interface.ts
TaskPayload
TaskStatus
TaskOutput
UserProvidedAction
UsersInputType
Create a custom componnet with class extending TouchlessTaskComponent. Implement AfterViewInit to send TaskStatus updates Eg: Task has started. Use getTaskConfiguration to receive all the details like the resourceUrl for that Task. Make sure to format any user input data into type UserProvidedAction . You can extend this and create a custom interface or type if needed. Format the data that needs to be sent to the Server into type TaskOutput and call taskSubmitAndFinish to update the TouchlessTaskComponent .
Add a new Route to the Routes in app.routing.module.ts. Route should contain atleast path and your component name. Eg below.
When a Task is initiated, it needs to get the , , and the for that Task. It should also register to receive information like what is the next Task path, Task Status and any Interaction Data that will be received while that Task is Actively presented on UI. This is accomplished by the constructor in TouchlessTaskComponent.
FlowListener is passed to SDK to receive updates on flow. Eg: when Flow is connected, disconnected, updated, etc. Please refer to in SDK for more info.
connectToSession is used by FlowService to connect to the Session , once it gets details of the Session via resgiterByCode. Before starting interaction, SDK is requested to create a object, to
startFlow is used by TaskComponent when invite code is entered in the RegisterComponent. Through this method, the app registers and fetches the flowDetails from TI-Server, FlowState, connects to the Session and sends a to SDK for receiving flow updates.
Please follow below guide to integrate Customer App implementation into your existing angular application. Otherwise, refer to to use our model app designed in angular.
You must adhere to the data models when creating task output or payloads otherwise, Flow orchestartion will fail. For a better user experience, also follow mandatory methods implemented in each TaskComponent. Please refer to any of the TaskComponents in for futher assistance.
Creating a custom component is only creating a custom user experience. For this new implementation to be part of a Flow, you still need to add a new Task using TI-Client app, and add it to the flow before you. For more information, refer to and demo on how to .