The CRM 7 Web UI – Creating Views
Check out YouTube channel for great photography tutorials
The CRM 7 Web UI – Creating Views
In this example we create 2 views in one window to select a business partner and then to search for orders for that business partner. In a second session, I’ll show you, once the orders are found, how one can click on a hyperlink on the order number in the rseults found to then display some details of the line items for that order.
So let’s get started.
Go to transaction BSP_WD_CMPWB and create a component.
When prompted provide a window name.
This will create a whole lot of classes and other stuff which you can add to a relevant transport.
Once created you’ll see the following:
Now create the first view. This view will be for entering a business partner number that we will use as our search criterion:
To create a view for the selection criteria – right click on View and Create. This will start a wizard, we will use a Value Node for our Business Partner field:
We chose to create the view with a sample button, but didn’t use it in the end, so you can also select the radiobutton that says “Without Buttons”:
Now we create a Viewset. Note that when we created this viewset we were only going to have 2 views – Search and Result, hence the 2 rows (one column since the one view will be below the other). It can always be modified later by adjusting the generated html, or if you know upfront how many views you will have in your window make sure you do it correctly when creating the view set.
The Define View Area part of this wizard provides names for each of the parts of the view set:
Up to now we have been in the Component Structure Browser. We now need to go into the Runtime Repository Editor. We go here to define the BOL model/s we are going to use and also to assign each view to a view area.
To define the BOL model we are going to use right click on Models and add the BOL model you want to use. We will use BTBP which includes the Business Partner BOL entities as well as the BT Order BOL entities.
Now assign the views created to the view areas created. Note that at this stage we have only created the searchCriteria view. Once the other views have been created you can repeat this step. Note below that the searchCriteria view is assigned to the view area that we have called search:
Now add the Viewset to the Window:
Go out of the transaction and and back in again to be able to see the BOL browser. Note BOL Model Browser extra button. This also enables the BOL entities to be available when you select them as model nodes in your views:
Now we can create View for the result. Go back to the Component Structure Browser, right click on Views and Create New View. Name this view resultList. Follow steps in the wizard as follows. Note that here we use a model node BTAdminH which contains data about the order header and we create the view as a table view since there may be many orders that we will display in our results.
Now that 2 views have been created – searchCriteria and resultList we can configure what we want to be shown on these views.
To start double click to the searchCriteria view in the Component Structure Browser. Then click on the Configuration tab on the right side of your screen. Click on Show available fields and select the Customer field. Click on the “plus” button. This will put the field onto the screen. You can hold ALT and then select the field to change some of the field properties and decide exactly where you would like the field.
We now want to change this field from an ordinary input field into a field with a drop down. To do this click on the View Structure tab. Open the Context folder, and open the BPNUMBER folder, then open the Attributes folder. Right click on the BPNUMBER attribute and select Generate Getter and Setter Methods. Once that has been done double click on the GET_P_BPNUMBER node and create the method:
This will provide a blank implementation of this method where you can now put in the following code:
METHOD get_p_bpnumber.
CASE iv_property.
WHEN if_bsp_wd_model_setter_getter=>fp_fieldtype.
rv_value = cl_bsp_dlc_view_descriptor=>field_type_picklist.
ENDCASE.
ENDMETHOD.
To provide values in the drop down list we need to do a few things. Firstly we need to put an instance attribute in the context class for the relevant attribute. Double click on the class shown just below the attribute node. In my case the class is called ZL_ORDER_S_SEARCHCRITERI_CN00:
Click on the attributes tab and create an attribute called GR_DDLB. It must be type ref to CL_CRM_UIU_DDLB.
Once this is done we need to implement the GET_V method for the context attribute. Go back to the View Structure and implement the GET_V_BPNUMBER method. If it is still grey double click it and create the method on the prompt.
This will create a blank implementation of the method in which you can now put the following code:
method GET_V_BPNUMBER.
data: lt_ddlb type bsp_wd_dropdown_table,
ls_ddlb type bsp_wd_dropdown_line,
ls_but000 type but000,
lt_but000 like table of ls_but000.
IF gr_ddlb is not bound.
create object gr_ddlb
exporting
iv_source_type = 'T'.
* get the values...
*KEY 1 Types CHAR40
*VALUE 1 Types TEXT80
* initially add space to the dropdown for when there is no value there
ls_ddlb-key = space.
ls_ddlb-value = space.
append ls_ddlb to lt_ddlb.
select * from but000 into table lt_but000
where type = 1.
if sy-subrc = 0.
loop at lt_but000 into ls_but000.
ls_ddlb-key = ls_but000-partner.
concatenate ls_but000-partner ls_but000-initials ls_but000-name_last into
ls_ddlb-value separated by space.
append ls_ddlb to lt_ddlb.
endloop.
endif.
if lt_ddlb is not initial.
gr_ddlb->set_selection_table( lt_ddlb ).
endif.
endif.
rv_valuehelp_descriptor = gr_ddlb.
endmethod.
Alternatively you could do a F4 value help on the field by implementing the code as shown below. This uses search help ‘BUPAP’. If you want to use an Advanced Search Help you cannot use this – this is for simple search helps only. When using a search help you would not implement the get_p method. Note that you use the “struct” preface for the field name when using a Model node, for a Value Node do not use the “struct” preface.
METHOD get_v_bpnumber.
DATA: ls_map TYPE if_bsp_wd_valuehelp_f4descr=>gtype_param_mapping,
lt_inmap TYPE if_bsp_wd_valuehelp_f4descr=>gtype_param_mapping_tab,
lt_outmap TYPE if_bsp_wd_valuehelp_f4descr=>gtype_param_mapping_tab.
ls_map-context_attr = 'BPNUMBER'. "'struct.bpnumber'.
ls_map-f4_attr = 'PARTNER'.
APPEND ls_map TO lt_inmap.
APPEND ls_map TO lt_outmap.
CREATE OBJECT rv_valuehelp_descriptor TYPE
cl_bsp_wd_valuehelp_f4descr
EXPORTING
iv_help_id = 'BUPAP'
iv_help_id_kind = if_bsp_wd_valuehelp_f4descr=>help_id_kind_name
iv_input_mapping = lt_inmap
iv_output_mapping = lt_outmap.
ENDMETHOD.
Now we need to configure our result list. Remember that we decided that we want this to display as a table, so the configuration will look quite different. From the Model or Value node structure, you can decide which fields you want to display and you can provide titles for each column. There are a few other things that you can do, but I’ll leave that up to you to discover.
The following screenshots show some editing done to the htm created for our views. Because the view group context does not exist in our scenario, the code to determine display mode would cause a run time error. We therefore need to comment out this line of code. To do so we embrace it with the following tags: <%– … –%> as below:
To find the htm file, double click on the node shown under the View Layout section:
You’ll see the following htm file:
Do this for the resultList.htm as well as the searchCriteria.htm.
Even though we have done very little so far, we are ready to test that what we have done so far works. Note that no data will be displayed in our results as yet. To test return to the UI Component Workbench home screen (transaction bsp_wd_cmpwb) for your component and press the test (wrench) icon:
After logging into the CRM web UI you should see the following in your browser. The drop down for customer will contain all the BP records in BUT000, so its not that useful. Maybe the search help described above would be more appropriate.
Stage One complete, lets now get some functionality going!
We need to create a button to invoke the search once we have selected a Business Partner.
To do that we need to edit the htm file in the searchCriteria view, by inserting the following code:
<thtmlb:button id = "Search"
onClick = "SEARCH"
text = "Search"
enabled = "TRUE"
tooltip = "Search for Transactions"
design = "EMPHASIZED" />
The screenshot of the htm file is shown below:
We have a search in one view with results being displayed in another view, so we need some way to communicate between the two views. Because these views are in the same component we can use the Custom Controller for this purpose. To create a Custom Controller right click on the Custom Controller node on the left part of the screen and click Create:
Follow the wizard providing a name for the custom controller. It is unfortunate that I called mine btadminh as this will be a little misleading later on, sorry!
When prompted in the wizard to add a model node add BTAdminH as it will be this node that we will use to communicate between the views.
The remainder of the screens in the wizard can be left blank.
The BTADminH model node needs to be added to the searchCriteria screen as well. To do this go to the searchCriteria view and right click on the Context Nodes node. Then click create. Follow the wizard and create a model node with the name BTADMINH utilizing BTADminH BOL entity. The remainder of the screens in the wizard can be left blank:
A binding from this context node to the BTADMINH node in the custom controller also needs to be created:
We now need to create an Event Handler to respond to clicks to the Search button that we have created. Right click on the Event Handler node and click Create:
Give the Event Name “SEARCH”. This will create a blank implementation of a method EH_ONSEARCH which will be triggered when the button is pressed. Implement the following code in the event handler. This will populate the BTAdminH model node of the resultList view via the custom controller. The results will then be viewed in the table you created.
METHOD eh_onsearch.
DATA lr_iterator TYPE REF TO if_bol_bo_col_iterator.
DATA lr_bo TYPE REF TO if_bol_bo_property_access.
DATA lv_bp TYPE bu_partner.
DATA: lr_result TYPE REF TO if_bol_entity_col,
ent TYPE REF TO cl_crm_bol_entity,
enth TYPE REF TO cl_crm_bol_entity,
lr_qs TYPE REF TO cl_crm_bol_query_service.
lr_iterator = me->typed_context->bpnumber->collection_wrapper->get_iterator( ).
IF lr_iterator IS BOUND.
lr_bo = lr_iterator->get_first( ).
IF lr_bo IS BOUND.
lr_bo->get_property_as_value( EXPORTING iv_attr_name = 'BPNUMBER'
IMPORTING ev_result = lv_bp ).
lr_qs = cl_crm_bol_query_service=>get_instance( 'BTQuery1O' ).
lr_qs->set_property( iv_attr_name = 'BP_NUMBER'
iv_value = lv_bp ).
lr_qs->set_property( iv_attr_name = 'MAX_HITS'
iv_value = '10' ).
lr_result = lr_qs->get_query_result( ).
ent ?= lr_result->get_first( ).
WHILE ent IS BOUND.
enth ?= ent->get_related_entity( 'BTOrderHeader' ).
me->typed_context->btadminh->collection_wrapper->add( enth ).
ent ?= lr_result->get_next( ).
ENDWHILE.
ENDIF.
ENDIF.
ENDMETHOD.
Finally before we test again we need to create a binding between the custom controller and the resultList view:
We should now be able to test our search out and obtain some results for our search:
The creation of the “Display Item” button on our search results, to show the transaction number in blue (a hyperlink) and to display the items in the view below will be done in the next session. Look forward to it coming in the future!
Posts
Post a Comment