SAP CRM呼叫中心里回复社交媒体信息的实现源代码

我们知道,在SAP CRM呼叫中心的社交媒体集成方案里,如果在系统里配置了某个twitter账号,那么twitter网站上@了该账号的那些tweet,都会自动被抓到SAP CRM呼叫中心中去供座席处理。

上图的@了AndrewPang6这个账号的测试tweet,抓取到SAP CRM呼叫中心后的界面如下。呼叫中心的座席,在CRM系统里点击Reply按钮即可回复。

客户打开tweeter网站,即可看到该回复。

下面是这个功能的实现代码:

<%@page language="abap" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="bsp" prefix="bsp" %>
<%
  data: lv_send_btn type string.
  data: lv_title_prefix type string,
  lv_replyid type string.
  lv_send_btn = cl_wd_utilities=>get_otr_text_by_alias( 'CRM_UIU_SOC_SMC/SEND_BUTTON' ). "#EC NOTEXT.
  lv_replyid = '_socialpost_struct.content'.
  lv_title_prefix = cl_wd_utilities=>get_otr_text_by_alias( 'CRM_UIU_SOC_SMC/COUNTER_TXT' ). "#EC NOTEXT.
  lv_title_prefix = lv_title_prefix && ':'.
  lv_replyid = controller->component_id && lv_replyid.
%>
<chtmlb:config displayMode = "<%= controller->view_group_context->is_view_in_display_mode( controller ) %>"
               mode        = "RUNTIME"
               xml         = "<%= controller->configuration_descr->get_config_data( ) %>" />
<p id="COUNTER_TXT"  style="margin-left: 8px; margin-top: 1px; margin-bottom: 4px; margin-right: 8px; color:rgb(102,102,102)"></p>
<p>
   
<thtmlb:button design  = "EMPHASIZED"
               id      = "SEND_BTN"
               onClick = "send"
               text    = "<%= lv_send_btn %>" />
  </P>
<script type="text/javascript">
  var content;
  var counter;
  var cur_pos;
  function forwardStdResponseText(reqObj) {
   insertText(reqObj);
  }
  function forwardStdResponseTextDelayed(reqObj) {
   insertText(reqObj, true);
}
function insertText(reqObj, delayed) {
var textcontent = reqObj.request.responseText;
 if (!delayed){
  insertTextIntoTextEditor( textcontent);
}else{
<%--restoreBTFCursorPosition();
insertTextIntoTextEditor( textcontent);--%>
document.getElementById( "<%= lv_replyid %>" ).value = document.getElementById( "<%= lv_replyid %>" ).value + reqObj.request.responseText;
  }
  refreshCounter();
}

function TrimLeadingSpace(texttotrim)
{
  var currchar;
 var spaceindex = 0;
 currchar = texttotrim.substr(0, 1);
 while(currchar==" ")
 {
   spaceindex = spaceindex + 1;
   currchar = texttotrim.substr(spaceindex, 1);

 }
 var substrlen = texttotrim.length - spaceindex;

 var trimmedtext = texttotrim.substr(spaceindex, substrlen);
 alert(trimmedtext);
 return trimmedtext;
}

 function storeBTFCursorPosition(){
     var cursorPos = 0;
     var textarea1 = document.getElementById("<%= lv_replyid %>");
     var range;
     var textvalue;
     textvalue = textarea1.value;
     textarea1.focus();
     range = document.selection.createRange();
     range.moveStart('character', -textarea1.value.length);
     var trimmedtxt = TrimLeadingSpace(range.text);
     var spacefromuser = textvalue.search(trimmedtxt);     
     cursorPos = spacefromuser + trimmedtxt.length;
     alert(spacefromuser);
     alert(trimmedtxt.length);
     return cursorPos;
   }

function restoreBTFCursorPosition(){
   var texta1 = document.getElementById("<%= lv_replyid %>");
   var range;
   var curpos = cur_pos;
   texta1.focus();
   range = document.selection.createRange();
   range.moveStart( 'character', texta1.value.length );
   range.moveEnd( 'character', texta1.value.length );
   range.moveStart( 'character', curpos );
   range.moveEnd( 'character', 0 );
   range.select();
  }
function insertTextIntoTextEditor( textToInsert ){
     var text_area = document.getElementById( "<%= lv_replyid %>" );
     text_area.focus();
     if(document.selection)
     {
     document.selection.createRange().text = textToInsert;
     }     
}
<%-- below functions are for, reply text counter implementation --%>
  function refreshCounter()
  {
    var sCount = "<%= lv_title_prefix %>" + content.value.length;
    counter.innerHTML = sCount;
  }
  function fillTitle()
  {
    var textvalue;
    textvalue = document.getElementById("<%= lv_replyid %>").value;
    counter.innerHTML = "<%= lv_title_prefix %>" + textvalue.length;
  }
  if( "<%= controller->mv_switch_on %>" == "X" )
  {
      content = document.getElementById("<%= lv_replyid %>");
      counter = document.getElementById("COUNTER_TXT");
      if( content != null )
      {
        content.onkeyup = refreshCounter;
        content.onmouseout = refreshCounter;
        content.onmousemove = refreshCounter;
      }
      fillTitle();
  }
