webdinpro

ABAP-WebDynpro Note Book

WebDynpro Architecture:

Context in WD is called as temporary Storage Location.

Context contains nodes attributes.

Node contains collection of records temporarily.

Attribute contains a single value at a time.

Node is also considered as internal table.

From one context data can be transferred to another context using context mapping.

From one context data can be transferred to a view using context binding.

From one screen we can jump to another screen by creating outbound plug, inbound plug and navigation link.

Assistance class can be used in WD for maintaining text messages.

For auto generation of code we use code wizard operation.

‘Component usages’ contains the reusable components.

WD follows MVC architecture.

Model represents DB operations (Business Layer).

View represents screens (Presentation Layer).

Controller is responsible for Data transfer from Model to View and Vice Versa.

MIMEs folder (Multi Purpose Internet mail Extensions) contains all types of files (Images, PDF, doc, text etc).

View is a screen which is visible to End User, so it is called as Visible Entity. All the remaining objects are invisible to user, so called as Faceless Entities.

In a View we can use following screen elements:

Button

Image

Input Field

DropdownByIndex

RadioButtonGroupByIndex

CheckBoxGroup

DropdownByKey

RadioButtonGroupByKey

Table

BusinessGraphics

TextEdit

LinktoAction

LinktoURL

RoadMap

ViewCotainer

MessageArea

Group

Tray

Tabstrip

DataNavigator

Label

Caption

MenuBar

Tree

IFrame(Obsolete)

The relationship between View context and its View is considered as context binding or data binding.

Every attribute contains two methods:

Get_attribute and Set_attribute.

Component controller is a global controller which can be used to share the data across multiple local controllers.

Interfaces, Classes and Methods in WebDynpro:

1. IF_WD_CONTEXT_NODE
2. IF_WD_CONTEXT_ELEMENT
3. IF_WD_WINDOW_MANAGER
4. IF_WD_MESSAGE_MANAGER
5. IF_WD_COMPONENT_USAGE
6. IF_WD_PORTAL_INTEGRATION

Every Interface contains predefined methods given by SAP.

1. IF_WD_CONTEXT_NODE.

1.      create_element

2.      bind_element

3.      bind_elements

4.      get_element

5.      get_element( index )

6.      get_element_count

7.      set_selected

8.      is_selected

9.      move_next

10.  move_previous

11.  move_last

12.  move_first

13.  move_to

14.  invalidate

15.  set_lead_selection

16.  get_lead_selection

17.  bind_table

18.  bind_structure

2. IF_WD_CONTEXT_ELEMENT

1.      set_attribute

2.      get_attribute

3.      set_static_attribute

4.      get_static_attribute

3. IF_WD_WINDOW_MANGER

1.      create_window

2.      create_external_window

3.      create_popup_to_confirm

4. IF_WD_MESSAGE_MANAGER
1. report_success
2. report_warning
3. report_error_message
4. report_attribute_errror_message
5. report_exception
6. report_t100_message

5. IF_WD_COMPONENT_USAGE
1. create_component
2. delete_component
3. has_active_component
4. get_interface_controller

6. IF_WD_PORTAL_INTEGRATION
1. navigate_obsolete
2. navigate_relative
3. fire
4. subscribe
5. unsubscribe

Code Wizard Options:

Code Wizard in WebDynpro is used to generate the code automatically in WebDynpro.

It contains the following options.

1. Method Call in Current Controller.
2. Method Call in Used Controller.
3. Instantiate used Component
4. Start Navigation.
5. Read Context Node or Attribute
6. Generate Pop up Window
7. Generate Message
8. Text Symbol Access
9. Portal Integration
10. Personalization

Scenarios

1. Creating a simple table.

Go to View Context, create Address node with two attributes.

Go to Layout, select code wizard select table option.

Click on context and select Address node. Click on continue.

Go to Headers provide text property.

SAVE and Activate and test your application.

Right click on Root container, insert element select ‘Page Header’ to put a title to the page.

Right click on Root, insert element Image. Right click on component create MIME object import, select image from desktop and save it. Provide the image source property as image name. Save it and test it.

2. Navigation between two Views

To jump from one View to another view we have to create outbound plug, inbound plug and navigation link.

3. Using RFC inside WD Component

Using Service Call:

Component controller is a global controller which can be used to share the data across multiple local controller.

Service call is used to call RFC or BAPI into WebDynpro Applications.

Steps for using Service Call with RFC:

Create a database table with 4 fields.

ID, Name, Salpm, permarks.

Populate some records in database table.

Go to SE80, create a FG and activate.

Create a Function Module with Remote enabled property.

Go to table parameter, declare a table like ZEMPLOYEE5.

Go to source code write a select command.

Save and Activate.

Go to SE80, Create a WebDynpro component with Window, View.

Right click on component and create Service Call.

Click on continue.

Select existing controller, press F4 and select component press New.

Select Function Module and click on continue.

Select ITAB as context node and click continue. Automatically Executemd method will be created in component controller. Click on continue and click on complete.

Double click on View and Go to View context.

Drag and drop ITAB from component controller to View controller context.

Go to View layout. Drag and drop button, create an action.

Go to action implementation by double clicking on action.

Method ONACTIONGETDATA( ).

  Wd_comp_controller->executemd( ).

EndMethod.

Go to code wizard and select table option then select context and select ITAB. Click on continue.

Provide column header to the table.

