*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. 
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. 
In case you are interested, this is what the definition of my data element looks like. 
*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. 
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. In case you are interested, this is what the definition of my data element looks like. *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.
15 Comments