Skip to Content
*Introduction*  With release 6.X of the WebAS, SAP introduced a new text editor that was quite   an improvement over the old SAPScript or Plain text editors. This new   technology is called BTF (Business Text Framework). The editor for the BTF is   actually a nice, yet easy to use, WYSIWYG HTML editor. SAP has two versions of   this new editor. One is for the use in traditional Dynpro screens via the   Control Framework Technology(Class CL_BTF_EDITOR). However SAP has also   exposed this same editor technology to BSP pages via the BSP Extension   BTF , BSP element editor .    SAP delivers an example BSP application named BTF_EXT_DEMO. This example,   although limited in scope, does provide the basics of loading a document into   and retrieving a document from the editor. Because the Editor generates HTML   Code, the example application also demonstrates how easily the resulting text   can be displayed in-line in a BSP application.    *Example*  The example application is an excellent starting point for working with the BTF   editor. However today I would like to share a real world example of the BTF   editor, along with the coding it takes to work with the editor. If you have   read any of my previous weblogs, chances are good that you may have seen the   BTF editor in use in some of my screen shots. Currently I have 5 production   BSP applications that use this technology. The particular use of the BTF   editor that I want to focus on today is from an application that I described in   the following weblog: [BSP in Action: Kimball International | https://www.sdn.sap.com/irj/sdn/weblogs?  blog=/pub/wlg/846]    Before we get into any code, let’s first have a look at the BTF editor in   action and discuss some of its advantages and hidden features.  image   Let’s just go down the user interface Icons to get an idea of the basic   functionality of the BTF editor. The first button (which can be hidden by a   element attribute) allows the user to switch back and forth between the WYSIWYG   editor and a HTML code editor. This is a nice feature to expose in case you   have users who aren’t scared off by html tags. Next up we have a print icon.   This allows us to print the contents of the BTF editor using the user’s   frontend. This means that the list of printers they will have to choose from   will be the ones installed on their client machine. In the past I have even   used the BTF editor in display only mode, just so I can expose this print   functionality. Next up we have the expected CUT, COPY, and PASTE functions.   Because this is an HTML editor, the ability to paste in elements from other   richly formatted locations is quite powerful. You can even copy and then past   in links to images from other web based sources. Next up we have a Find and   Replace feature. For the last Icons on the first bar we have an Upload and   Download function. This again is a nice feature that you wouldn’t necessarily   expect in a web based html editor.    The second row gives us the tools we will need to control the text formatting   and alignment. We have basic text formatting, such as Font, size, Bold,   Italics, Underline, Text Color, and Back Color. Next up we have a set of   buttons that allow us to set the text Justification (Left, Centered, Right, and   Full). Finally we have four buttons for setting up lists. The first two turn   on either numbered or bulleted lists. The last two buttons move the text   indentation Left or Right.    Now if we look at the content I currently have in my example, it tells a story   of the BTF Editors capabilities as well. We can see the effects that altering   the text size, color, font and other formatting options has on the output. You   can see on the left that I have included a link to a web image. This was done   by pasting in the image from the original source. Finally we come to what is   for me, one of the most important aspects of the BTF editor. The BTF editor   supports the editing of Unicode documents, even if you backend SAP system is   not Unicode. As you can see from my example, I have a mixture of languages   from a variety of code pages. My system is MDMP not Unicode. Yet I have no   problem processing and storing this data. In addition I have included texts   here that aren’t even covered by the installed languages in my MDMP   configuration. How is all this possible? The BTF editor expects to receive   and return its document data via a binary string. This allows your backend SAP   system to store the Unicode document without any character corruption. Of   course Unicode isn’t your only option. You can also set the document content   to any single code page. We will look at the coding for the use of Unicode in   detail in this example.     *Technical Details*  Now that we have an understanding of what the BTF editor is capable of, we can   begin to look at the technical details going on behind the scenes.    *Database Storage*  We will start by looking at how my example application stores the content that   is generated within the BTF Editor. I mentioned early that the BTF editor   expects its data to be received and returned as a binary string. Then the   simplest way to store the data is by writing the data into the database as a   binary string. Luckily this is now a possibility as of WebAS 6.X. We can have   strings and binary strings of undetermined length stored as a database field.   The following is a look at what my table layout looks like.  image   In case you are interested, this is what the definition of my data element   looks like.  image   *Reading and Updating the database   records*  There isn’t necessarily anything special about reading or writing a binary   string from a database table. However because of the nature and possible size   of the binary string, I decided to compress the data before it is stored back   into the database. I do the compressing using the new GZip libraries in ABAP   (CL_ABAP_GZIP). The following code samples show that every time I read data or   write data I surround the operation with my compress/decompress logic (for the   purpose of this example, please note that I am just ignoring any errors that   occur during compression operations).    Read Data    ****Read the Issue Description      data: l_desc_text like desc_text.      select single desc1 from zesa_iss_desc               into l_desc_text              where id = me->id.      try.          call method cl_abap_gzip=>decompress_binary            exporting              gzip_in = l_desc_text            importing              raw_out = desc_text.        catch cx_parameter_invalid_range .        catch cx_sy_buffer_overflow .        catch cx_sy_compression_error .      endtry.     Write Data     **** Update/Insert Issue Description       data: desc_wa type zesa_iss_desc.       try.           call method cl_abap_gzip=>compress_binary             exporting               raw_in   = desc_text             importing               gzip_out = desc_wa-desc1.         catch cx_parameter_invalid_range .         catch cx_sy_buffer_overflow .         catch cx_sy_compression_error .       endtry.       move me->id    to desc_wa-id.       modify zesa_iss_desc from desc_wa.     *BSP Extension Usage*  As you can see from the screen shot below. The BTF Editor tag doesn’t have   very many attributes. The ones it does have are fairly self explanatory. The   content of the document itself is the most important attribute. We will pass   this a class implementing interface IF_BTF_DOCUMENT. A little bit later I have   the code that will create this document class and fill it with the actual   content from the binary string.   image
To report this post you need to login first.

15 Comments

You must be Logged on to comment or reply to a post.

  1. Craig Cmehil
    Well my next weblog was use of a OpenSource TextEditor that runs beuatifully inside of webpages but since you’ve just put this nice piece of work out it doens’t make much sense.  Your’s is a better solution as it’s built in functionality!

    Good job!!!

    Craig

    (0) 
  2. Eddy De Clercq
    I don’t know how this is with 6.4 but under 6.2 it only works under MIE and no Mozilla/Firefox. That’s why went for a external (free) cross browser editor. First we want for a flash version, but that isn’t cross platform. Macromedia didn’t care to bring updated versions of flash player frequently.
    (0) 
    1. Thomas Jung
      I wanted to try this out for you in 640.  So I downloaded Firefox.  My company is strictly an IE shop, so I never really test SAP solutions on anything else.  First thing I found was that I couldn’t pull up any example applications in Firefox.  It looks like the content tag was looking for Mozilla version greater than 9999.  I took that to mean that SAP wasn’t ready to support Mozilla yet.  I changed some code to get around this check and then the BTF editor treats Mozilla like Netscape.  This means that you get a plain text editor that displays the raw HTML code. Not really ideal.  Its too bad that there isn’t better  browser support for the BTF editor, because it is really quite nice.
      (0) 
  3. Peter Inotai
    Hi Thomas,

    It’s a great weblog!

    It seems there is a typing in the last code:
    ‘ata: xdocument           type xstring’
    probable should be
    ‘data: xdocument           type xstring,’

    Peter

    (0) 
  4. Timo Rüb
    Hello Thomas,

    nice weblog 🙂 I am impressed by the features of the btf editor! And I like your weblog. It helped a lot!

    But I have an unanswered question. Can I tell the BTF Editor to show me more Fonts! I want to give the user the chance to use the Stone Sans Fonttype.

    Thanks for any help!

    Timo

    (0) 
    1. Thomas Jung Post author
      I am afraid that when used within BSP I don’t know of a way to influence which fonts are displayed.  I believe that it uses the “standard brwoser fonts”.

      When used in control mode within the SAPGui you can call method to tell the BTF to use any font installed on the client machine.  However I assume this is because of the closer integration to the clients machine thanks to the SAPGui vs. the Browser.

      (0) 
  5. Hi Thomas,
    In CRM 5.2 in component BTNOTE within the CRM UI-framework we try to exchange the existing plain editor with the nice and rich BTF-editor.
    Do you have experience with this?
    Till now we encounter an error from CL_HTMLB_FILEUPLOAD: CX_BSP_ELEMENT_EXCEPTION – : Files can be sent to the server with the form BSP attributes “method=post” and “encodingType=multipart/form-data” only. 
    Hans
    (0) 
    1. Thomas Jung Post author
      I don’t have a whole lot of CRMUI experience itself and what I do have is based upon CRM 7.0. My BSP experience comes from standalone BSP applications.

      The BTF editor is basically a composite tag that includes inner calls to several other HTMLB based elements.  It looks from the error that the problem is actually with HTMLB:fileUpload.  It expects a certain form format.  I’m guessing maybe CRMUI doesn’t use the htmlb:form, and that its form isn’t compatible. Or you might not have a form tag in your page.

      (0) 
  6. Hi Thomas

    In CRM 5.2 we have implemented the BTF-editor instead of the plain editor in some places of component B126H_CALL (activities).
    We have created a copy of component BTNOTE, extended it, provided it with 2 new views (overview and edit) in which we call BSP element htmlbx:btf. We still use context node BTTEXT
    We also extended component B126H_CALL: we replaced in some viewsets the view BTNOTE in view area Note with our own BTF-view
    It all works fine together with display, save and navigation and so on, but not with the data.

    We are reading back the edited data out of the BTF-document in method DO_HANDLE_DATA from the edit-view with following code:

    CALL METHOD super->do_handle_data
        EXPORTING
          form_fields     = form_fields
          global_messages = global_messages.

    DATA: lv_id          TYPE string.
    DATA: lr_btf_editor  TYPE REF TO l_btf_bsp_editor.

    lv_id = me->get_id( ‘btf_editor’ ).
    lr_btf_editor ?= cl_btf_bsp_manager=>get_data( request = request
    name    = ‘editor’
    id      =  lv_id ).

    In the lr_btf_editor-object we only see a part of the original text, surrounded by rubbish.
    The method RESTORE_FROM_REQUEST from IF_HTMLB_DATA returns this.
    The border between rubbish and correct text is f.i. a change of color or font.

    If we – while editing the document in the HTML-code editor – remove the leading html tags and the trailing tags everything seems ok.

    Do you have a clou what is happening here and how we can avoid this behavior?

    Thanks for any help.
    Hans

    (0) 
    1. Thomas Jung Post author
      I don’t believe I can help you. I don’t have any experience with CRM or the BTF editor in CRM.  My blog was about standalone BSP. In standalone BSP we have an extension library called BTF and an element called editor.  You seem to be using a completely different Extension/Element. I couldn’t say what the differences might be. I would suggest posting your question in the CRM or BSP forum instead.
      (0) 
      1. Hi Thomas,

        Thanks for your suggestion: I posted my question on the BSP-forum as well.

        I tried both the BSP extension elements thtmlbx:btf and btf:editor. They are almost the same in lay-out and their methods. However, also with the same nasty result as described above.

        (0) 
    1. Thomas Jung Post author

      I wrote this blog back in 2004. I’ve not worked with the BTF Editor in many years.  I’m afraid I don’t remember much about it since its been so many years since I’ve used it. I looked at the BTF extension in my system and I only see options to dispable the entire design view and to disable the export; but not other options.

      (0) 

Leave a Reply