Activate the component and create Application and test it.

4. Using Elements ItemListBox, BusinessGraphics, RadioButtonGroupByIndex, CheckBoxGroup, DropdownByIndex.

The relationship between ViewController and its View is considered as context binding or data binding.

Business Graphics: It is a UI Element used for representing data in graphical format.

It uses IGS (Internet Graphic Service) Service for representing the charts.

It contains 3 main properties.

Series Source                           Description                              Value.

Types of Business Graphics:

Pie Chart

Column Chart

Polar Chart

Line Chart

Steps for using Business Graphics:

Go to View.

Right Click on Root Element,

insert element and select Business Graphics.

Right click on business graphics and insert category.

Go to description property and bind with Name field of ITAB.

Right Click Business Graphic and insert Series.

Select simple series. (Value property is Important).

Bind Value property with PERMARKS Column.

For all types of charts the properties remains same.

Business Grphics

            Category

            SimpleSeries.

5. Customizing a Table UI Element by adding TextView, InputField, Image, ProgressIndicator, Button, Link on Action.

Table UI Element is called as a composite/complex UI Element because a table contains other UI Elements internally. Using “Table Cell Editor”.

Inside a table we can use table cell editor for adding buttons, hyperlinks, inputfields, text views, images, progress indicators etc.

As part of table cell editor if you use text view that column becomes non-editable.

As part of table cell editor if you use input field that column becomes editable.

To generate hyperlinks we use link to action UI Element.

For using images we have to import images into MIMEs folder.

Right click on component create MIME object and import pick up the image from desktop and save it.

For progress indicator we use percentage value property which accepts integer field values.

Table UI Element main property is “Data Source”.

6. Selected record of a table has to be displayed in a Form.

If a node is bind to both form and table in that situation collection cardinality of a node should be 1 to N.

Selected record can be captured in a form automatically if same node is bind to form and table.

7. Applying Next, Previous, Clear on table records.

Create 3 buttons with Action and go to implementation.

For Next: lo_nd_itab->move_next( ).

For Previous: lo_nd_itab->move_previous( ).

For Clear: lo_nd_itab->invalidate( ).

8. Applying Insert, Update, Delete on table element.

For Insert:

Insert into zemployee5 value ls_itab.

For Update:

Update zemployee5 set name = ls_itab-name

                                      Salpm = ls_itab-salpm

                                      Permarks = ls_itab-permarks

                                    Where id = ls_itab-id.

For Delete:

Delete * from zemployee5 where id = ls_itab-id.

9. Select all and de-select all functionality on a table.

For select all use the following code:

Data: size type I,

          Pos type I value 1.

Do size times.

       Lo_nd_itab->set_selected( index = pos flag = abap_true ).

Pos = pos + 1.

Enddo.

To provide multiple selections on a node we should put selection cardinality as 0-n or 1-n.

In the above coding we can use flag = abap_false foe de-selection.

Abap_true for selection.

Selection cardinality decides the selection capacity of a node or a table.

Selection cardinality is responsible for controlling the no of selection on a node or table.

10. Generating success and failure message using IF_WD_MESSAGE_MANAGER.

Note: To display messages at appropriate position we use MessageArea UI Element.

11. Disable, Enable and Visible, Invisible fields at the start of an application in WDDOINIT using set_attributes method on WD_CONTEXT object.

WDDOINIT( )

{

Wd_context->set_attributes( exporting name = ‘ENDIS’ value = abap_false ).

}

ONACTIONEDIT( )

{

Wd_context->set_attributes( exporting name = ‘ENDIS’ value = abap_true ).

}

Note: ENDIS is an attribute with WDY_BOOLEAN data type. This will be assigned to Enable property of the field at design time.

WDDOINIT( )

{

Wd_context->set_attributes( exporting name = ‘VISINS’ value = 01 ).

}

ONACTIONEDIT( )

{

Wd_context->set_attributes( exporting name = ‘VISINS’ value = 02 ).

}

Note: VISINS is an attribute with WDUI_VISIBILITY data type. This will be assigned to Visible property of the field at design time.

12. Creating Windows dynamically using Window Manager.

Windows are 3 types

1.      Pop Up Window

2.      External window

3.      Confirmation dialog window

Window manager (IF_WD_WINDOW_MANAGER)

