Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata

 

BTF Editor in SAP CRM Web UI

                                                                                

Releavent for :

SAP CRM webui Developers

 Author : Rajesh.P

 Working at Atos As as Tech Lead.

Customer's View;

When a customer would like to fill some information about the Customer Visit , with some details like , what has been spoken , he can just open the BTF Editor and write the information with almost all the feautres of the MS Word.

BTF Editor:

ü  SAP editor that provides basic formatting functions including bold, italics, underlining, text alignment, paragraph numbering, bullets, indent, and variable fill-ins. 

Advantages

ü  Default implementation

ü  No additional software costs

ü  No additional software required on customers' computers 

 Limitations:

ü  No spell checker

ü  Document formatting output may not be similar to final document output

ü  Simple formatting supported, but not as sophisticated as in Microsoft Word (for example, no complex tabbing and auto-numbering features available) 

Here you go

Key features of this example

ü  Steps of creating a BTF Editor.

ü  Saving the data and retrieving the data from SAP. 

Note: I have created a Rapid application for additional field, if you just looking for a BTF editor, you can just take the points from the actual view creation. (Steps 1 ,3,-8are relevant) 

Step1:  Create a simple transparent table for storing the data entered on the BTF Editor as below.

Step2: Create a  rapid application based on this table.

ü  Logon to CRM WebUI and Navigate to Administration->Manage Rapid Applications.

 

ü  Click on Search and click on Rapid applications->Create from DB Table.

 

 

ü  Give the mandatory fields and click on Next

 

 

ü  Click on Add and give the Table name that was created above and click on Next.

 

ü  Click on Auto Create for the creation of Search , Result and the Overview Page,you can see the component created by the Rapid Application, So cool J

 

ü  Click on Next until last and click on Save and Generate :

 

Step3: Go to the component that was create and create new view, no context nodes required.

Step5: Now in View HTML file paste the following code BTFEDITOR.Htm

<%@page language="abap" %>
<%@extension name="crm_bsp_ic" prefix="crmic" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="thtmlbx" prefix="thtmlbx" %>
<%
  data : lv_xml     type string.
  data : lt_buttons type WCFT_BTF_ADDITIONAL_BUTTONS,
  lv_xml = controller->CONFIGURATION_DESCR->GET_CONFIG_DATA( ).
%>
<chtmlb:header id="TXTEDIT" />
<thtmlb:grid columnSize = "1"
             rowSize    = "1"
             width      = "100%" >
  <thtmlb:gridCell colSpan     = "1"
                   columnIndex = "1"
                   rowIndex    = "1"
                   rowSpan     = "1" >
    <chtmlb:config xml  = "<%= lv_xml %>"
                   mode = "RUNTIME" />
    <thtmlbx:btf id                    = "<%= controller->gc_btfeditor_id %>"
                 width                 = "100%"
                 document              = "<%= controller->gr_document %>"
                 disabled              = "<%= controller->gv_edit_disabled %>"
                 toolbar               = "<%= controller->gt_btf_toolbar %>"
                 additionalButtons     = "<%= lt_buttons %>"
                 filterDocumentContent = "true" />
  </thtmlb:gridCell>
</thtmlb:grid>

 

Step6: The above cannot be activated until we have defined the below declarations at View controller Implementation class.

 

Step7: Add this newly created view to the Overview Viewset and move it from the configuration from Available to Displayed fields.

 

Step8 : Initialize the BTF editor by the following code in DO_INIT_CONTEXT method.

METHOD do_init_context.

  DATA: lr_editor      TYPE REF TO cl_thtmlbx_btf_editor.
  DATA: lv_absolute_id TYPE string.

  CONCATENATE component_id '_' gc_btfeditor_id INTO lv_absolute_id.

  lr_editor ?= cl_htmlb_manager=>get_data(
      request = request
      name    = 'thtmlbx:btf'
      id      = lv_absolute_id ).

  IF lr_editor IS BOUND.
    gr_document = lr_editor->document.
  ENDIF.

ENDMETHOD.

Step9 :  Storing the data into the database, Go to the ON_SAVE event where you would like to save , you can add your own SAVE event on the EDITOR itself ,If you want the Global Save you might have to create a component controller and bind it.

ü  Since it is better to have it updated on the global Save I have create a context node in a component controller with one attribute of type XSTRING,and populate this attribute in the DO Validate Input Method of the view created for BTF editor

METHOD do_validate_input.

  DATA: lr_editor      TYPE REF TO cl_thtmlbx_btf_editor,
        lr_coco        TYPE REF TO zacl_class000038_impl,
        lo_entity      TYPE REF TO if_bol_bo_property_access.

  DATA: lv_absolute_id TYPE string,
        lv_text        TYPE xstring.

  CONCATENATE component_id '_' gc_btfeditor_id INTO lv_absolute_id.

  lr_editor ?= cl_htmlb_manager=>get_data(
      request = request
      name    = 'thtmlbx:btf'
      id      = lv_absolute_id ).

  IF lr_editor IS BOUND.
    gr_document = lr_editor->document.
  ENDIF.

* *** Put the data back to the Component Controller
  gr_document->get_content( IMPORTING text     = lv_text ).


  lr_coco ?= me->comp_controller.
  lo_entity = lr_coco->typed_context->btftext->collection_wrapper->get_current( ).

  lo_entity->set_property( EXPORTING iv_attr_name =  'TEXT'
                                     iv_value     = lv_text  ).

