Exercise 1

Unit: IC Web Client: Inspecting BOL

At the conclusion of this exercise, you will be able to:

 inspect BOL Objects and their relationship

You have the task to identify and inspect existing BOL Objects.

1-A Take a look at the definition of BOL objects and relationships in Customizing
Which attribute structure is used
… for the order header (BTOrder)?
… for the business partner header (BuilHeader)?
What is/are the relationship name(s)
… to navigate from the business partner root object (BuilHeader) to the dependent object
BuilStandardAddress
… to navigate from the business transactions root object (BTOrder) to the dependent
object BTCustomerH
1-B What is the GenIL implementation class
… of the business partner?
… of the Business Transaction?
1-C Check the search objects in the BOL Browser
Compare the functionality of search and dynamic search objects
 BTQuery1O
 BTQ1Order
What will be the result objects of the query

CRM WebClient 5.1 Workshop Page 1

 Solution 1

Unit: IC Web Client: Inspecting BOL

1-A Use Transaction GENIL_MODEL_BROWSER ( select Component set ‘ALL’)

 Open the Hierarchy for the Root Objects
 Search for BTOrder, open hierarchy
 Open node for Attribute structure

 Open the Hierarchy for the Root Objects

 Search for Buil Header, open hierarchy
 Open node for Attribute structure

Check the relations for BuilHeader, which one could lead to the Standard Address?

…..

Check the relations for BTOrder, how do you get to the customer enhancement data?

CRM WebClient 5.1 Workshop Page 2

 1-B Use SPRO

1-C Use transaction GENIL_BOL_BROWSER (select component set ‘ALL’)

 Select search object BTQuery1O execute search (with e.g. object ID)
Doubleclick on an entry in the result list. Business Object is root object BTOrder

CRM WebClient 5.1 Workshop Page 3

  Select search object BTQ1Order execute search (with e.g. range of object IDs)

Doubleclick on an entry in the result list. Search result Object is BTQR1Order

Choose Button ‘Children’, doubleclick on Relation BTADVS1Ord

This will lead you again to the root object BTOrder

CRM WebClient 5.1 Workshop Page 4

 Exercise 2

Unit: IC Web Client: Read, Write & Create an Object

At the conclusion of this exercise, you will be able to:

 understand how generic BOL programming works

You are a developer or a functional consultant and have to write own

code to dealt with the generic BOL .

1-A Test program ZBOL_READ

 Copy the Report ZBOL_READ to your package with name Z###BOL_READ
and adjust it.
 Search for an Order.
 Adjust your program
 Debug

1-B Test program ZBOL_CREATE

 Copy the Report ZBOL_CREATE to your package with name
Z###BOL_CREATE and adjust it (report… ).
 Debug
 Find the new Order.

Solution 2

Unit: IC Web Client: Read, Write & Create an Object

CRM WebClient 5.1 Workshop Page 5

 1-A Test program ZBOL_READ
 Copy the Report ZBOL_READ to your package with name Z###BOL_READ.
 Adjust your program (search for a different order ID than used in the template so that
not everybody is changing the same order). Search for an Order ID using transaction
CRMD_ORDER
 Debug it by executing Program->Test->Debugging
