Using the JavaScript API
The REST services have already been mapped with the pre-built UI pages provided with the plug-in. However, if you wish to build your own UI or modify the provided UI, you can easily do this by registering your own event listeners with the provided javascript object SP_mobileAPI. If you open the SP_chat page, you can see the event mappings with the pre-built UI by the following javascript run on load:
SP_mobileAPI.addEventListener('chat_session_message', SP_demoUI.onChatMessage );
SP_mobileAPI.addEventListener('chat_session_party_joined', SP_demoUI.onPartyJoined );
SP_mobileAPI.addEventListener('chat_session_party_left', SP_demoUI.onPartyLeft );
SP_mobileAPI.addEventListener('chat_session_typing', SP_demoUI.onAgentTyping);
SP_mobileAPI.addEventListener('chat_session_not_typing', SP_demoUI.onAgentNotTyping);
SP_mobileAPI.addEventListener('chat_session_file', SP_demoUI.onImageUploaded);
The following sections show you how to set up these mappings and use the javascript API to connect with the ServicePattern Mobile API.
Connecting to an Agent
Once the connection is established, javascript object SP_mobileAPI.session will be created. To test if there is an active connection, use the following logic:
if( SP_mobileAPI.isConnected() ) {
// connected to an agent
} else {
// not connected
}
Sending a New Chat Message
If the connection is active, you can send a new chat message by calling
SP_mobileAPI.sendChatMsg(chatMsg);
Receiving Chat Messages
First, register an event listener like this one:
SP_mobileAPI.addEventListener('chat_session_message', onChatMessage );
After that, onChatMessage will be invoked whenever a new chat message is received.
Typing Events
When the agent is typing, event chat_session_typing occurs. When the agent stops typing, the event chat_session_not_typing occurs.
To notify the server when the client is typing, call SP_mobileAPI.onTyping(true).
To notify the server when the client is not typing, call SP_mobileAPI.onTyping(false) .
Uploading an Image
If the connection is active, you can call the following function within your app to upload an image:
SP_mobileAPI.uploadImage(imageURI);
Ending the Conversation
You can end the conversation by calling SP_mobileAPI.endChat().
Showing Forms
To receive the event for showing the form involved with your scenario, register the event listener for chat_session_form_show:
SP_mobileAPI.addEventListener(‘chat_session_form_show’, onFormShow );
The function onFormShow would be called with the parameters (form_name, form_id) defined by your scenario entry. The demo UI provides a survey form with a form name called MobileChatSurvey.