ENDMETHOD.

ü  Use this value on the SAVE, it is up to you where you handle the SAVE, it can be on the save view or on the overview screen but the code can be below.

METHOD eh_onsave.


  DATA : lr_coco TYPE REF TO zacl_class000038_impl.

  DATA : lo_entity       TYPE REF TO if_bol_bo_property_access,
         lv_id           TYPE tdid,
         ls_store        TYPE zbtf_texts.


  lr_coco ?= me->comp_controller.
  lo_entity = lr_coco->typed_context->zbtf_texts->collection_wrapper->get_current( ).

* *** Similary Read also the other values
  IF lo_entity IS BOUND.
    lo_entity->get_property_as_value( EXPORTING iv_attr_name =  'ID'
                                      IMPORTING ev_result    = ls_store-id ).
  ENDIF.

  CLEAR lo_entity.
  lo_entity = lr_coco->typed_context->btftext->collection_wrapper->get_current( ).

  IF lo_entity IS BOUND.
    lo_entity->get_property_as_value( EXPORTING iv_attr_name =  'TEXT'
                                      IMPORTING ev_result    = ls_store-description ).
  ENDIF.

  ls_store-spras = sy-langu.
  MODIFY zbtf_texts FROM ls_store.

  CALL METHOD super->eh_onsave
    EXPORTING
      htmlb_event    = htmlb_event
      htmlb_event_ex = htmlb_event_ex.

 

ü  Just the Last point ,You need to enhance the code do DO_INIT_CONTEXT for fetching which I did not add in the earlier point, as it may lead to confusion at that point so final DO_INIT_CONTEXT would be like this as below.

METHOD do_init_context.

  DATA: lr_editor      TYPE REF TO cl_thtmlbx_btf_editor,
        lr_converter   TYPE REF TO if_crm_text_format_conversion,
        lr_coco        TYPE REF TO zacl_class000038_impl,
        lo_entity      TYPE REF TO if_bol_bo_property_access.

  DATA: lv_absolute_id     TYPE string,
        lv_string          TYPE string,
        lv_text            TYPE xstring,
        lv_id              TYPE tdid,
        ls_store           TYPE zbtf_texts,
        lv_html            TYPE string,
        lt_return          TYPE bapiret2_t,
        lv_itf             TYPE string,
        lv_text_as_xstring TYPE xstring.

  lr_coco ?= me->comp_controller.
  lo_entity = lr_coco->typed_context->zbtf_texts->collection_wrapper->get_current( ).

* *** Similary Read also the other values
  IF lo_entity IS BOUND.
    lo_entity->get_property_as_value( EXPORTING iv_attr_name =  'ID'
                                      IMPORTING ev_result    = ls_store-id ).
  ENDIF.

  SELECT SINGLE description
                FROM zbtf_texts
                INTO lv_text
                WHERE id EQ ls_store-id.

  IF sy-subrc IS INITIAL.
    lo_entity = lr_coco->typed_context->btftext->collection_wrapper->get_current( ).

    lo_entity->set_property( EXPORTING iv_attr_name =  'TEXT'
                                       iv_value     = lv_text  ).
  ENDIF.

  CONCATENATE component_id '_' gc_btfeditor_id INTO lv_absolute_id.

  lr_editor ?= cl_htmlb_manager=>get_data(
      request = request
      name    = 'thtmlbx:btf'
      id      = lv_absolute_id ).

  IF lr_editor IS BOUND.
    gr_document = lr_editor->document.
  ENDIF.

  CHECK lv_text IS NOT INITIAL.

  CREATE OBJECT lr_converter TYPE cl_crm_text_format_conversion.
  lv_string = cl_gstext_tools=>convert_xstring_to_string( iv_xstring  = lv_text ).


  REFRESH lt_return.

  CALL METHOD lr_converter->convert_html_to_itf
    EXPORTING
      iv_html_text = lv_string
    IMPORTING
      ev_itf_text  = lv_itf
      et_return    = lt_return.

  CALL METHOD lr_converter->convert_itf_to_html
    EXPORTING
      iv_itf_text                  = lv_itf
      iv_add_html_surrounding_tags = 'X'
    IMPORTING
      ev_html_text                 = lv_html
      et_return                    = lt_return.


  lv_text_as_xstring = cl_gstext_tools=>convert_string_to_xstring( iv_string  =  lv_html ).
*  Check if the data back is put back.
  gr_document->set_content( text     = lv_text_as_xstring
                           encoding = 'utf-8' ).
ENDMETHOD.

Final Output (Excited ?)

You can execute the component ,You can click on New in the result view

 

This opens you a editor with the primary key to store the Text added in the BTF editor.

 

Give the Primary key and the Text you want to save and click on SAVE.

Now you can search with ID 500 that you have used earlier and search it

 

You can click on 500 to see if the text has been saved(Here you go).

 

  • No labels

2 Comments

  1. Impressive job. Works excellent!

  2. Former Member

    Hello,

    It works!

    But, uploading an image is not working for me. it stucks the screen, do you know why?

    Am I missing any javascript code?

    Also, paisting print screen, doesn't work. it pastes the image, but when you go out of the view and back to the view, you are not able to find the image.

    I copied exactlly the HTML code, and everyting.