CRM 7 Web UI – Creating Views

29
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:

description

Creating views SAP CRM

Transcript of CRM 7 Web UI – Creating Views

Page 1: CRM 7 Web UI – Creating Views

CRM 7 Web UI – Creating ViewsIn 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:

Page 2: CRM 7 Web UI – Creating Views

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:

Page 5: CRM 7 Web UI – Creating Views

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”:

Page 6: CRM 7 Web UI – Creating Views

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.

Page 7: CRM 7 Web UI – Creating Views

The Define View Area part of this wizard provides names for each of the parts of the view set:

Page 8: CRM 7 Web UI – Creating Views

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.

Page 9: CRM 7 Web UI – Creating Views

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:

Page 10: CRM 7 Web UI – Creating Views

Now add the Viewset to the Window:

Page 11: CRM 7 Web UI – Creating Views

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:

Page 12: CRM 7 Web UI – Creating 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.

Page 13: CRM 7 Web UI – Creating Views

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.

Page 14: CRM 7 Web UI – Creating Views

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: 

Page 15: CRM 7 Web UI – Creating Views

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.

Page 16: CRM 7 Web UI – Creating Views

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.

Page 17: CRM 7 Web UI – Creating Views

        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.

Page 18: CRM 7 Web UI – Creating Views

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:

Page 19: CRM 7 Web UI – Creating Views

You’ll see the following htm file:

Page 20: CRM 7 Web UI – Creating Views

Do this for the resultList.htm as well as the searchCriteria.htm.

Page 21: CRM 7 Web UI – Creating Views

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:

Page 22: CRM 7 Web UI – Creating Views

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:

Page 23: CRM 7 Web UI – Creating Views

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.

Page 24: CRM 7 Web UI – Creating 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:

Page 25: CRM 7 Web UI – Creating Views

A binding from this context node to the BTADMINH node in the custom controller also needs to be

created:

Page 26: CRM 7 Web UI – Creating Views

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:

Page 27: CRM 7 Web UI – Creating Views

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' ).

Page 28: CRM 7 Web UI – Creating Views

      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:

Page 29: CRM 7 Web UI – Creating Views

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