core = cl_crm_bol_core=>get_instance( ).
Since the core class follows the singleton design pattern you can just have one instance of it. The
startup method takes the name auf the application you want to start as input parameter
and starts the BOL.
core->start_up( 'ALL' ).
The START_UP method takes an optional parameter IV_DISPLAY_MODE_SUPPORT, which
is set to ABAP_FALSE by default. This means the BOL follows the optimistic locking
approach, which makes all objects appearing as changeable even without a lock. The lock
is automatically requested on the first attempt to really make a change.
If the parameter IV_DISPLAY_MODE_SUPPORT is set to ABAP_TRUE the BOL follows the
strict locking approach where only locked objects appear as changeable.
Before you can work with entities you have to know them. So in general you would start your
application with the search for one or more entities. We will call this “fire a query” A
query service object will do this and returns a collection of entities that match the search
criteria given.
qs = cl_crm_bol_query_service=>get_instance( 'BTQuery1O' ).
qs->set_property( iv_attr_name = ‘OBJECT_ID'
iv_value = ‘xxxxxx' ).
result ?= qs->get_query_result( ).
After you get a list of entities from the query, you can start using them in your application such
as displaying then on a user interface, modifying them etc.
Here we work with generic interface methods, which are the same for each entity.
This coding example shows how to access entities in the query result.
ent ?= result->get_first( ).
ent = ent->get_related_entity( 'BTOrderHeader' ).
This line shows how to navigate from an entity to a related entity. In conjunction with the object
model service you can use this technique to generically navigate through all relations
defined in the model.
(Show how to access attributes in data container container_proxy->data_ref->attribute_ref)
Before an entity can be modified it must be locked. The current locking granularity of the BOL
are the root object instances. So the lock request for an entity is always delegated to the
corresponding root instance.
check ent->lock( ) = abap_true.
In case the lock was set the return value lv_success is true (abap_true )
In general you should lock an entity before you are going to modify it.
CRM WebClient 5.1 Workshop Page 6
 However, the set methods of the entity check that the entity is locked and, if not, try to do this.
The setter only modifies properties in case the entity is locked.
Now we want to modify properties of entities. This is simply done by using the set methods of
the entity. The following code fragment shows how to modify a property of BTAdminH
using the generic interface.
ent->set_property( iv_attr_name = 'DESCRIPTION'
iv_value = descr ).
Check changed flag in entity manager (core->entity_manager)
Update data container from BOL cache. This will process the modify method in the genil
component.
core->modify( ).
tx = ent->get_transaction( ).
We get access to the automatically created global transaction context. ( show that the changed
entity is in transactional context for saving)
Finally we save and commit the changes.
The given example works with or without display mode support, since the lock is explicitely set.

1-B Test program ZBOL_CREATE

 Debug it by executing Program->Test->Debugging.
 Check the message log. Find out the created order ID and compare the messages with
those shown in the application log of transaction CRMD_ORDER.

The following code example shows how to create a root entity

It is important to distinguish between the creation of root objects via a factory and the creation of
dependent or child objects with method create_related_entity( ). The first one triggers directly a
call of the underlying API, the second one not. So in the second case it is necessary to trigger the
API call explicitly via calling the modify( ) method. Without this call the created child objects will
not get saved.

* get (error) messages

data: mc type ref to if_genil_message_container.
mc = ent->get_message_container( ).
if mc->get_number_of_messages( if_genil_message_container=>mt_all ) > 0.
data: messages type crmt_genil_message_tab.
mc->get_messages( exporting iv_message_type = if_genil_message_container=>mt_all
importing et_messages = messages ).
endif.

Double click on variable messages to see the list of messages coming from the standard Order
APIs.

str = ent->get_property_as_string( 'OBJECT_ID' ).

CRM WebClient 5.1 Workshop Page 7

Variable str contains the object ID of the new transaction. Use this ID and check the order in
transaction CRMD_ORDER later

CRM WebClient 5.1 Workshop Page 8

 Exercise 3

Unit: CRM Web Client: Creating a Component with a

simple view

At the conclusion of this exercise, you will be able to:

 Create a UI component
 Create a View
 Align fields with config tool

You have the task to create a component and a view

1 Create a new UI component with name Z##H (where ## is your participant number).
2 Create a new view
a. Choose type “empty view”
b. Bind the context node to model node BTAdminH
3 Manipulate the placement of the fields by using the config tool

CRM WebClient 5.1 Workshop Page 9

 Solution 3

Unit: CRM Web Client: Creating a Component with a

simple view

1 Start the component workbench by using transaction BSP_WD_CMPWB.

a. Enter your UI component Z###H
b. Click display to check whether this component already exists (a message should
appear that this component does not exist)
c. Click create to create the UI component
i. Save all objects as a local object (in your $tmp package)

2 Create a view (for display purposes, e.g. for including it into an overview page).
a. Go to “Browser Application Structure” (top left)
b. Right click on on “Views” in the left of the screen and click “Create” (now a wizard
should come up)
i. Start: This is just for your information, click continue
ii. Define Name: Type in the name of your View (your typing is case
sensitive). Training proposal naming: “DetailsOV”
iii. Add Model Node: Choose the BOL entity BTAdminH by using the F4 and
selecting the entry BTAdminH. Put in a name in the field
“Model Nodes” to give the context node a name (Advice:
name it the same as in the BOL for identification and
maintainability reasons)
iv. Add Value Node: This is only needed if you want to add fields which can not
be retrieved from the BOL (advanced). At this point in
time leave it blank and click continue.
v. Add Model Attr: Skip this section as the attributes are automatically
retrieved by the BOL model.
vi. Add Value Attr: Adding these value attributes coheres with the value node.
Again, skip this step by clicking continue without entering
data.
vii. Links to CuCo: This step is used for binding context nodes. Again skip this
step as there is no context node available for binding.
viii. View Type: Select the view type “Empty View”
ix. Complete: Here you get an overview of your inputs. Click complete to
trigger the generation of the view.

CRM WebClient 5.1 Workshop Page 10

 3 Change the .htm file in order to make the configuration available
a. Find your view in the Browser Application Structure
b. Double click on your view (the structure of the view appears on the right)
Double click on the *.htm file on the right, edit the coding, mark all and type in the
following coding (Hint: Have a look at existing coding to copy and adjust it, e.g. in
component BT111H_OPPT, view DetailsOV)

<%@page language="abap" %>

<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<chtmlb:overviewFormConfig/>

c. Active your changes, then leave your view

4 Go to the Runtime Repository editor in edit mode and assign a component set to the
model. If you do not know which one to take, take ALL (you should choose a
component set which suits your needs. This means that the component must also
include the BOL component of which you intend to use objects from.

5 Double click on your view again and notice the configuration tab appears on the right
(if the configuration tab does not appear, please leave the workbench and enter your
new component again)

a. Click on the configuration tab to enter the config tool

b. Align your fields as you like and make yourself familiar with the config tool
c. Optional: Have a look to the advanced configuration to get familiar with the
possibilities provided by the config tool.
d. Save your changes and exit the configuration

6 In order to test your view go to the runtime repository. Click the pencil to switch to edit
mode. Open the window (click on the arrow) and assign the view to the window by
right-clicking and adding the view. After saving the changes you can click “Test” in the
left top and check if the fields are aligned correctly (don’t worry about the content of
the fields at this point in time). Alternatively you can use “F8” to start the test mode.
After testing remove the view from the window (again click edit, remove the view and
save your changes).

Exercise 4

Unit: CRM Web Client: Creating an Overview Page with

content

CRM WebClient 5.1 Workshop Page 11

 At the conclusion of this exercise, you will be able to:
 Create an overview page
 Fill the overview page with assignment blocks

1 Create the overview page

2 Assign the read-only view you have already created to the overview page
3 Ensure the correct definition at runtime and test your overview page

Solution 4

Unit: CRM Web Client: Creating an Overview Page with

content

1 Go to your UI component you have created in exercise 1 and go to the Browser

Appplication Structure and right click on View to create an Overview Page. Training
proposal naming for this viewset: ‘OverviewVS’.
2 Go to the edit mode of the Runtime Repository Editor
a. Assign the overview page ‘OverviewVS’ to the MainWindow
i. Right click on the MainWindow
ii. Click Add View and choose the OverviewPage as the default view
b. Assign your read-only view ‘DetailsOV’ to the OverviewPage
i. Open the ViewSets
ii. Open the OverviewPage which you have just created
iii. Right click on the viewarea and add your read-only view which you have
created earlier
c. Maintain the configuration of the Overview Page by double clicking on the
Overview Page and clicking on the Configuration Tab. In the configuration assign
the view to the visible assignment blocks of the Overview Page and also maintain a
label and or the kind of presentation at initial display of the Overview Page.
d. Test your UI component by clicking on test (or F8)

CRM WebClient 5.1 Workshop Page 12

 Exercise 5

Unit: CRM Web Client: EventHandling and Navigation

At the conclusion of this exercise, you will be able to:

 Add a button to the toolbar of an assignment block (view)
 React to events on the UI
 Navigate from one view to another within the same UI component

1 Create a second view for editing purposes. The goal is to navigate from your first view
(which is read-only) to this second view which will enable the user to change data.
Training proposal naming for this second view: “DetailsEF”
a. Remark: The view should be the same as the first view (fields and their alignment)
with the exception that it will only be used for editing. However, making the view
editable will be handled in a later exercise.
b. Choose View type empty View
2 Create a button with an event on your first view
3 Implement the eventhandling of the button of the first view
4 As a reaction to the click of the button implement the navigation to the second view
5 Create a back button on the second view
6 Implement the eventhandling of the back button
7 As a reaction to the click of the back button implement the navigation back to the first
view

Solution 5

Unit: CRM Web Client: EventHandling and Navigation

1 See Solution of exercise 3 if you get stuck with the creation of the second view.
CRM WebClient 5.1 Workshop Page 13
 a. You have to adjust the .htm coding due to the fact that the view is now not embedded
in an overview page but is a standalone view. Following you find the complete .htm
coding (figure out the delta as a practice)
<%@page language="abap" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%
DATA:lv_xml type string.
lv_xml = controller->CONFIGURATION_DESCR->GET_CONFIG_DATA( ).
%>
<chtmlb:config xml = "<%= lv_xml %>"
mode = "RUNTIME" />

b. Remark: As this view will be the equivalent to the first view, take into consideration
that you might want to have the same fields on the view

2 To add the button to the first view do the following:

a. Go the controller (*IMPL class) of your first view (DetailsOV) and add the following
attribute:
GT_BUTTON ; Instance Attribute; Public; Type: CRMT_THTMLB_BUTTON_T
b. Redefine method DO_PREPARE_OUTPUT of the controller and add the following
coding in order to add an edit button to the view:
DATA: ls_button TYPE crmt_thtmlb_button.

CALL METHOD super->do_prepare_output.

IF gt_button IS INITIAL.
ls_button-type = cl_thtmlb_util=>gc_icon_edit.
ls_button-enabled = abap_true.
ls_button-on_click = 'EDIT'. "#EC NOTEXT
APPEND ls_button TO gt_button.
ENDIF.

Go to edit of your *.htm file and add these lines as the first thtmlb lines, but below the
ABAP scripting:
<%@page language="abap"%>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<thtmlb:toolbar id = "HeaderToolbar"
buttons = "<%= controller->gt_button %>"
maxButtonNumber = "3"
foreignUse = "TRUE" />
<chtmlb:overviewFormConfig/>

3 To create the event handler right click on the “Event Handler” and create your event
handler by just entering a meaningful name e.g.‘EDIT’.
Remark: The wizard will create the eventhandler automatically. This includes the
generation of a prefix “EH_ON” which will be put in front of the name you enter. Also
the eventhandler is case sensitive which means you need to enter the same string as you
have defined the on-click parameter of the button in the method
DO_PREPARE_OUTPUT.
* when activating Impl Class, error message ‘do_handle_event is already redefined’
comes up. Just click on the method name and press redefine button.
4 Implement the navigation from ‘DetailsOV’ to the second view ‘DetailsEF’
a. Create an outbound plug (by right clicking and using the wizard) for DetailsOV and
choose a name which indicates where the navigation is going to (e.g.
TODETAILSEF).

CRM WebClient 5.1 Workshop Page 14

 b. Create an inbound plug for the second view DetailsEF and choose a name which
indicates where the navigation is coming from (e.g. FROMDETAILSOV).
c. Create a navigational link to link the two views
i. Go to the runtime repository editor
ii. Click the pencil in order to go to the edit mode
iii. Right click on “Navigational Links” to create a navigational link
1. Define a Name (Advice: use one string with capital letters for each
word, e.g. “ToDetailsEF”)
2. Choose a source (e.g. DetailsOV)
3. Choose the outbound plug to (e.g. TODETAILSEF)
4. Choose the target view (e.g. DetailsEF)
5. Choose the inbound plug of the target view
(e.g. FROMDETAILSOV).
d. View DetailsOV: Go to the event handler you have created and call the outbound
plug. Remark: This coding assumes that you named the outboundplug
“OP_TODETAILSEF”.
op_todetailsef( ).

e. View DetailsOV: Go to the outbound plug you have created and call the navigational
link by using the following coding.
Remark: This coding assumes that the Navigational Link is named ToDetailsEF.
view_manager->navigate( source_rep_view = rep_view
outbound_plug = 'ToDetailsEF' ).

5 The second view DetailsEF is not embedded in an overview page. As it is a standalone

view the Buttons need to be added to the Main Toolbar (like for Overview Pages
(Viewsets). In order to create the back button on the second view do the following:
Implement a BACK button on the second view by implementing an interface for the
view controller
a. Add the interface IF_BSP_WD_TOOLBAR_CALLBACK to the controller of the
view
b. Implement the method GET_BUTTONS the way you have done it earlier in the
DO_PREPARE_OUTPUT method for the first view without creating an attribute like
gt_button but instead fill the returning table rt_buttons of method GET_BUTTONS.
Additionally add one ls_button attribute as follows:

DATA: ls_button TYPE crmt_thtmlb_button_ext.

* Back button
ls_button-type = cl_thtmlb_util=>GC_ICON_PREVIOUS.
ls_button-text = cl_wd_utilities=>get_otr_text_by_alias( 'CRM_UIU_BT/BACK' ).
ls_button-on_click = 'BACK'.
ls_button-page_id = me->component_id.
ls_button-enabled = abap_true.
APPEND ls_button TO rt_buttons.
CLEAR ls_button.

CRM WebClient 5.1 Workshop Page 15

 c. Implement the method GET_NUMBER_OF_VISIBLE_BUTTONS and return the
number of visible buttons in the toolbar. (Visible means that a more buttons with a
dropdown will be put on the view if the returned visible button number is exceeded
 try it out if you like) ( if nothing maintained here, no buttons visible)

6 In the second view DetailsEF implement an eventhandler.

To create the event handler right click on the “Event Handler” and create your event
handler by just entering the same name as for the ls_button-on_click (defined in 5b).
Remark: The wizard will create the eventhandler automatically. This includes the
generation of a prefix “EH_ON” which will be put in front of the name you enter. Also
the eventhandler is case sensitive which means you need to enter the same string as you
have defined the on-click parameter of the button in the method GET_BUTTONS.

7 Implement the navigation from Details EF back to the first view DetailsOV
(respectively the overview page)
a. Create an outbound plug for the second view DetailsEF (by right clicking and using
the wizard) and choose a name which indicates where the navigation is going to (e.g.
TODETAILSOV).
b. Create an inbound plug for the read only view DetailsOV and choose a name which
indicates where the navigation is coming from (e.g. FROMDETAILSEF).
c. Create a navigational link to link the two views for the back navigation
i. Go to the runtime repository editor
ii. Click the pencil in order to go to the edit mode
iii. Right click on “Navigational Links” to create a navigational link
1. Define a Name (Advice: use one string with capital letters for each
word, e.g. “FromDetailsEF”)
2. Choose a source (e.g. DetailsEF)
3. Choose the outbound plug to (e.g. TODETAILSOV)
4. Choose the target view (e.g. OverviewPage)
5. Choose the inbound plug of the target view
(e.g. FROMDETAILSEF).

8 View DetailsEF: Go to the event handler you have created and call the outbound plug.
Remark: This coding assumes that you named the outboundplug
“OP_TODETAILSOV”.
op_todetailsov( ).

View Details EF: Go to the outbound plug you have created and call the navigational
link by using the following coding.
Remark: This coding assumes that the Navigational Link is named ‘FromDetailsEF’.
view_manager->navigate( source_rep_view = rep_view
outbound_plug = 'FromDetailsEF' ).

CRM WebClient 5.1 Workshop Page 16

 Exercise 6

Unit: CRM Web Client: Custom Controller and Binding of

context nodes

At the conclusion of this exercise, you will be able to:

 Create Custom Controllers
 Understand how to bind context nodes

You are a developer or a functional consultant and have to write own

code to deal with the generic BOL .

1 Create a custom controller

2 Bind the context node of the first view to the custom controller
3 Bind the context node of the second view to the custom controller

Solution 6

Unit: CRM Web Client: Custom Controller and Binding

of context nodes

1 Go to the Browser Application Structure and right click on Custom Controllers to start
the wizard for custom controller generation
a. Enter a name HeaderCuCo
b. Create a node BTAdminH and choose the BOL entity BTAdminH. Complete the
wizard without making any further changes
2 Go to your read-only view
a. Navigate into the CTXT class
b. Open the create method for the context node you want to bind to the custom
controller and enter the following coding.
* bind to custom controller
owner->do_context_node_binding(

CRM WebClient 5.1 Workshop Page 17

 iv_controller_type = CL_BSP_WD_CONTROLLER=>CO_TYPE_CUSTOM
iv_name = 'Z###H/HeaderCuCo' "#EC NOTEXT
iv_target_node_name = 'BTAdminH'
iv_node_2_bind = BTAdminH ).

Remark: This coding assumes, that your CustomController and Context Nodes are named
as proposed above under 1. Also replace ### with your number.

3 Do step 2 for your second (editable) view as well

Exercise 7

Unit: CRM Web Client: Building a Search View and

Search Result

At the conclusion of this exercise, you will be able to:

 Develop a UI to search for objects

1 Create a new UI component Z###S to create a search (remember to save all objects as
a local object, package $TMP or use the package that is provided by the trainer)
2 Create a custom controller which will be used to connect search and search result.
Hint: One context node must be created. This context node is used by both views, the
search and search result.
3 Create a view for the search
4 Create a view for the search result
5 Create a viewset with 1 column and 2 rows in which the search is in the first row and
the search result is in the second row
6 Put the various parts together (views into viewset, ensure binding and therefore
proper data display) and make the viewset available at runtime.
7 Hint: To make it work you have to adjust the htm files. Try to find existing SAP
standard components where you can use the coding from.
8 Implement the hyperlink for the field Description

CRM WebClient 5.1 Workshop Page 18

 Solution 7

Unit: CRM Web Client: Building a Search View and

Search Result

1 Start Transaction BSP_WD_CMPWB, enter Z###S (where ### is your group

number), click display to check if it is existing and then create if it is not existing
2 Go to the runtime repository in edit mode and add model “ALL”
3 Create a custom controller
a. Right click on custom controller give it the name QueryCuCo
b. Add a context node ‘Result’
i. Use the F4 help to find the BOL Entity BTQR1Order which is the query
result.
ii. Don’t bother about adding attributes
iii. Complete the generation wizard (remember to save as local objects)
c. Add a context node ‘BTOrder’
i. Use the F4 help to find the BOL Entity BTOrder which is the root object.
ii. Don’t bother about adding attributes
iii. Higher level node must be your query result node (select using F4) and
choose the BOL relation ‘BTADVS1Ord’ by using F4 (Remark: Entries are
case sensitive).
iv. Complete the generation wizard

4 Creating the view for the Search

a. Go back to Browser Application structure, click right on view and hit create
b. Choose any logical name (e.g. “Search”)
c. Use the F4 help to select your BOL entity.
i. Create Context node ‘Query’ and select BOL entity BTQ1Order to search
for 1Order objects
ii. Create context node ‘Result’ and select BOL Entity BTQR1Order for the
query result. The query result is used by the search to store the results which
are retrieved by the search.
d. Skip the attributes section by clicking on continue
e. Create Links to Custom Controller: Here make the following entries
i. Pick the result Context Node from the drop down listbox
ii. Enter the UI component in which you are working (Z###S)
iii. Select the Custom Controller QueryCuCo by using the F4

CRM WebClient 5.1 Workshop Page 19

 iv. Select the Context Node ‘Result’ by using the F4. We have created this
context node in step 2.b
f. Select view type empty and complete the wizard
g. Remark: after the generation by the wizard, have a look at the context nodes in your
view. Notice that the wizard has generated the binding coding for you.

5 Create the view for the search result

a. Right click on view, click create view
b. Give the new a name, e.g. “Result”
c. Enter 2 Model Nodes
i. Create Node ‘Result’ node and choose the BOL Entity BTQR1Order. Link
the node to the same named node of the custom controller
ii. Create second model node with name BTOrder and BOL entity “BTOrder”,
higher level node must be your query result node (select using F4) and
choose the BOL relation ‘BTADVS1Ord’ by using F4 (Remark: Entries are
case sensitive).Link the node to the same named node of the custom
controller.

Attention; If you have use other search objects (e.g. BTQOpp and BTQROpp,
then you have to look into table CRMC_ORLSTA_BTIL (for one order
objects) in order to find out which objects are related to the SearchResult. Use
the found object instead of the BTOrder object
For none 1Order objects you have to check the method GET_MODEL of the
implementing class of the BOL component. You can find this in IMG in the
basic settings of the GenIL Customizing
d. Choose Type Table View
e. Complete the wizard

6 Create the ViewSet

a. Right click on view and click on ViewSet
b. Choose a name, e.g. SearchVS
c. Enter 2 for Lines and 1 for Columns
d. Now you have to define ViewAreas. In these ViewAreas the search and search
result view will be put later on.
i. Give a name for the Search part and put 1,1,1,1
ii. Click the “+” icon, give a name for the Search Result part and put 2,1,1,1
e. Complete the wizard

7 Put the views and the viewset together and make it available at runtime
a. Go to the Runtime Repository Editor and go to edit mode
b. Enable the display of the ViewSet at runtime by right clicking on the MainWindow
and adding the ViewSet
CRM WebClient 5.1 Workshop Page 20
 c. Still in the Runtime Repository Editor Open the ViewSet and assign the search and
search result view to the according view areas

8 Change Inheritance of search view by inheriting from a subclass of your convenience

from class CL_BSP_WD_ADVSEARCH_CONTROLLER. In case you are following
the example for 1 Order, inherit from CL_BTSLS_ADVS_CNTRL.
Don’t change the inheritage in controller class ending with _impl, but the generated
superclass.
This will provide some basic F4 helps without additional coding efforts.
i. Open the class and go to properties
ii. Make sure that in field Superclass, the super class of your created classes is
displayed (navigate there by double clicking)
iii. Click Change Inherit. And enter the relevant class mentioned above
b. Change the inheritance of the class of the search context node
i. Open the class and go to properties
ii. Make sure that in field Superclass, the super class of your created class is
displayed
iii. Click Change Inherit. and enter the this class
CL_CRM_UIU_BT_ADVS_CN
c. Replace the htm coding of the search view by the following coding
<%@page language="abap" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<thtmlb:advancedSearch id = "advs0"
fieldMetadata = "<%= controller->GET_DQUERY_DEFINITIONS( ) %>"
header = "<%= Query->get_param_struct_name( ) %>"
fieldNames = "<%= controller->GET_POSSIBLE_FIELDS( ) %>"
values = "//QUERY/PARAMETERS"
onEnter = "SEARCH"
ajaxDeltaHandling = "false" />

Remark: The assumption is that you created an object in the 1-Order environment.
Also the assumption is that you named the context node for the search “Query”. If
you named it differently then you have to adjust your .htm coding.
d. Now you can do the configuration for the search view
e. Adjust the search result view
i. Replace the htm coding of the search result view by the following code
<%@page language="abap" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%
data: lv_xml type string.
lv_xml = controller->CONFIGURATION_DESCR->GET_CONFIG_DATA( ).
%>
<chtmlb:tableExtension tableId = "ResultList"
layout = "FIXED" />
<chtmlb:configTable xml = "<%= lv_xml %>"
id = "ResTable"
navigationMode = "BYPAGE"
onRowSelection = "select"
table = "//Result/Table"
width = "100%"
headerVisible = "FALSE"
hasLeadSelection = "TRUE"
visibleRowCount ="10"
actionsMaxInRow = "5"

CRM WebClient 5.1 Workshop Page 21

 selectionMode = "<%= Result->SELECTION_MODE %>" />

ii.
Remark: This coding assumes that the name of your search result context
node is “Result”
iii. Now you can do the configuration for the search result view
f. Adjust the Viewset
i. Replace the htm coding of the ViewSet
Remark: It is assumed that the viewarea in which you have placed the
search view is named “Search” and that the viewarea in which you have
placed the search result view is named “Result”.

<%@page language="abap"%>
<%@ extension name="bsp" prefix="bsp"%>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>

<chtmlb:pageType type="SEARCH">

<thtmlb:searchFrame showSearchFields = "TRUE">

<thtmlb:searchCriteriaFrame>
<thtmlb:searchArea>
<thtmlb:searchTagArea>
<bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'Search' ) %>"
url = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'Search' ) %>" />
</thtmlb:searchTagArea>
</thtmlb:searchArea>
</thtmlb:searchCriteriaFrame>

<thtmlb:searchResultFrame>
<bsp:call comp_id = "<%= controller->GET_VIEWAREA_CONTENT_ID( 'Result' ) %>"
url = "<%= controller->GET_VIEWAREA_CONTENT_URL( 'Result' ) %>" />
</thtmlb:searchResultFrame>

</thtmlb:searchFrame>
</chtmlb:pageType>

g. Create an event handler on search page to react to the click on the search button.
Name it as the onEnter event in the search.htm is named, e.g. “SEARCH”. In the
event handler, put the following coding (adjust it by your context node if
necessary):
DATA:
lr_qs TYPE REF TO cl_crm_bol_dquery_service,
lr_qr TYPE REF TO if_bol_bo_col,
lr_msg_srv TYPE REF TO cl_bsp_wd_message_service.

lr_qs ?= me->typed_context->query->collection_wrapper->get_current( ).
lr_qr = lr_qs->get_query_result( ).

* do you have any hits ?

IF lr_qr->size( ) IS INITIAL.
lr_msg_srv = me->view_manager->get_message_service( ).
lr_msg_srv->add_message( iv_msg_type = 'I'
iv_msg_id = 'CRM_UIU_SEARCH'
iv_msg_number = '001' ).
ENDIF.

me->typed_context->result->set_collection( lr_qr ).

9 Implementing the hyperlink for the attribute DESCRIPTION

CRM WebClient 5.1 Workshop Page 22

 a. Go to the class of the context node in which the DESCRIPTION is the attribute
b. Copy method _GET_P_XYZ (this method is a template, especially created for
these steps) to GET_P_ DESCRIPTION
Remark: You have to copy the method in order to get the parameter definition
without having to implement it manually
c. Open the method you have just created and put in the following coding
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 = 'SINGLESELECTION'. "#EC NOTEXT
WHEN if_bsp_wd_model_setter_getter=>fp_tooltip.
"Assign a value to rv_value only if you would like to
overwrite the standard tooltip
ENDCASE.

Exercise 8

Unit: CRM Web Client: Implementing the navigation from

the Search Result to the object

At the conclusion of this exercise, you will be able to:

 Implement the navigation within one UI component by using
hyperlinks

1 Implement navigation for your hyperlink for the Description so it navigates to your
Z###H component, showing the overview page
2 Optional: Implement Hyperlink for Object ID and display transaction in different
component. (Navigation via L-Shape)

Solution 8

CRM WebClient 5.1 Workshop Page 23

 Unit: CRM Web Client: Implementing the navigation
from the Search Result to the object

1 Create event handler and outbound plug

a. Create an eventhandler with the same name as in the onclick event of the hyperlink
(see 7.8. above), e.g. EH_ONSINGLESELECTION and enter following coding
As a reference for the coding of the eventhandler have a look at component
BT111S_OPPT, View “Result” and eventhandler EH_ONSINGLESELECTION
b. Create an outboundplug in your view. This outboundplug will be used for the
navigation to the target of the hyperlink. For this reason, again the name of the
outboundplug should be speaking.
In the outboundplug put the following coding where the parameter outbound_plug
is the navigational which shall be used. As a reference for the coding of the
outboundplug have a look at component BT111S_OPPT, View “Result” and
outboundplug OP_TOOPPTOV
METHOD op_toopptov.

DATA: lr_window TYPE REF TO cl_bsp_wd_window.

lr_window = me->view_manager->get_window_controller( ).
lr_window->call_outbound_plug( 'SINGLESELECTION' ).
ENDMETHOD.

c. Create Outboundplug in Window. Change the inheritance of the controller of the

window and inherit from CL_CRM_BT_S_WINDOW. Attention: Make sure you
change the inheritance at the right level! Do not change the superclass in the
generated Class *_MAINWINDOW_IMPL, but in its superclass
*_MAINWINDOW. This will give you some standard navigation implementation
which we will use later on. This standard navigation already includes the Outbound
plug OP_SINGLESELECTION
2 Implement reuse of your components
a. Implementation in the S-Component
i. Create a context node BTOrder for the Component Controller. Choose BOL
Entity BTOrder ( not necessary to bind component controller to custom
controller)
ii. Go to custom controller node BTOrder. Enter following code manually in
method CREATE_BTORDER of class *_CTXT to bind the custom
controller node to the component controller.

*Bind to component controller

owner->do_context_node_binding(
iv_controller_type = cl_bsp_wd_controller=>co_type_component
iv_target_node_name = 'BTORDER'
iv_node_2_bind = BTORDER ).

iii. Define the component interface in the Runtime Repository editor

CRM WebClient 5.1 Workshop Page 24

 1. Press Icon ‘Change’
2. Open ‘Component Interface’ node. Set Cursor on ‘Interface
Controller’ and press right mouseclick to create context. Press right
mouseclick again to create ‘Model Node’. Choose context node
‘BTOrder’ (that you have entered in the component controller) from
the Dropdown list.
3. Add an interface view. Position cursor on Component Interface,
press right Mouseclick, create Interface View
4. add your Mainwindow which you have created
5. create outboundplug. Right mouseclick, select
‘SINGLESELECTION’ from drop down listbox (if you do not have
a selection then check the inheritance of your window  see earlier
part of this exercise)
b. Implementation of the H-Component
i. In the component controller also create the following context
1. Using the wizard, create node BTOrder, choose BOL entity
BTOrder. Continue steps “attributes” and “custom controller”
without entries
2. Create second node BTAdminH, choose BOL entity BTAdminH
3. Define Dependency:
a. As a higher level context node choose the context node
BTOrder
b. Select relation BTOrderHeader from the dropdown list
c. Remark: check the classes of the context node you just
created. Here an on_new_focus method has been generated
for you which is called to update this context node (e.g.
occurs if parent object changes).
ii. Bind the context node from the custom controller HeaderCuCo to the
context node in the component controller. Insert the following code to the
method CREATE_BTADMINH in the _CTXT class of the custom
controller.
* bind to component controller
owner->do_context_node_binding(
iv_controller_type = CL_BSP_WD_CONTROLLER=>CO_TYPE_COMPONENT
iv_target_node_name = 'BTADMINH'
iv_node_2_bind = BTAdminH ).

iii. Create Inbound plug IP_DEFAULT for the Window controller class. Use
Wizzard, enter DEFAULT as name of the plug ( will be concatenated by
wizard. Leave created method empty.
iv. Define the component interface in the Runtime Repository editor
1. Press Icon ‘Change’
2. Open ‘Component Interface’ node. Set Cursor on ‘Interface
Controller’ and press right mouseclick to create context. Press right
mouseclick again to create ‘Model Node’. Choose context node

CRM WebClient 5.1 Workshop Page 25

 ‘BTOrder’ (that you have entered in the component controller) from
the Dropdown list.
3. Add an interface view. Position cursor on Component Interface,
press right Mouseclick, create Interface View
4. add your Mainwindow which you have created
5. Create inbound plug. Right mouseclick, select ‘DEFAULT’ from
drop down listbox (if you do not have a selection then check the
inheritance of your window  see earlier part of this exercise)
c. Implementation in the M-Component
i. Create a Main component which will serve as a wrapper for your H and S
component. Name it Z##M
ii. Go to the runtime repository and add component set ‘ALL’ to the model
iii. Change the inheritance of the window controller class and inherit from
CL_CRM_BT_WORKAREA_MAINWINDOW
iv. Create a context node BTOrder in the component controller. Choose the
same context node as you have defined for your search component
v. Define a component usage and include your search application in the M-
component. Goto the Runtime Repository editor, press change Icon, set
cursor on Component usage and press right mouseclick. Add Component
usage. In popup enter an ID for your Component (Z##Search), the
component name Z###S and the window ( Main window) . Add outbound
plug ‘SINGLESELECTION’
(Hint: Defining a component usage includes the definition of used
component, its window the relevant in- and outboundplugs)
vi. Do the same for the H-Component. Add inbound plug ‘DEFAULT’.
vii. Add the usages to the window (the usages are treated just like regular views
here). Right Mouseclick on MainWindow, add views. Add view from search
Component and H component.
viii. Go to the component controller of the M-Component and go to the
controller class
1. redefined method WD_USAGE_INITIALIZE
2. Bind the Context Node of the M-Component ot the Context Nodes
of your embedded components (Component which you have
included via the usage technique)
As a reference, have a look at UI Component BT111M_OPPT to see
some sample coding
DATA: lv_usage TYPE REF TO if_bsp_wd_component_usage,
lr_entity type REF TO cl_crm_bol_entity.

lv_usage = me->comp_controller->get_component_usage( iv_usage->usage_name ).

CASE iv_usage->usage_name.

* Search
WHEN 'Z##Search'.
CALL METHOD lv_usage->bind_context_node
EXPORTING

CRM WebClient 5.1 Workshop Page 26

 iv_controller_type = cl_bsp_wd_controller=>co_type_component
iv_target_node_name = 'BTORDER'
iv_node_2_bind = 'BTORDER'.

* header
WHEN 'Z##Header'.
CALL METHOD lv_usage->bind_context_node
EXPORTING
iv_controller_type = cl_bsp_wd_controller=>co_type_component
iv_target_node_name = 'BTORDER'
iv_node_2_bind = 'BTORDER'.

WHEN OTHERS.

ENDCASE.

Define the navigational link with the name according to the string you have put in the
event handler in the search component, e.g. SINGLESELECTION
3. as source define the component usage for the search
4. As target define the component usage of the header (h-component)
5.  This will handle the connection from the search to the header

Optional Part: Navigation via L-Shape

10 Implementing the hyperlink for the attribute OBJECT_ID
a. Go to the class of the context node in which the OBJECT_ID is the attribute
b. Copy method _GET_P_XYZ (this method is a template, especially created for
these steps) to GET_P_ OBJECT_ID
Remark: You have to copy the method in order to get the parameter definition
without having to implement it manually
Open the method you have just created and put in the following coding

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 = 'DISPLAY'. "#EC NOTEXT
WHEN if_bsp_wd_model_setter_getter=>fp_tooltip.
ENDCASE.

d. Create an eventhandler with the same name as in the onclick event of the hyperlink
e.g. EH_ONDISPLAY . Copy and adapt the coding that you have inserted in the
event handler EH_ONSINGLESELECT in the former exercise. Change the name

CRM WebClient 5.1 Workshop Page 27

 of the outbound plug . Pass the actual selected data collection to the outbound plug
( parameter iv_data_collection was automatically created.
method EH_ONDISPLAY.
DATA: lv_index TYPE int4,
lr_entity TYPE REF TO cl_crm_bol_entity,
lv_event TYPE REF TO cl_htmlb_event_tableview,
lr_msg_srv TYPE REF TO cl_bsp_wd_message_service.
data: lr_col TYPE REF TO if_bol_bo_col.

* get index of result list selected

CALL METHOD cl_thtmlb_util=>get_event_info
EXPORTING
iv_event = htmlb_event_ex
IMPORTING
ev_index = lv_index.

* set entity as current one

lr_entity ?= me->typed_context->result->collection_wrapper->find( iv_index = lv_index ).

CHECK lr_entity IS BOUND.

me->typed_context->btorder->on_new_focus( focus_bo = lr_entity ).

lr_entity ?= me->typed_context->btorder->collection_wrapper->get_current( ).
IF lr_entity IS NOT BOUND OR
lr_entity->alive( ) EQ abap_false.

ELSE.
CREATE OBJECT lr_col TYPE cl_crm_bol_bo_col.
CHECK lr_col IS BOUND.

lr_col->add( lr_entity ).
* call outbound plug
op_todisplay( lr_col ).
ENDIF.

e. Create an outboundplug in your view e.g. OP_TODISPLAY. This outboundplug

will be used for the navigation to the target of the hyperlink. For this reason, again
the name of the outboundplug should be speaking.
In the outboundplug put the following coding where the parameter outbound_plug
is the navigational which shall be used.
method OP_TODISPLAY.
DATA: lr_window TYPE REF TO cl_bsp_wd_window.

lr_window = me->view_manager->get_window_controller( ).
lr_window->call_outbound_plug( iv_outbound_plug = 'NAVIGATE_DISPLAY'
iv_data_collection = iv_data_collection ).
endmethod.

The Outbound plug ‘OP_NAVIGATE_DISPLAY’ of the Window controller class

already exists (due to the change of the inheritance)
The window controller class checks if there is a higher window and forwards the
call or executes it directly.

i. Add the outbound plug to the component interface in the Runtime

Repository editor
1. Press Icon ‘Change’

CRM WebClient 5.1 Workshop Page 28

 2. Add Outbound plug to component interface view. Right mouseclick,
select ‘NAVIGATE_DISPLAY’ from drop down listbox (if you do
not have a selection then check the inheritance of your window 
see earlier part of this exercise)
3. Save changes
ii. Do following settings in your M-Component.
1. Press Icon ‘Change’
2. Add Outbound plug to component interface view. Right mouseclick,
select ‘NAVIGATE_DISPLAY’ from drop down listbox (if you do
not have a selection then check the inheritance of your window 
see earlier part of this exercise)

3. Add outbound plug to the Main window

iii. In the component Usage for the search component add the outbound plug
NAVIGATE_DISPLAY. Choose context menu, select ‘Delegate to window
outbound Plug’, choose NAVIGATE_DISPLAY as outbound Plug of higher
window.

Exercise 9

Unit: CRM Web Clien

locking

CRM WebClient 5.1 Workshop Page 29

 At the conclusion of this exercise, you will be able to:
 Lock entities and therefore
 Edit entities

1 Implement the input readiness of the editable (second) view you have created

Solution 9

Unit: CRM Web Client: Enabling editing of data via

locking

1 Go to the eventhandler of the first view (DetailsOV) and add the following lines in
front of the call of the outbound plug.
Remark: With this coding it is assumed that you named your context node
BTAdminH. The locking has to be performed in order to be able to edit the view.
DATA: lr_entity TYPE REF TO cl_crm_bol_entity.

* Get the current entity

lr_entity ?= typed_context->btadminh->collection_wrapper->get_current( ).
* Lock the entity
IF lr_entity->is_locked( ) = abap_false.
lr_entity->lock( ).

* After locking, a given entity must be set again as current via find.
IF lr_entity->alive( ) = abap_true.
me->typed_context->btadminh->collection_wrapper->find( iv_bo = lr_entity ).
ENDIF.
ENDIF.

If you still encounter difficulties set a breakpoint in the I-Getter method of an attribute
in the editable view and check the return value.

Exercise 10

CRM WebClient 5.1 Workshop Page 30

 Unit: CRM Web Client: Integrating the UI component into
the Web UI

At the conclusion of this exercise, you will be able to:

 Integrate UI components into the Web UI
 Define your own roles
 Do some reuse
 Do cross component navigation

1 Make the M-component known to the Component repository

2 Define a navigational link and link your M-component to the UI
3 Test it

Solution 10

Unit: CRM Web Client: Integrating the UI component into

the Web UI

1 Publish interface view of M-Component.

a. Define the component interface in the Runtime Repository editor
i. Press Icon ‘Change’
ii. Open ‘Component Interface’ node. Set Cursor on ‘Interface Controller’ and
press right mouseclick to create context. Press right mouseclick again to
create ‘Model Node’. Choose context node ‘BTOrder’ (that you have
entered in the component controller) from the Dropdown list.
iii. Add an interface view. Position cursor on Component Interface, press right
Mouseclick, create Interface View
iv. add your Mainwindow which you have created
v. Create inbound plug. Right mouseclick, select ‘SEARCH’ from drop down
listbox (if you do not have a selection then check the inheritance of your
window  see earlier part of this exercise)
CRM WebClient 5.1 Workshop Page 31
 2 Make the M-component known to the Component repository
a. Go to spro  IMG  CRM  UI Framework  Technical Role Definition 
Define Work Area Component Repository
b. Click new entries
c. Enter your M-component
d. Use F4 to select your window
e. Give a meaningful description and save your changes
f. Then go one level deeper by marking your new entry and double-clicking “Inbound
Plug Definition”
g. Enter a Target ID with name Z_###_SR
h. Choose inbound plug SEARCH
i. Choose the same ui object type which is also defined for the standard component
(e.g. BT111_OPPT).
j. Choose object action search
k. Give a meaningful decription and save your changes
3 Define a navigational link and link your M-component to the UI
a. Go to spro  IMG  CRM  UI Framework  Technical Role Definition 
Define Navigation Profile
b. Double click on “Locial Links” and create a new entry
c. Enter a logical link ID: Z_###_SR
d. Choose type “link”
e. Enter the target ID Z_###_SR
f. Enter a title and description before saving
g. Double click on “Define Work Center Link Groups”, search for the groupyou have
created in first part of UI Workshop and then assign your link to this group
h. Go to spro  IMG  CRM  Business Roles  Define Business Role
i. Mark the Business Role you have created in the first part of the workshop and
double click “Visible Work center Group Links”
j. Check the flag for your new entry (this is required so your link will appear in the
UI)
4 Test it

Exercise 11

Unit: CRM Web Client: Enhancements

CRM WebClient 5.1 Workshop Page 32

 At the conclusion of this exercise, you will be able to:
 Enhance fields in the BOL
 Enhance fields on the UI (enhance the opportunity) by using the new
enhancement tools

1 Enhance BOL entity BTCustomer_H with an attribute with name “Field##”. This step
will be provided by the trainer
2 Make the relevant enhancement to bring the new field to the UI

Solution 11

Unit: CRM Web Client: Enhancements

1 Use the EEWB to enhance Customer_H

a. Start transaction eewb
b. Create a new project
i. Give a meaningful name for your customer_h extension
ii. Give a meaningful description
iii. Enter your local package ($TMP)
iv. Use namespace “Z”
v. Use short namespace “Z”
vi. Click save
c. Right click on your new project and chose “Create Extension”
i. Chose a meaningful name for your customer_h field extension
ii. Chose a meaningful description
iii. Chose EEW Bus. Object “OPPORTUNITY”
iv. Chose Extension Type “CUSTOMER_H”
d. In the wizard…
i. …maintain a meaningful title
ii. Mark opportunity
CRM WebClient 5.1 Workshop Page 33
 iii. Maintain the name of your new field
iv. Give a type (e.g. char)
v. Give a field length (e.g. 10)
vi. Mark “Head”
vii. Mark “search” if the field shall be relevant for search
viii. Complete the wizard and wait for the generation to be completed (takes a
while)
e. Check if the field is now available in the BOL structure
2 Enhance the standard UI component with your new field
.a Create Enhancement Set (Customizing)
.i Goto transaction SM30, enter Table/view BSPWDV_EHSET_DEF, create
Enhancement set Z_###_EHSET and enter your description

The enhancement set is a logical group for your enhancements, you can enhance
different UI components in one enhancement set.
.ii Still in transaction SM30, enter Table/View name BSPWDV_EHSET_ASG
and activate your enhancement set for your Client

.b Create Enhancement (Component Workbench)

.i Goto Transaction BSP_WD_CMPWB. On initial screen, click on Icon

To get input field for enhancement set

.ii Enter name of standard component BT111H_OPPT and the name of your
enhancement set Z_###_EHSET and Press ‘Display’.
.iii Press Button ‘Enhance Component’

CRM WebClient 5.1 Workshop Page 34

 .iv Enter your application name Z_###_OPP.

.v Confirm the next Popoup with ‘Yes’

.vi Confirm or choose the name for the repository File (.xml)

Choose Package (will be given by instructor) for your enhancement and select
transport requests if required).
Remark: Wizard generates entry in customizing table BSPWD_COMP_EXT.
.c Edit Enhancement (Component Workbench)
.i Choose the View DetailsOV that you want to enhance, choose context menu,
press ‘Enhance’

Remark: System will generate an entry in table BSPWD_CMP_C_REPL ( can be

checked in SM30 or Se16

Additionally, a new _IMPL class and a new _CTXT class will be generated by the
wizard ( as you already might know these steps from the Context Node
enhancement Wizard in CRM 5.0)
.ii Create new Context node for Customer enhancement

CRM WebClient 5.1 Workshop Page 35

 Doubleclick on view name DetailsOV, open context and context nodes. Position
cursor on ‘Context Node’ choose context menu ‘Create’

.iii In the wizard, do the following entries:

()i Define Context Node: Choose Node Name CUSTOMERH.
Context Node Type : Model Node, Choose BOL Entity BTCustomerH
()ii Skip ‘Add Model Attributes’
()iii Skip ‘Add Value Attributes ‘
()iv Skip ‘Create Links to Custom Controller’
()v Define Dependency: Choose Higher Level Context Node ‘BTADMINH’,
choose Relationship ‘BTHeaderCustExt’, mark checkbox ‘Always create
instance’
.d Change Layout (Component Workbench)
Create a new configuration (or use your existing configuration key) for the view
DetailsOV.htm. Make the additional fields visible in the Layout.

Exercise 12

Unit: CRM Web Client: Build a workcenter page

CRM WebClient 5.1 Workshop Page 36

 At the conclusion of this exercise, you will be able to:
 Build a workcenter page

1 Create a workcenter page

a. Create a workcenter component as follows Z###_WCC and define a plug on the
window (in order for the component to be able to connect to the UI)
b. Create a new view of type workcenter or homepage (your choice)
c. Add a search section to your workcenter
d. Add a create section to your workcenter
e. Add a report section to your workcenter
2 Include your workcenter page in the UI by assigning it to the NavBar profile of your
role

Solution 12

Unit: CRM Web Client: Build a workcenter page

1 Create a new component for your workcenter

a. Start transaction BSP_WD_CMPWB and create a workcenter component as
follows Z###_WCC.
b. Create an inbound plug on your window by right clicking on inbound plug and
creating it. Name the plug DEFAULT (the resulting method name will be
IP_DEFAULT).
c. In the browser application structure right-click on views and choose Create
Overview Page’. You can define the type of page when starting the configuration.
Name it ‘Workcenter’.
d. You can check Component WCC_SLS_HOME as reference
e. Go to edit mode in the runtime repository editor:
i. Right-click on usage and create a new usage with name “Search”
ii. Use component CRMCMP_GS_WC
CRM WebClient 5.1 Workshop Page 37
 iii. Choose window IFVGroupLinks
iv. Go to the component controller and redefine method
WD_USAGE_INITIALIZE
v. Enter the following lines of code
DATA: wccontext TYPE REF TO cl_bsp_wd_context_node.

CASE iv_usage->usage_name.
WHEN 'Search'. "#EC NOTEXT
TRY.
wccontext = iv_usage->get_context_node( 'WORKCENTERINF' ).
wccontext->set_s_struct( attribute_path = '' component = 'COMPONENT' value = 'Z
###_WCC' ) ."#EC NOTEXT
wccontext->set_s_struct( attribute_path = '' component = 'INTERFACE_VIEW' value
= 'MainWindow' ) ."#EC NOTEXT
wccontext->set_s_struct( attribute_path = '' component = 'GROUP_TYPE' value = 'B
B' ) ."#EC NOTEXT

CATCH cx_root.
ENDTRY.
ENDCASE.

f. Go to edit mode in the runtime repository editor:

i. Right-click on usage and create a new usage with name “Create”
ii. Use component CRMCMP_GS_WC
iii. Choose window IFVGroupLinks
iv. Add the following lines of code in the case of method
WD_USAGE_INITIALIZE
WHEN 'Create'. "#EC NOTEXT
TRY.
wccontext = iv_usage->get_context_node( 'WORKCENTERINF' ).
wccontext->set_s_struct( attribute_path = '' component = 'COMPONENT' value = 'Z
###_WCC' ) ."#EC NOTEXT
wccontext->set_s_struct( attribute_path = '' component = 'INTERFACE_VIEW' value
= 'MainWindow' ) ."#EC NOTEXT
wccontext->set_s_struct( attribute_path = '' component = 'GROUP_TYPE' value = 'A
A' ) ."#EC NOTEXT

CATCH cx_root.
ENDTRY.

g. Go to edit mode in the runtime repository editor:

i. Right-click on usage and create a new usage with name “Reports”
ii. Use component CRMCMP_GS_WC
iii. Choose window IFVGroupLinks
iv. Add the following lines of code in the case of method
WD_USAGE_INITIALIZE
WHEN 'Reports'. "#EC NOTEXT
TRY.
wccontext = iv_usage->get_context_node( 'WORKCENTERINF' ).
wccontext->set_s_struct( attribute_path = '' component = 'COMPONENT' value = 'Z
###_WCC' ) ."#EC NOTEXT
wccontext->set_s_struct( attribute_path = '' component = 'INTERFACE_VIEW' value
= 'MainWindow' ) ."#EC NOTEXT
wccontext->set_s_struct( attribute_path = '' component = 'GROUP_TYPE' value = 'C
C' ) ."#EC NOTEXT

CATCH cx_root.
ENDTRY.

h. Add the Interface views to the Workcenter Viewset.

CRM WebClient 5.1 Workshop Page 38

 i. Assign the Workcenter Viewset to the Main window

Save all changes.

j. Do the Configuration for the view ’Workcenter’.
On first screen select ‘Workcenter Page’, press continue.
Assign Infoblocks to the workcenter page and arrange them. Change title, etc.
5 Publish interface view of your workcenter Component.
a. Define the component interface in the Runtime Repository editor
i. Press Icon ‘Change’
ii. Add an interface view. Position cursor on Component Interface, press right
Mouseclick, create Interface View
iii. add your Mainwindow which you have created
iv. Create inbound plug. Right mouseclick, select ‘DEFAULT’ from drop down
listbox (if you do not have a selection then check the inheritance of your
window  see earlier part of this exercise)

2 Include your workcenter page in the UI

a. Go to spro  IMG  CRM  UI Framework  Technical Role Definition 
Define Work Area Component Repository to add your workcenter component to the
component repository
b. Create a new entry with the following data
i. Your component name
ii. The window of your component
iii. Enter a meaningful description
c. Create an inbound plug definition by marking your component entry above and
double clicking “Inbound Plug Definition”
i. Click new entries to create an entry with the following data:
ii. Target ID: Z###_WCC
iii. Inbound Plug: DEFAULT
iv. Leave Object Type and Object Action empty

CRM WebClient 5.1 Workshop Page 39

 v. Enter a meaningful description
d. Go to spro  IMG  CRM  UI Framework  Technical Role Definition 
Define Navigation Profile to create a navigational link for your workcenter
i. Create a logical link with the following data
ii. Logical Link ID: Z###_WCC
iii. Type: Workcenter
iv. Target ID: Z###_WCC
v. Leave parameter, parameter class and icon empty
vi. Enter a meaningful title (will be displayed) and description
e. Go to spro  IMG  CRM  UI Framework  Technical Role Definition 
Define Navigation Profile to create a workcenter with your workcenter link and add
it to the navigation profile
i. Create a workcenter by double-clicking on Define Workcenter and clicking
new entries
ii. Work Center ID: Z###_WCC
iii. Logical link ID: Z###_WCC
iv. Enter a meaningful title and description in the relevant fields
v. To add the workcenter to the UI assign the workcenter to the NavBar profile
1. double click “Define Profile”
2. Mark your NavBar profile that you crated in first part of workshop
3. double click on “Assign Work Centers”
4. Click new entry and enter the following data
a. Work Center ID: Z###_WCC
b. Position: 1##
3 Start the UI to test if your workcenter is displayed and working

CRM WebClient 5.1 Workshop Page 40