1.      Create_window (For creating pop up windows (or) Modal windows

2.      Create_external_window (For Creating External Window (or) for calling Web Sites

3.      Create_confirm_popup (For Creating Confirmation dialog Windows)

         Creating Pop Up Windows

        Note: If a component Contains multiple windows then we can make one of the window as a default window  

                  using “Interface View Property” at application level.

                  Interface View = Window1

                  Plug name        = Default.

Go to Get Data action implementation

                 WD_COMP_CONTROLLER->EXECUTEMD(  ).

Implement the code to generate Pop Up with Window2.

Go to code Wizard and “Generate Pop Up “ Action and Provide Window2 as Pop Up window.

Data: lo_window_manger type ref to if_wd_window_manager,

         Lo_api_component type ref to If_wd_component,

         Lo_window type ref to If_wd_window           .

Lo_api_component     =          Wd_comp_controller->wd_get_api( ).

Lo_window_manger   =          lo_api_component->get_window_manger( ).

Lo_window                =          lo_window_manger->create_window(window_name = ‘WINDOW2’

                                                Message_display_mode = IF_WD_WINDOW=>co_msg_display_mode_selected

                                                Button_kind = IF_WD_WINDOW=>Co_button_ok

                                                Message_type = IF_WD_WINDOW=>co_msg_type_none

                                                Default_button = IF_WD_WINDOW=>co_button_ok ).

Lo_window->open( ).

Note: Generate Pop Up Option is not provided as part of old web dynpro frame work.

Creating External windows for calling external web application:/Web Sites :-

Go to view1 drag and drop “Line to Action/Button’.

Provide text and create on Action and Go to implementation.

Select code Wizard, Select “generate Popup” and Provide Window as ____________

DATA: lo_window_message type ref to IF_WD_WINDOW_MANAGER.

Lo_window = lo_window_manage->Create_external_window( URL = http://www.google.com ).

Lo_window->open( ).

Note: PopUp Windows are also called as Modal window, because with out closing PopUp Window end user can not operate on primary window.(first Window)

Creating Confirmation dialog window :

            In general delete Operation, Update operation considered as sensitive operations So for sensitive operatins we need to provide “conformation dialog Window”.

For creating conformation windows we need to make use of YES, NO, CANCEL operations.

Actions should be created.

Implement the following code for confirmation dialog windows.

            Data: API type ref to IF_WD_COMPONENT,

                        Winman type ref to IF_WD_WINDOW_MANAGER,

                        Win type ref to IF_ED_WINDOW,

                        Text1 type STRING_TABLE,

                        V_API type ref to IF_WD_VIEW_CONTROLLER.

                        Api = wd_comp_controller->WD_GET_API( ).

                        WINMAN = api->get_window_manager( ).

                        Insert ‘DO YOU WANT TO CHANGE DATA’ INTO TABLE TEXT1.

                        INSERT ‘DO YOU WANT TO SAVE ?’ INTO TABLE TEXT1.

                        WIN = WINMAN->Create_popup_to_fonfirm( text = text1 button_kind = IF_ED_WINDOW=>

                                    Co_buttons_yesnocancel message_type = IF_WD_WINDOW=>co_msg_type_question                                    Window_title = ‘TEST’ window_position = IF_WD_WINDOW=>CO_CENTER ).

                        V_API = WD_THIS->WD_GET_API( ).

                        WIN->subscribe_to_button_event( button = IF_WD_WINDOW=>CO_BUTTON_yes action_name = ‘YES’ action_view = v_api is_default_button = abap_true ).

WIN->subscribe_to_button_event( button = IF_WD_WINDOW=>CO_BUTTON_no action_name = ‘NO’ action_view = v_api is_default_button = abap_false ).

WIN->subscribe_to_button_event( button = IF_WD_WINDOW=>CO_BUTTON_cancel action_name = ‘CANCEL’ action_view = v_api is_default_button = abap_false ).

Win->open( ).

Create 3 actions YES, NO, CANCEL.

Write delete code in YES action.

In the above requirement we can apply enable, disable, visible, invisible functionality also.

                       

             

13. Using RoadMap UI Element in WD Application.

To construct a Road Map we use DEMO_ROADMAP Component.

Road Map is a Collection of steps and every map will be a separate view in a browser.

Constructing a Road Map :-

1.      Create a component with window1, Main view, view1, view2, view3, View4.

2.      Go to Main View Create a Road Map with 4 steps.

3.      Provide the numberings using the ‘Name’  Property, Provide description with description property,   then Save It.

1.      Insert

2.      Edit

3.      Save

4.      Confirm

14. Creating ALV table in WD Application.

Internal Context Mapping: If context mapping takes place between two different controllers of same component, it is considered as Internal context mapping.

External Context Mapping: If context mapping takes place between two different controllers of two different components, it is considered as External Context Mapping.

External Context Mapping is also called as Cross Component context mapping.

To transfer data from one component to another component we use an Interface Controller.

Purpose of component usages is to place the reusable component.

ALV Steps:

To reuse a component double click on the component provide ‘SALV_WD_TABLE.

Double click on interface controller of SALV_WD_TABLE.

Select Controller Usage, select component controller drag and drop ITAB onto data node. (External Context Mapping takes place).

Go to view insert view container.

Go to window, Right click on view container Embed a view. Select SALV_WD_TABLE related Table view. Click on continue.

Activate Component, Create Application and test it.

To clear the records from ALV Table use Invalidate method. Whenever we manipulate the records either on ALV Table (or) normal table, as a developer the coding should be generated on a node itself.

15. Customization (Adding Buttons, Hyperlinks, Progress Indicators, providing totals and subtotals, changing the visible row count, deleting a particular column from table, providing Edit functionality on table) of ALV table in WD Application.

We can customize ALV table by using 3 steps.

Step1: Create ALV Component dynamically.

Step2: Get the reference of Interface controller and call “Get_Model” method.

Step3: Implement the code giving by SAP for ALV customization.

We can further customize ALV Functionality by

For further ALV configuration go to view properties and place interface controller of “SALV_WD_TABLE”.

1.      Adding buttons inside ALV table.

1.      Create a button with an action.

2.       Step 1 is same as and Step2 in also same as above(ref: Deleting a particular column from ALV table).

3.      (Step 3):

Data: lr_button type ref to CL_SALV_WD_UIE_BUTTON.

Data: lr_column type ref to CL_SALV_WD_COLUMN.

LR_COLUMN = L_VALUE->IF_SALV_WD_COLUMN_SETTINGS~get_column( ‘NAME’ ).

CREATE OBJECT lr_button.

Lr_button->set_text_fieldname( ‘NAME’).

Lr_column->set_cell_editor( lr_button ).

2.      Adding hyperlinks inside ALV table.

Step1, Step2 same as above.

Step3: Implement the following code given by SAP by enabling Hyper links.

DATA: lr_link type ref to CL_SALV_WD_UIE_LINK_TO_ACTION.

DATA: lr_column type ref to CL_SALV_WD_COLUMN.

Lr_column = lo_value->IF_SALV_WD_COLUMN_STEETINGS~get_column( ‘ID’ ).

CREATE OBJECT lr_link.

            Lr_link->set_text_fieldname( ‘ID’ ).

            Lr_column->set_cell_editor( lr_link ).

3.      Enabling progress indicators on ALV table.

Step 1 and Step2 same as above.

Step 3:

      DATA: lr_link type re to CL_SALV_WD_UIE_PROGR_INDICATOR.

      DATA: lr_column type ref to CL_SALV_WD_COLUMN.

      Lr_column = lo_value->IF_SALV_WD_COLUMN_SETTINGS~get_column( ‘PERMARKS’ ).

     

Create object lr_link.

Lr_link->set_percent_value_fieldname( ‘PERMARKS’ ).

Lr_column->set_cell_editor( lr_link ).

     

4.      Providing totals and sub totals inside ALV table.

Step 1 and Step2 same as above.

Step 3 Implement the following code.

DATA: lr_column_settings type ref to IF_SALV_WD_COLUMN_SETTINGS,

             lr_column type ref to CL_SALV_WD_COLUMN,

            lr_column type SALV_WD_T_COLUMN_REF,

           lr_column TYPE SALV_WD_S_COLUMN_REF,

           FIELD_AMOUNT type ref to CL_SALV_WD_FIELD,

           Lv_aggr_rule type ref to CL_SALV_WD_AGGR_RULE,

          Lr_sort_rule type ref to CL_SALV_WD_SORT_RULE,

          Lr_column_settings ?= lo_value.

         Lt_column = lr_column_settings->get_columns( ).

       Loop at it_column into ls_column.

       Case ls_column-id.

                  When ‘SALPM’.

                  CALL METHOD lo_value->IF_SALV_WD_FIELD_SETTINGS~get_field

                                                      Exporting fieldname = ‘SALPM’

                                                      Receiving value        = field_amount.

                  CALL METHOD field_amount->IF_SALV_WD_AGGR~CREATE_AGGR_RULE

                              Exporting

                              Aggregation_type = IF_SALV_WD_C_AGGREGATION=>AGGRTYPE_TOTAL

                              RECEIVING

                              Value = lv_aggr_rule.

        Endcase.

       Endloop.

5.      Changing the visible row count on ALV table.

1.Create ALV component dynamically in WDDOINIT method.

For that go to code wizard select “Instantiate used component” Option and select SALV_WD_TABLE.

                  2. Get the reference of interface controller and call Get_model method.

For that go to code wizard select “Method call in used controller” and call get_model Method in SALV_WD_TABLE and click on continue.

                  3.Implement the code given by SAP for changing the visible row count of ALV table.

                     Lo_value->IF_SALV_WD_TABLE_Settings~SET_VISIBLE_ROW_COUNT( VALUE = 20 ).

6.      Deleting a particular column from ALV table.

Create a button with an action and implement

1.      Step1. (Create ALV component Dynamically.).

2.      Get the reference of interface controller and use “Get_model( )” method.

3.      Implement the code given by SAP for deleting a particular column.

Lo_value->IF_SALV_WD_COLUMN_SETTING~DELETE_COLUMN( “NAME” ).

7.      Providing “EDIT” functionality on ALV table.

16. Opening a popup window on click of button (or) hyper link in ALV.

1.      Create second window and second view (Window2, View2) and add second view2 to window2.

2.      Create Form by binding with Node ITAB.

3.      Go to view1 methods and create openPopUpeh Event Handlar.

4.      Map openPopUpeh with on click event of interface controller.

Add interface controller to view1 properties.

Go to Event Handlar “OPENPOPUPEH” and Write the code creating PopUp window.

For that go to code wizard and select Generate PopUp and provide window2, the code is Auto Generator. Save and Activate component and Test.

17. Using Supply Function in WD Application.

Every node contains following properties:

Collection Cardinality

Selection Cardinality

Dictionary Structure

Initialize Lead Selection

Supply Function.

Supply Function is used to initialize values in a node. It is also used to re-initialize the values in a node.

It is a property applicable only on a node.

We can write the code in a Supply function which is specific to a node.

Supply function will be triggered automatically whenever there are no records in a node.(It will reinitialize the values).

In general we can use supply function for refresh functionality.

DATA: lt_itab type wd_this->elements_itab,

            Ls_itab type like line of lt_itab.

Select * from zemployee5 into table lt_itab.

Node->bind_table( new_items = lt_itab set_initital_elements = abap_true ).

Supply Function are unpredictable. It can be used for initializing values in Radio Button, Dropdown boxes etc.

Supply Function is used for

Initialization

Re-Initialization

Unpredictable

Node specific

Used for RBGI, DDBI etc.

18. Using Custom Controller in WD Application.

Custom Controller should be created if the no of nodes in component controller are more.

In other words if the no of nodes in component controller are increasing in that case the no of records in component controller also increases, which will degrade the performance of an application. So in this circumstance we need to introduce a custom controller.

Custom controller is also a global controller.

Custom controller also behaves exactly same as component controller ie the behavior and the properties of custom controller and component controller are exactly same.

Within one component you can have only one component controller but we can have n no of custom controller.

Steps for using custom controller.

1.      Create component with Window, View, Right click on component and create customer controller and save it.

2.      Go to customer controller context, create ITAB node on the dictionary structure ZEMP11, collection cardinality 0 to N, add attribute structure and select the fields.

3.      Go to custom controller methods and create executeme method. Use code wizard and write code accordingly to get data from ZEMP11 table.

4.      View controller context, Select controller usage and select customer controller.

5.      Select custom controller and maintain context mapping between custom controller and view controller.

6.      In view layout create button with an action and to implementation.

7.      Go to action implementation and select WIZARD.

Select Method call is used controller, select custom controller and select method. Code is auto generated.

8.      Go to view1 layout and bind with itab to table control.

As a developer we can transfer data from any Global controller to any other Global controller.

            Custom controller       ______            to         ______            Component Controller (YES)

            Custom controller       ______            to         ______            Custom Controller       (YES)

            View controller           ______            to         ______            View Controller           (NO)

            View controller           ______            to         ______            Component Controller (YES)

            View controller           ______            to         ______            Custom Controller       (YES)

            Interface controller     ______            to         ______            Component Controller (YES)

            Interface controller     ______            to         ______            Custom Controller       (YES)

            Interface controller     ______            to         ______            View Controller           (NO)

From one View Controller we can not transfer data to another view controller directly because both are local controllers.

Controller usage option is just to enable Global controllers at right hand side for context mapping.

19. Using Domain data element for maintaining static values.

Create domain maintain the values and activate.

Create a data element and assign data element to domain.

DropdownByKey, RadioButtonGroupByKey comes under SVS (Simple Value Selector).

SVS can display upto 30 values.

Input field with F4 functionality comes under extended Value Selector.

EVS can be used to display more than 30 values.

SVS displays one column in the output. EVS can display 2 columns as part of output.

20. Hardcoded approach for maintaining the values.

Use the code (its there in ABAP presentation). Bind attribute to selected Key Property of DropdownByKey or Bind Attribute to value property of Input field.

21. Dynamic Value Selector.

Data: node_info type ref to IF_WD_CONTEXT_NODE_INFO.

Node_info = wd_context->get_node_info( ).

Node_info = node_info->get_child_node( ‘CARSNODE’ ).

Data: lt_valueset type WDR_CONTEXT_ATTR_VALUE_SET,

            L_value type WDR_CONTEXT_ATTR_VALUE.

DATA: count type I,

            Pos type I value 1.

Count = lo_nd_itab->get_element_count( ).

Do count times.

Lo_el_itab = lo_nd_itab->get_element( index = pos ).

Lo_el_itab->get_static_attributes( importing static_attributes = ls_itab ).

L_value-value = ls_itab-id.

L_value-text = ls_itab-name.

Insert l_value into table lt_valueset.

Pos = pos + 1.

Enddo.

Node_info->set_attribute_value_set( name = ‘CARSATTR’ value_set = lt_valueset ).

Dynamic value selector is used to display the records in input help of input filed and the values come form SAP backend DB table.

Domain values are considered as static values.

Database records are considered as dynamic values.

22. Personalization of a WD Application using sap-config-mode = TRUE statement.

Personalization is used to enable user specific settings.

We can enable personalization using sap-config-mode = true.

Personalization is also called as P13N.

This deals with user specific settings.

Open the application in a browser at end of the URL put “?” mark and type sap-config-mode = true.

Select label and right click and select settings for current configuration.

Using Personalization we can change the lables also we can also make the fields invisible for a specific user.

23. Using Recursive and Non-Recursive Nodes in WD Application.

Recursive nodes are applicable for only for a Tree UI Element.

These are also called as repetitive nodes.

Non-recursive nodes are applicable for Table, Business Graphics, Forms, Interactive forms.

While creating recursive node we need to provide repetitive node property pointing to the parent node.

24. ADOBE Forms

Difference between a Smartform and an AdobeForm:

Smartform generally uses only a Select database operation i.e we can not perform DML operations through Smartform (Insert, Delete, Update, Modify).

Adobeforms can be used for all databsed operations.

Smartforms are non-interactive forms, because end user can not modify or edit the data at runtime.

The prerequisites for Adobe Forms:

Developer M/c                                                                       Server M/c

SAP GUI                                                                                SAP ECC

Adobe Life Cycle Designer                                                    ADS

Adobe Reader                                                                         License Rights

In Server M/c the License Rights for ADS must be installed.

Adobe form Layout Structure:

                                 Data Binding                             Drag and Drop

 

Hierarchy                   Data view       Body pages     Master Pages             Library                  Object Properties

Test field                     ITAB                                                                           Text field               Library control

                                                                                                                                                       Properties can

Numeric fileds                               ID               FNAME                                            Numeric field         be modified.           

                                                                                   

      NAME         AGE                                                 Signature field

                                                                                                                        Sub form

                                          AGE                                                                      Table

                                                                                                                        Dropdown list

                                                                                                                        Item list box

                                                                                                                        Page N of M

                                                                                                                        Country Field

                                                                                                                        Date & Time field

                                                                                                                        Current Date

                                                                                                                        Button

                                                                                                                        Etc….

Designing a Simple Adobe form using SFP.

Go to SFP create an interface.

Provide the interface name and then create and Activate.

Go back and create a Form and assign interface to the Form.

Go to Layout.

To capture the value from a Numeric field use the syntax.

Select Add Button, go to click event in Script Editor.

NumericField3 = Numericfield1 + Numericfield2.

Select Subtract.

NumericField3 = Numericfield1 – Numericfield2.

Using the text fields.

.value.#text  to get text field value.

TextField3.value.#text = concat( TextField1.value.#text, TextField2.value.#text ).

Using static value as part of dropdownlist and ItemListBox.

Drag and Drop dropdownlist and add the list of Items.

Select Car:

                        HONDA City

                        ALTO

                        ZEN

                        MARUTHI

List Box

Select Car       HONDA City

                        ALTO

                        ZEN

                        MARUTHI

Displaying the current data in Adobe Form:

Current date patterns can be adjusted based on the requirement.

To display the calendar we use date and time field.

We can have multiple BodyPages if required.

Go to Hierarchy Right click on Page1 and insert a BodyPage.

If you use multiple BodyPages then we can have common Logo, Common, Header, Common footer by using Master pages.

Master Page                                                                            Body Page1

                                                                                                Body Page2

Master page contain the common context that can be shared across multiple Body pages.

In general we use Logo, Header, Footer in Master Pages.

BodyPage contains the context specific to its own Body Page.

For titles and footer use text control from the Library and we can change Font Style and Size and Color.

Explicitly page number by using page n of m control.

For table format in Adobe form we use subform Adobe7.0.

Displaying the data in table format in Adobe Form using subform concept.

Go to SFP create an interface.

Go to types.

TYPES: itab_type type standard table of ZEMPLOYEE5.

Save.

Go to global data declare a variable.

Itab type itab_type.

Go to code initialization.

Select * from zemployee5 into table itab.

Declare one output parameter.

Save and Activate the interface.

Go back create a Form and assign interface to a Form.

Drag and drop ITAB from interface to Form.

Go to Layout.

                                    Flow context (Table)

                                         

                                                    Flow context (Table)

Hierarchy                               DATA VIEW                                    BODY PAGE

 

ID	NAME	SALPM	PERMARKS

                                                    ITAB

 

            Sub form1                               ID

                                                            NAME

                                                            SALPM

                         Sub form2                  PERMARKS

Note: To display the data in table format in AdobeForm we use sub form with table content and table option.

We include inner subform with flow context and table row option (Repeat sub form).

From data view we drag and drop itab form data view to an inner sub form (Data Binding).

Go to layout.

Get Hierarchy Right click on page1 and insert a subform.

Select sub form go to object property and select flow context. Flow direction has table.

Right click on sub form insert another sub form.

Again set flow context and table row.

Go to Binding select repeat sub form.

Repeat sub form

Multiple count                         Max Count

Go to Data View.

Drag and drop ITAB to inner sub form.

Text execute come back.

Select the fields and make the appearance as None.

Test the form without activating.

Main advantages of usage of Adobe Form:

Output data can be saved in a End User machine.

At runtime a user can search the data within the Adobe Form.

User can sent the data as a email attachment to other user.

Output can be sent to a printer.

We can also filter the records in Adobe Form.

We can user where conditions on context itab for filtering the records.

Go to context->Select itab->Select where condition,   Click New.

Ex: SALPM >30000.

To display output in sorting order use Control levels

Go to Context-> select form-> select control levels.

New

Ex: SALPM     

25. Using ADOBE Forms in WD Application.

For an interactive form in WebDynpro we have to create a PDF Source attribute with “XSTRING” data type for supporting Binary format between WebDynpro and Adobe Form.

Create a component with window and view in SE80.

Add a node itab in component controller context with dictionary structure ZEMP11, cardinality as 0 to N.

Write executemd in component controller.

Create a button with action and call executemd method.

Perform context mapping.

Go to View layout inset interactive form in a new layout.

Go to view context and create PDF Source attribute with ref to ‘XSTRING’.

Binding                                   Template Source    ó ZFORMFORWD

                                                PDF Source            ó PDF Source

Provide form name to template source property “ZFORMFORWD”. Press Enter Button. Provide Interface name “ZINTERFORWD”.

Select context and select itab from view controller context.

Go to Hierarchy insert first sub form to Page1.

Select Flow Context and Select Table.

Insert one more sub form.

Select Flow context and select table row, select repeat for inner sub form.

Go to Data View->Drag and drop itab into inner form.

Activate the component and create application and test it.

Using Inset Operation with an Interactive Form:

OnActionInsert( )

{

Get_static_attribute( importing static_attribute = ls_itab ).

Insert into zemp11 values ls_itab.

}

Online Interactive Form:

Create a component with window, view.

Go to component controller create itab node with zemp11 structure with click on add attributes and select the fields.

Create an insert method in component controller, go to implementation.

Go to View context and perform context mapping.

Go to View layout, create inset button with an action implement on Action Event.

Insert Interactive form, go to context create PDF Source attribute with “XSTRING” data type.

Bind PDF Source attribute to PDF Source property.

Provide the form name source to template source. Press enter.

Provide interface name, press context and select itab node. Activate your component test application.

If any adobe form is sending or receiving the data from the SAP backend table, these forms are online adobe interactive forms.

Adobe forms are of 2 types:

Online Adobe forms: These always deals with database operations with database tables.

Offline Adobe forms: They do not use any database tables.

Customizing the existing Forms:

Go to Adobe Life Cycle Designer, Select tools Menu and select import option.

We can change the existing logos and titles.

We can also add text, Numeric fields wherever required.

We can also add dropdownlists, Itemlistbox wherever required.

After providing interactivity in existing adobe template we have to maintain the appropriate data bindings with appropriate fields.

Initialization values into an adobe form through webdynpro.

We use WDDOINIT method.

Set_attribute( exporting name = ‘NAME’ value = ‘Enter Name’ ).

We can also populate itab records or ItemListBox by maintaining a binding relationship with Itab fields.

For Webdynpro ABAP Adobe forms driven program is not at all required, because all the operations will be controlled from Webdynpro component itself.

26. Using the Standard text in ADOBE Form

TCode: SO10

Text Name : ZMYTEXT

Text ID: ST

Language: EN

Press Create.

Enter Text SAVE and come out.

Maintain standard text and go back and use ti in interface.

Create interface and activate.

Create a Form in SFP.

Right Click on form and create a text.

Select Text and make Text type to Include Text.

TextName : ‘ZMYTEXT’

Text Object : ‘TEXT’

Text ID : ‘ST’

Langu = ‘EN’

Go to layout, go to data view

Drag and Drop the text. Make this large by Property Allow Multiple Lines.

27. Dynamic Programming in WD Application.

Dynamic Programming is used to create the screen elements at runtime with the help of coding.

Dynamic programming should be implemented only in WDDOMODIFYVIEW method.

Life Cycle method of a view controller:

            These methods are also as standard methods or predefined methods or cooker methods.

            WDDOINIT: This method is used for initializing the values. This method will be called only once at the start of an Application.

            WDDOEXIT: is used for de-allocating the values just before closing the view in a browser. This will be called only once for that particular view.

            WDDOMODIFYVIEW: This method will be called for every minor action that takes place in a view ie before executing anyother framework internally calls WDDOMODIFYVIEW method.

Implementing the code under WDDOMODIFYVIEW is not at recommended because for each and every action WDDOMODIFYVIEW method will be executed because of this the performance of an application will be degraded.

WDDOMODIFYVIEW method is mainly used for Dynamic programming.

           

            CLASS NAME                                                         METHOD.

            CL_WD_TEXT_VIEW                                             new_text_view( )

            CL_WD_INPUT_FIELD                                          new_input_field( )

            CL_WD_IMAGE                                                       new_image( )

            CL_WD_TABLE                                                       new_table( )

            CL_WD_PAGE_HEADER                                       new_page_header( )

            CL_WD_DROPDOWN_BY_IDX                           new_dropdown_by_idx( )

            CL_WD_RADIOBUTTONGROUP_BY_IDX       new_radiobuttongroup_by_idx( )

            CL_WD_DROPDOWN_BY_KEY                          new_dropdown_by_key( )

            CL_WD_RADIOBUTTON_GROUP_BY_KEY    new_radiobutton_group_by_key( )

Other classes

            CL_WD_FLOW_DATA

            CL_WD_UIELEMENT_CONTAINER

Steps for using Dynamic Programmig:

Get the reference of RootUIElementContainer using View Object which is predefined object WDDOMODIFYVIEW.

Create UI Element based on your requirement and set appropriate property.

Define the flow layout for UI Element.

Add UI Element to Root.

Data: Root type ref to CL_WD_UIELEMENT_CONTAINER,

            Ph type ref to CL_WD_PAGE_HEADER.

Root ?= view->get_element( ‘RootUIElementContainer’ ).

Ph  = CL_WD_PAGE_HEADER=>NEW_PAGE_HEADER( TIME = ‘WD_DEVELOPMENT’ ).

CL_WD_FLOW_DATA=>NEW_FLOW_DATA( element = ph ).

Root->add_child( ph ).

Or

Root->add_child( this_child = ph index = 1).                    ------------(first_time variable)

If Binding is mandatory.

INF = CL_WD_INPUT_FIELD=>NEW_INPUT_FIELD( bind_value = ‘FNAME’ ).        ----- For Attribute

OR

‘EMP.FNAME’).                                                                                --- For Node

What is Dynamic Programming and When to implement?

What are predefined parameters of WDDOMODIFYVIEW method?

Can we create a node or Attribute dynamically or not?

We can create a node or Attribute dynamically at run time if the structure of a node is not known at design time.

Yes

Can we use ID property of a UI Element for binding?

No

If a object of one class added object of another class then we use type casing operator (?=).

28. Using Select Options in WD Application.

For using select options we use WDR_SELECT_OPTIONS. Its predefined component used to achieve selection screen in our WD Applications.

Create a webdynpro component with window, view.

Double click on component and provide the reusable component name WDR_SELECT-OPTIONS.

Go to View1 create a node Flights with structure SFLIGHTS.

Select some fields using Add Attributes from Structure With Collection Cardinality 0 to N.

Go to View Layout Insert View container.

Go to WD Component Add WDR_SELECT_OPTIONS and Save.

Go to View properties and select create controller usage and select Interface controller of WND_SELECTION_SCREEN.

Go to WDDOINIT method and implement the following code for enabling the Select Options.

The below code is used for enabling select options on Carrid field.

Go to WDDOINIT method and select code wizard and select Instantiate used component option and select WDR_SELECT_OPTIONS. Data Element on which we are using select options is S_CARR_ID.

Go to View Attributes Declare

M_HANDLER

M_WD_SELECT_OPTIONS

Go to SEARCH DATA Action implement following code.

Data node_flights type ref to IF_WD_CONTEXT_NODE.

Data rt_carrid type ref to data.

Data isflight type table of sflight.

Data wsflight type sflight.

Field-symbols: type table.

Rt_carrid = wd_this->m_handler~get_range_table_of_st2___field( i_id = ‘S_CARR_ID’ ).

Assign rt_carrid->* to

Clear isflight.

Refresh isflight.

Select * from sflight into corresponding fields of table sflight where carrid in .

Node_flights – wd_context->get_child_node( name = ‘FLIGHTS’ ).

Node_flights-> bind_table( isflight).

29. Using Copy All and Copy Selected Records on two tables in WD Application.

Go to view1 context create itab2 node with dictionary structure zemployee5.

In view1 layout two button for copyall and copyselectedrecords.

Create a table2 by bing ding with itab2.

The code for copying all the records from once node to another node.

Data: count type I.

Data pos type I value 1.

Count = lo_nd_itab->get_element_count( ).

Do count times.

Lo_el_itab = lo_nd_itab->get_element( index = pos ).

Lo_el_itab = lo_nd_itab->get_static_attributes( importing static_attributes = ls_itab ).

Lo_el_itab2 = lo_nd_itab2->create_element( ).

Lo_el_itab2 = lo_nd_itab2->set_static_attributes( exporting static_attributes = ls_itab ).

Lo_nd_itab2->bind_element( new_item = lo_el_itab2 set_initial_element = abap_false ).

Pos =  pos + 1.

Enddo.

Copying the selected record for table 1 to table 2 or node 1 to node 2.

Use the following condition in the above code

Lo_nd_itab2->invalidate( ).

Do count times.

If lo_nd_itab->is_selected( index = pos ) = abap_true.

 Same code as above.

Endif.

Enddo.

Is_selected is a method to know whether the record is selected or not.

To provide multiple selections on a node/table the selection cardinality of a node must be 0 to N.

30. Real Time FAQs.

Can we create Node/Attributes directly under interface controller or not?

As a developer we can not directly create a node/attribute in interface controller, but via component controller with Interface node property as yes.

What is the difference between View controller, component controller and interface controller?

View controller is local to its view only.

Component controller is global to all the views with in the component.

Interface controller is global between two different components.

Difference between custom controller and component controller?

No difference but the custom controller is created if the no of nodes and load on component controller is increasing in that situation we create a custom controller.

What is the purpose of Interface View property?

To default the Window.

If a window contains multiple views how to make one of the view default?

Window -> Right click on window -> Set as default.

How to enable select options in webdynpro application?

Re using WDR_SELECT_OPTION component under component usages in a view we insert view container. Inside view container we need to include WND_SELECTION_SCREEN.

Go to init method we need to pass the data element of a field on which we need to apply Select Options.

In get data we use Select Query.

What is the difference between Internal context mapping and external context mapping?

Difference between collection cardinality and selection cardinality?

What are various screen elements you have used on part of WD Project?

What is the difference between DropdownByKey and DropdownByIndex?

What is the difference between RadioButtonGroupByKey and RadioButtonGroupByIndex?

What are the various classes, methods and interfaces you have used in webdynpro development?

What are the various predefined component you have used in WD Project?

How to integrate WD Application in Webdynpro Project?

Using Iviews, Worksets, Pages and Roles.

How to enable and disable screen Elements?

How to make the fields visible and Invisible?

What is the purpose of View Container?

To include one view under another view we use view container.

What is View Assembling?

Collection views that are displayed in view using view container is considered a view assembling.

What are various life cycle methods or Cooker methods in WD?

WDDOINIT

WDDOMODIFYVIEW

WDDOEXIT.

In which situation we use WDDOMODIFYVIEW method?

For Dynamic Programming.

What is Dynamic Programming and when you implement Dynamic programming?

Creating screen elements at run time using coding.

Can we create Node/Attribute dynamically?

It is possible when no of fields are not known, we create node at runtime.

Can we bind ID property of a table or not?

No

What is the difference between get_element( ) and get_element( index = int1 )?

What is the difference between delete, remove_element methods?

Delete- deletes the record from database table permanently.

Remove_element – removes the record from the element temporarily.

What are the main properties of Business Graphic, Table, ItemListBox, Interactive Form?

What are the predefined attributes of View Container?

WD_THIS

WD_CONTEXT

WD_COMP_CONTROLLER.

What is the procedure for construct a RoadMap?

What is the difference between Node and Attribute?

What is FQDN URL?

How to create a node or attribute in Interface Controller?

What is Service Call and how to use RFC?

What are the various properties of a node?

How to provide total and subtotal in ALV table?

What is the Singleton and Non-Singleton Node?

What are recursive and non-recursive nodes?

What Supply Function?

What is MVC Architecture?

Advantages of MVC is to achieve Reusability by separating presentation layer to Business layer.

What is Assistance Class?

What is purpose of code wizard and what are various options?

Which interface is used for creating different types of windows?