You are on page 1of 35

Creation of Component and Overview page and assigning to User.

Component Creation(ZBT_Search).
Step1: Add ALL model to the Models.

Step 2: Create Search view (empty view).

Step3: Add BTQ1Order and BTQR1Order to the model node.

Step 4: Create Empty view.

Step 5: Create Custom Controller QueryCuCo

Step6: Create a new model node for Custom controller

Step 7: Create a node BTOrder with the BOL type BTOrder

Step 8: Choose Higher Level Context node as BTQR1Order and choose BOL Relation BTADVS1Ord.

Step 9:

Go to the Search View and create binding for context node BTQR1Order.

After Bounded.

Step 10: Create new View Result.

Step 11: Define the Model Node BTQR1Order of type BOL BTQR1Order to store the one order result list. Also define the Model node BTOrder of type BOL BTOrder. Use the Higher level node BTQR1Order with BOL relation BTADVS1Ord.

Step 12: Create binding/links of context node BTQR1Order with the custom controller context node BTQR1Order.

Step 13: Choose view type as Table View and Configurable checkbox too.

Step 14: As shown below create new View Set.

Step 15: Enter view set name as SearchVS and mention grid size as Lines 2, Columns 1.

Step 16: Enter View areas names (e.g. Search & Result) and respectively choose the positioning of ViewAreas.

Step 17:

As shown below the wizard displays the overview of ViewSet ViewAreas.

Step 18: Select the ViewArea Search, right click and choose Add View

Choose View name Search

Choose View name Result

Step 19:

In the same way, choose the ViewArea Result and assign Result View

Choose Viewsset name SearchVS

Make sure to flag it as Default.

Step 20: Go to the implementation class of Search View.

Step 21: Open the Super class (ZL_ZBT_SEAR_SEARCH) and change the inheritance of controller class (CL_BSP_WD_VIEW_CONTROLLER) with Class (CL_BSP_WD_ADVSEARCH_CONTROLLER)

Step 22: Choose the context node BTQ1Order of View ZBT_SEARCH/Search and open Implementation Class ZL_ZBT_SEAR_SEARCH_CN00.

Step 23: Replace the super class inheritance (CL_BSP_WD_CONTEXT_NODE) with new class name CL_BSP_WD_CONTEXT_NODE_ASP

Step 24: Replace the below code into the Search.htm page. <%@page language="abap" %> <%@extension name="thtmlb" prefix="thtmlb" %> <%@extension name="chtmlb" prefix="chtmlb" %> <%@extension name="bsp" prefix="bsp" %> <thtmlb:advancedSearch id = "advs0" fieldMetadata = "<%= controller->GET_DQUERY_DEFINITIONS( ) %>" header = "<%= BTQ1ORDER->get_param_struct_name( ) %>" fieldNames = "<%= controller->GET_POSSIBLE_FIELDS( ) %>" values = "//BTQ1ORDER/PARAMETERS" maxHits = "//BTQ1ORDER/max_hits" onEnter = "search" ajaxDeltaHandling = "false" /> <br><br> <thtmlb:button id = "search" onClick = "search" text = "Search" /> <chtmlb:config mode = "RUNTIME" displayMode = "TRUE" xml = "<%= controller->configuration_descr->get_config_data( ) %>" />

Step 25: Open the Configuration tab of View ZBT_SEARCH/Search. Click on Edit button. Choose the search fields from available search criterias. Then click on Save button.

Step 26: Open the Configuration tab of View ZBT_SEARCH/Result. Click on Edit button. Choose the fields to be displayed from available fields. Then click on Save button.

Step 27: Create new events in View ZBT_SEARCH /Search and ZBT_SEARCH /Clear.

The Events are Created as Follows,

Step 28: Write the Following code in the Search Event method EH_ONSEARCH. DATA: lr_query_service TYPE REF TO cl_crm_bol_dquery_service, lr_result TYPE REF TO if_bol_bo_col. lr_query_service ?= me->typed_context->btq1order->collection_wrapper>get_current( ). lr_result = lr_query_service->get_query_result( ). CHECK lr_result is BOUND. me->typed_context->btqr1order->set_collection( lr_result ). endmethod.

Write the Following code in the Clear Event. method EH_ONCLEAR. me->typed_context->btqr1order->Collection_wrapper-> clear( ). End method.

After completed those task the output will be,

Creation of OverView for the Selected Data

Step 1: Go to View ZBT_Search/Result. Expand the context node BTQR1Order and Implement the GET_P method of attribute OBJECT_ID.