</script>
<%
  DATA: ls_header type CRMT_THTMLB_AREA_FRAME_HEAD.
  ls_header-title = 'Conversation History'.
%>
<thtmlb:splitter splitterPosition = "65%"
                 height           = "100%" >
  <thtmlb:grid cellSpacing = "0"
               columnSize  = "2"
               height      = "100%"
               rowSize     = "1"
               width       = "100%" >
    <thtmlb:gridCell colSpan     = "1"
                     columnIndex = "1"
                     rowIndex    = "1"
                     height      = "100%"
                     rowSpan     = "1" >
      <thtmlb:splitterCell minSize = "20%"
                           vAlign  = "top"
                           align   = "left" >
        <bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'PostDetails' ) %>"
                  url     = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'PostDetails' ) %>" />
        <bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'OverviewPage' ) %>"
                  url     = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'OverviewPage' ) %>" />
        <div id = "div1" style="display:block; margin-top: 10px">
        <thtmlb:areaFrame id            = "areaFrame1"
                          header        = "<%= ls_header %>"
                          isCollapsible = "true"
                          checkContent  = "true"
                          lateRendering = "true" >
          <thtmlb:areaFrameBody contentBorder="false" >
            <bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'ConversationHistory' ) %>"
                      url     = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'ConversationHistory' ) %>" />
          </thtmlb:areaFrameBody>
        </thtmlb:areaFrame>
        </div>
      </thtmlb:splitterCell>
    </thtmlb:gridCell>
    <thtmlb:gridCell colSpan     = "1"
                     columnIndex = "2"
                     rowIndex    = "1"
                     height      = "100%"
                     rowSpan     = "1" >
      <thtmlb:splitterCell minSize = "20%"
                           vAlign  = "top"
                           align   = "left" >
        <bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'PostDetails' ) %>"
                  url     = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'PostDetails' ) %>" />
      </thtmlb:splitterCell>
    </thtmlb:gridCell>
  </thtmlb:grid>
</thtmlb:splitter>

<%@page language="abap" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="bsp" prefix="bsp" %>
<%
  DATA: ls_header type CRMT_THTMLB_AREA_FRAME_HEAD.
  IF controller->MV_CONV_HISTORY_SWITCH_ON = abap_true.
  ls_header-title = cl_wd_utilities=>get_otr_text_by_alias( 'CRM_UIU_SOC_SMC/REPLY_CONV_HISTORY' ).
  ENDIF.
%>
<thtmlb:grid cellSpacing = "0"
             columnSize  = "1"
             height      = "100%"
             rowSize     = "3"
             width       = "100%" >
  <thtmlb:gridCell colSpan     = "1"
                   columnIndex = "1"
                   rowIndex    = "1"
                   height      = "100%"
                   rowSpan     = "1" >
    <bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'PostDetails' ) %>"
              url     = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'PostDetails' ) %>" />
  </thtmlb:gridCell>
  <thtmlb:gridCell colSpan     = "1"
                   columnIndex = "1"
                   rowIndex    = "2"
                   height      = "100%"
                   rowSpan     = "1" >
    <bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'OverviewPage' ) %>"
              url     = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'OverviewPage' ) %>" />
  </thtmlb:gridCell>
  <%
  IF controller->MV_CONV_HISTORY_SWITCH_ON eq abap_true.
  %>
  <thtmlb:gridCell colSpan     = "1"
                   columnIndex = "1"
                   rowIndex    = "3"
                   height      = "100%"
                   rowSpan     = "1" >
    <div style="display:block; margin-top: 5px">
    <thtmlb:areaFrame id            = "areaFrame1"
                      header        = "<%= ls_header %>"
                      isCollapsible = "true"
                      checkContent  = "true"
                      lateRendering = "true" >
      <thtmlb:areaFrameBody contentBorder="false" >
        <bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'ConversationHistory' ) %>"
                  url     = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'ConversationHistory' ) %>" />
      </thtmlb:areaFrameBody>
    </thtmlb:areaFrame>
  </thtmlb:gridCell>
  <%
  ENDIF.
  %>
</thtmlb:grid>

在使用reply页面, standard response的search 按钮搜索并apply mail form 内容至editor中已有文本的中间位置时,需要通过storeBTFCursorPosition 保存点击search 按钮时光标的位置。该位置即为mail form内容的插入出。

在初始设计中使用range.moveStart来计算光标位置。设想方式为,当move的数值超出文本长度时,该方法只返回实际移动位置,即光标距离文本开始位置的距离。 在实际测试中发现,该方法的返回值不确定。光标处于某些位置时,返回值与期望一致。但是在某些位置,返回值与期望有差别。通过alert range.text的内容发现, 出现不一致的情形时,原因是因为range.text中包含大量的空格符,这些空格符也被计算成range.text的文本长度。从而导致数值不准确。

解决办法

  1. 仍然使用movestart获取range的text内容(包含空格)
  2. 去除range的text当中包含的leading 空格。注意在去除leading 空格时,会出现一种情况,就是用户本身在文本开始输入了空格,这些空格会一并去除。
  3. 用string的search方法找到step 2.中去除空格后的文本在原始文本当中的位置。实际上就是计算用户在文本开始部分自己输入的空格数量。
  4. 加上range的text长度(去除leading 空格),即为光标的位置

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券