Skip to Content
UI WebClient UI Framework

BTF Editor

BTF (Business Text Framework)


How to Guide for

Title

BTF EDITOR

NAME

DESIGNATION

Author Name

Nawal Kishore

Consultant Designation

SAP Netweaver consultant

 

 
 

Purpose

This document will help you to

  • Create btf editor which will works like word document which contains all the formatting tools like bold, underline, color, save and etc.

Audience

           Sap crm web ui Consultants, and project team members who are working on crm web ui concept.

Prerequisites

      Required knowledge 

  • Basic knowledge of SAP technology
  • Good knowledge of crm web ui Concept.
  • Basic knowledge of architecture of web ui i.e. views, component, navigation link, component interface and etc.

Introduction

BTF (Business Text Framework)

The editor of BTF is actually works like word document which contains all the formatting tools like bold, underline, color, save and etc.

BTF editor is like WYSIWYG html editor.


Advantage

  • Can store any text, images of any size.
  • Works like word documents

Scenario

Want to store some text information in formatted way in crm than that time we have to store text in BTF editor.

Implementation

Q) How to create BTF editor?

Sol: - Create a view in component and write this code in .htm of that view.

<%@page language="ABAP" %>
<%@extension name="btf" prefix="btf" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="thtmlbx" prefix="thtmlbx" %>
<%
data:   lv_btf_id        type string,
lt_buttons              
type WCFT_BTF_ADDITIONAL_BUTTONS,
ls_button               
type crmt_thtmlb_button,
lv_on_client_click      
TYPE string,
lv_mode                 
type STRING,

  ls_additional_button     type WCFs_BTF_ADDITIONAL_BUTTONS.
lv_btf_id 
= controller->get_id( 'btf_editor' ).
****getting the emode for the editor

**** means editor will open in display or edit mode

**** get display method we have to create in impl class for implementation of this method refers to next question.
lv_mode
= controller->get_display ( ).
%>
<style
type = "text/css">
.th-ta-tv{
height: 100%;}
</style>
<div
class = "th-ta-tv">
<thtmlbx:btf
id                  = "btf_editor"
width               = "100%"
height              = "320"
document            =
"<%= gs_btf_documentdata-btf_doc %>"
onClientInsertImage =
"InsertImage_BTFEditor(id);"
onClientInsertLink  =
"InsertLink_BTFEditor(id);"
sourceView          =
"<%= gv_btf_sourceview %>"
additionalButtons   =
"<%= lt_buttons %>"
navigationType      =
"NEWWINDOW"
disabled            = "<%= lv_mode %>"
secureInsertImage   =
"X" />
</div>
<%-- full component name (e.g. 'V1_') is not known by client --%>
<input type=
"hidden" id="editor_id" name="btf_editor_id" value="<%= lv_btf_id %>">
<%
IF lv_mode = 'FALSE'.
%>

<%-- creating save button --%>
<thtmlb: button
text    = "Save"
onClick = "cancel" />
<%
ENDIF.
%>

Q) How to make btf editor buttons enable and disable?

Sol:-Disabled is the property through which you can make buttons as enable and disable.

We have to change the value of lv_mode as true and false according to condition.

Lv_mode is the variable which we have taken above for enabling and disabling the editor.

DATA:    lv_display_mode    TYPE abap_bool,
lv_changeable     
TYPE        boolean,
lv_status         
TYPE zcdp_txt_lib_status,
lr_entity         
TYPE REF TO cl_crm_bol_entity.


**** we are getting the current entity and based on this entity we identify editable or not
lr_entity? = me
->typed_context->libtext->collection_wrapper->get_current ( ).
CHECK lr_entity IS BOUND.
lv_changeable
= lr_entity->is_locked( ).

    IF lv_changeable = 'X'.
rv_enabled
= 'FALSE'.

    ELSE.
  rv_enabled
= 'TRUE'.
ENDIF.

In above code lr_entity->is_locked ( ) will provide the value whether btf is to be locked or not.

So on that basis we can change the value of lv_mode.

Q) How to add btf editor to edit button so that when we click on edit button btf editor should open?

                   

Sol:-Create one view and create one edit button in that view.

         After that add btf view to component uage in your view and create one event in event handler and give name as EDIT.