Step 2: Copy the below code into method GET_P_OBJECT_ID. method GET_P_OBJECT_ID. case iv_property. when if_bsp_wd_model_setter_getter=>fp_fieldtype. rv_value = cl_bsp_dlc_view_descriptor=>field_type_event_link. when if_bsp_wd_model_setter_getter=>fp_onclick. rv_value = 'SELECTION'. "#EC NOTEXT when if_bsp_wd_model_setter_getter=>fp_tooltip. rv_value = 'Click to see the details'. endcase. endmethod.

Step 3: Create new view to display the one order details into separate view(Details)

Step 4: Define the Model Node BTOrder of type BOL BTOrder and Model Node BTAdminH of type BOL BTAdminH. Use the BTOrder as higher level node with BOL relation BTOrderHeader for Model Node BTAdminH.

Step 5: Create the Binding/Linkage with the Custom Controllers (QueryCuCo.do) context node BTOrder.

Step 6: Create a Form view without button option.

Step 7: Create a Overview Page (DetailsOV).

Step 8: Right click on Views and choose Create Overview Page from context menu. Enter the nameDetailsOV.

Step 9: Right click on ViewArea OverviewPage and then choose Add View to add Details View into it. Then choose the Details view from search help and press Enter key.

Step 10: Go to the Configuration tab of View ZBT_Search/Details. Click on EDIT button and then choose the fields from available fields and then click on Save button.

Step 11: Go to Configuration tab of OverviewPage ViewSet ZBTSeach/DetailsOV. Click on EDIT button; choose Overview Page radio button and Continue.

Step 12: As shown below move the Details view from Available Assignment Blocks to Displayed Assignment Blocks. Enter the Title as Details.

Step 13: Go to View ZBT_SearchH/Result. Define the new Outbound Plug TODetails.

Step 14. New method OP_TODETAILS will appear as shown below under the node Outbound Plugs. And Open the Runtime Repository Editor. Create Navigational Link from Result list to Details Overview Page.

Step 15: Enter the Navigational Link ID TODetails. As shown below choose the Source Details (View ZBD_Search/Result, Outbound Plug TODETAILS) and the Target Details (View ZBD_Search /DetailsOV, Inbound Plug DEFAULT).

Step 16: Create a Selection Event in the ZBT_Search/Result.

Step 17: The event handler method EH_ONSELECTION would appear as shown below.

Step 18 : Call the outbound plug method OP_TODETAILS into event handler method EH_ONSELECTION

Step 19: Pass the navigational link name TODETAILS as outbound plug name for navigation from View Manager.

Now The OverView Page is Created.

Step 19: Create inbound plug for the window.

Step 20: add window to the Compoundinterface

Enable the Back Button in the Web Browser.


Goto the ZBT_Search/DetailsOV view and redefine the wd_destroy method. Here wd_destroy method is already redefined.

And Write the Following code in the wd_destroy method method WD_DESTROY. RAISE EVENT history_trigger. CALL METHOD SUPER->WD_DESTROY . endmethod.

Similarly redefine the wd_destroy methos in the ZBT_SEARCH/SearchVS view and paste the same code

Business Role Creation(ZBTORDERPRO)


Step 1: TargetId Creation SPRO=>IMG=>CRM=>UI Framework=>Technical Role Definition => Define Work Area Component Repository=>New Entries

Select Inbound Plug Definition and => New Entries. Step 2: Create a TargetID(ztid_bt).

Step 3: Nav. Bar Profile Creation SPRO=>IMG=>CRM=>UI Framework=>Technical Role Definition => Define Nav. Bar Profile Step 1: Create Logical links(ZBT_LL). Define Logical Links =>New Entries.

Step 4: Create Work Center Link Groups.(ZBT_WCLG) Define Work Center Link Groups =>New Entries.

Step 5: Assign logical links(ZBT_LL) to the Work Center Link Groups(ZBT_WCLG) Define Work Center Link Groups => Assign Links =>New Entries

Step 6: Create Work Center.(ZBT_WC2) Define Work center => New Entries

Step 7: Assign the Work Center Link Groups(ZBT_WCLG) to the work center(ZBT_WC2) Assign Groups => New Entries.

Step 8: Create Nav. Bar Profile (zbt_nvbp) Define Nav. Bar Profile.

Step 9: Assign Work Center(ZBT_WC2) to the Nav. Bar Profile(zbt_nvbp) Assign Work Centers => New Entries

Step 10: Business Role Creation.

Assign this profile to the ZBTORDER_PFCG. And assing the pfcg for the user.

Run the Component

While Clicking the Search the output will be displayed in the Result view

When Click the Transaction No the new Overview page will be opened for the Transaction No.

While clickng the Back button it returns to the Search Page.

You might also like