In this event we will assign name of Main window of btf editor and also assign name of compenent usage and will write one pop up code for poping the btf editor when user click on edit button.

METHOD eh_onedit.
CONSTANTS:
lc_if_view_name 
TYPE string VALUE 'ZCDP_TXT_TEXT/MainWindow',
lc_usage        
TYPE string VALUE 'CUTEXT'.

DATA:
lr_context      
TYPE REF TO cl_bsp_wd_context_node,
lr_current      
TYPE REF TO if_bol_bo_property_access,
lr_qs           
TYPE REF TO cl_crm_bol_dquery_service,
lr_col          
TYPE REF TO if_bol_bo_col,
lv_title        
TYPE string,
lv_role         
TYPE string,
lv_usage_name   
TYPE string,
lv_partner_no   
TYPE string.


* Create POPUP if necessary
IF gv_popup IS NOT BOUND.
lv_usage_name  
= lc_usage.
gv_popup
= comp_controller->window_manager->create_popup(
iv_interface_view_name
= lc_if_view_name
iv_usage_name         
= lv_usage_name
iv_title              
= lv_title ).
ENDIF.


gv_popup
->set_title ( lv_title).
gv_popup
->open ( ).

ENDMETHOD.

Now we will give this event name to onClick property of edit button tag.

For eg.

<thtmlb: button id      = "EDIT"
onClick = "EDIT"
type    = "<%= cl_thtmlb_util=>GC_ICON_EDIT %>"
enabled =
"<%= lv_one %>" />

Q) How to save the contents of btf editor when we click on save button?

Sol: - gs_btf_documentdata-btf_doc->get_content( IMPORTING text = lv_text
encoding = lv_encode
language = lv_lang ).

Text will give the contents of btf editor whatever you entered in it.

For saving the contents to our database firstly we have to save the contents to attributes. For saving to attributes write this code.

lr_entity->set_property (
EXPORTING
iv_attr_name
'WYSIWYG_TEXT'   " Component Name
iv_value    
= lv_text  ).

In do_init_context method of IMPL class write this code.

METHOD do_init_context.
DATA:    lv_id                TYPE string,
lr_btf_editor       
TYPE REF TO cl_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 ).
IF lr_btf_editor IS NOT INITIAL.
gs_btf_documentdata
-btf_doc = lr_btf_editor->document.
gv_btf_sourceview
= lr_btf_editor->sourceview.
ENDIF.
ENDMETHOD.

When we click on save button data will be saved but the contents will be gone, so if we want to remain data their only means after pressing save button then

In do_prepare_output method we have to call set_content method which will set the content to btf editor. Code is as follows:

METHOD do_prepare_output.
****Local variables declaration
DATA: lv_display_mode    TYPE        abap_bool,
lv_desc_text    
TYPE xstring,
lv_value        
TYPE crmt_object_id_db,
lv_string       
TYPE string.

****Reference variables
DATA: lr_entity        TYPE REF TO cl_crm_bol_entity,
lr_cuco      
TYPE REF TO zl_zcdp_txt_libcommentscu_impl,
lr_coco         
TYPE REF TO zl_zcdp_txt_bspwdcompone5_impl.

****Getting the value of library id from value attributes
lr_coco ?= me
->comp_controller.
CHECK lr_coco IS BOUND.
lr_entity ?= lr_coco
->typed_context->libtext->collection_wrapper->get_current( ).
*  lr_entity ?= me->typed_context->libtext->collection_wrapper->get_current( ).
CHECK lr_entity IS BOUND.

****getting value from attributes
lr_entity
->get_property_as_value(
EXPORTING
iv_attr_name
'WYSIWYG_TEXT'   " Component Name
IMPORTING
ev_result   
= lv_desc_text).

*****Reading contents of btf editor
gs_btf_documentdata
-btf_doc->set_content( EXPORTING text     = lv_desc_text
encoding = 'utf-8’).

ENDMETHOD.


Here we are calling get_property_as_value method to get the contents of editor which is stored in the attribute and after storing that contents to some variable we are setting those values back to editor by calling set_content method.

                   

                                   

Former Member