SAP CRM Create New Web IC

Component using BSP WD

workbench (BSP_WD_CMPWB)
April 25, 2009 kumar Learn SAP, SAP, SAP CRM, WEB-IC, WEB-UISAP CRM, SAP CRM
Component, SAP CRM WEB-IC, sap-crm-web-ui, WEB-IC Component

Let us see how we can create a new WEB-IC component using the
BSP WD Workbench (BSP_WD_CMPWB). Once you create a
component using this work bench you need to integrate this in the
WEB-IC.

In this post let us see how we can create custom webic component.

Go to the workbench using the t-code BSP_WD_CMPWB. See the

screen shots.

Now create a ztestcmp as follows.

Click OK and it will ask for the package and transport to store the
information in the system. Just go thru that and give the necessary
information according to your system.

Once your component is created just click on test you should see
your component launch on the browser. If there is no issue you
should see an empty screen. See the following screen shot.

Now let us create a view with some input like first name , last
name and city of birth and display the input on the screen.

Let us create the first view(fview). Right click on the views and click
create a wizard will popup. See the following screen shot.
SAP CRM Create Context Node for Web
IC component
April 25, 2009 kumar SAP, SAP CRM, WEB-IC, WEB-UISAP CRM, SAP CRM Context
Node,SAP CRM WEB-, sap-crm-web-ui, Web IC Component Context Node, Web IC Context
Node

MODEL NODE(data bound to BOLobject)

Pre-requiest you need to create a empty view . How to create a view

in web-ic click here

Let us see how to create a context node Person with the first name ,
last name and city of birth for a empty view that we created.
After clicking the create a wizard pops up and we need the follow the
wizard as follows.
You need to add the BOL entity if you are using the Model node. if
this is not bound then create Value Node which is explained further
in this post.Click Continue to the next screen. Now let us add the
fields to this context node. See the following screen shot.

Now you need to click on the + sign that will take you to the next
screen where you can select the fields that you need for the screen.
Once the file is select go next and complete the wizard. You got the
attributes that you need and you added to the context node. See the
following screen shot.

Now you have the Context Node — Model node added to the View.
To pass the data between we need a higher level of linkage
(component controller or custom controller linked to this context). I
will write about that in another post.

VALUE NODE(data not bound with BOL)

SAP CRM Web IC make

view Configurable
April 25, 2009 kumar Learn SAP, SAP, SAP CRM, WEB-IC, WEB-UICRM View
Configuration, SAP CRM, SAP CRM WEB-IC, sap-crm-web-ui, WEB-IC Screen
Configuration, WEB-IC View,WEB-IC View Configuration

In this post let us see how to make the ordinary view in to

configurable.

If we create a view in the web ic the view will look like as follows.

You have only two tabs on the right hand side of the screen. This
way you cannot do a drag and drop the field in the screen. You need
to make the screen configurable. There is no check box or any radio
button that you can click and make them config. You have to go in to
the HTML code and add some code that will make them config.

Double click on the fview .htm file. That will take you to a html
editor. See the following screen shot.
Replace the above code with the following code.

<%@page language=”abap” %>

<%@extension name=”htmlb” prefix=”htmlb” %>
<%@extension name=”xhtmlb” prefix=”xhtmlb” %>
<%@extension name=”crm_bsp_ic” prefix=”crmic” %>
<%@extension name=”bsp” prefix=”bsp” %>
<%@extension name=”chtmlb” prefix=”chtmlb” %>
<%@extension name=”thtmlb” prefix=”thtmlb” %>
<%
DATA:
lv_xml TYPE string.
lv_xml = controller->configuration_descr->get_config_data( ).
%>

<chtmlb:overviewFormConfig xml = “<%= lv_xml %>”

mode = “RUNTIME” />

Now activate this html and double click on the view name. You
should able to see different tab with name as configuration. see the
screen shot below.
 Now click on the new configuration and click on the show avaliable
fields that will show all the fields avaliable to add to the screen. See
the screen shot.

SAP CRM — Create a Custom BOL

for WEB-IC
May 9, 2009 kumar SAP, SAP CRM, WEB-IC, WEB-UICRM BOL, CUSTOM BOL, IC WEB, IC
WEB BOL, SAP CRM BOL, sap-crm-web-ui, WEB IC BOL, WEB-IC

BOL — Business Object Layer.

Usually we no need to build a BOL object. We will end up changing

the existing BOL. I came across a situation that I need a screen for a
component and create a screen for add/ modify and search the Z
table.

In this post let us see how we create a custom BOL object for a Z
table. Once this bol is create we need to add this bol in the custom
view and show that on the screen. For now let us see how we can
create a custom BOL.
Let us create a z table(ZTEST_TEST_TBL) with name , age and sex.
See the following screen shot for the table.

Let us use this table and create a bol for this table to add,modify and
search data.

OK. Now we need to define two tables. One for the data elements
that we are going to use in the BOL and another for the hierarchy of
the data element that we are going to use in the BOL object. Once
these table are defined then we need to mention the class module
that we are going to use for the BOL object. All these information
are configured in the spro for this bol object. See the following
screen shot.
In the above configuration if you enter the Basic setting you will see
all the BOL object defined here. OK for our custom let us define the
bol object as ZTBOL. See the following screen.

Now select the component Definition(the first one) and click on the
new entries. Let us define the BOL component and add the details.
See the following screen.
Add a Component Set Definition. See the follow screen shot.

Now assign the Component definition to the component set

definition. See the following screen shot.

Now the BOL component is assigned to the Component Set

definition. You can assign More than one BOL component to the
component set.

SAP CRM — Create Custom Controller

for a WEB-IC Component
May 9, 2009 kumar SAP, SAP CRM, WEB-IC, WEB-UISAP, SAP CRM, SAP CRM Context
Node, SAP CRM WEB-IC, sap-crm-web-ui, Web IC Component Context Node, Web IC Context
Node, WEB-IC Component

In this post let us see how to create custom controller to a

component.

Once the custom controller is created we need to link this custom

controller in the views so that the data will be available to all views
that are linked together. See the following screen shot.

Once you clicked on the create you will get a pop up wizard that will
take you thru the process. Let us name the custom controller as
TestCuCo. See the following screen shot.

Let us go to the next screen and add the Model node. Let us add a
Model node and tie that node to the custom BOL. (if you want to
know about how to create the custom BOL Click here).
See the following screen shots for the Custom controller creation.
The whole process is like creating the view. ( for more info about the
New view creation see here Click Here )

I added tow Model nodes. I will be using this two nodes to pass data
between two views, where I will create a link while creating the view
for that particular node. Now let us go and add the attributes for
these nodes. Skip the next screen and go to Add Model Attributes.
See the following screen shot.
Click on the + sign and add the fields that you want. I added all the
fields for each node. Let us click continue all the way and complete
the process. Now our custom controller is ready for use.

Click Here and see how I created the links between the Model
node in view to custom controller model node while creating the
Search view.

SAP CRM — Web-IC Component —

Navigation between views
May 15, 2009 kumar SAP, SAP CRM, WEB-IC, WEB-UISAP CRM, SAP CRM WEB-IC, sap-crm-
web-ui, WEB-IC configuration, WEB-IC Screen Configuration, WEB-IC View, WEB-IC View
Configuration,web-ic view navigation

In this post let us create two view and navigate between the views.

First create a veiw firstview in the component. (to get more

information on view creation Click Here).

Once the view is created then make the view as configurable and add
all the fields in structure to the screen. (for more info Click Here).
Once you made the view configurable then add the following code
addition the the existing code.

<thtmlb:button id = “NextBtn”
design = “EMPHASIZED”
onClick = “NEXT”
text = “Next”
tooltip = “Second View” />

This will create a button on the first view. See the following screen
shot.

Now we added the button to the HTML. The other steps that we
need to do is add a event as we mentioned in this HTML and add the
inbound and outbound plug.

First let us add the event for the first view. The event name is NEXT
that is what we mentioned in the OnClick html. See the following
screen shot.
On now the event is created. SAP by default add EH_ON as prefix
for the events. So the event method is called as EH_ONCLICK. See
the following screen shot.

Now let us create inbound plug and outbound plug.

Inbound plug and outbound plug in a view is used to send the

control to and from the view. For example if we want to nagvigate
from first view to second view then we need to use the outbound
plug of firstview to the inbound plug of the second view that way the
navigation know where to go and what plug to use.

Let us create a inbound plug as fromsecondview and a outbound

plug as tosecondview. Just right click and give the name that will
create the inbound and outbound plugs. SAP by default put IP_ and
OP_ inforunt of the name that you are defining for the plugs. See
the following screen shots.
SAP CRM — WEB IC Create a new
search view and result view
May 9, 2009 kumar Learn SAP, SAP, SAP CCS, SAP CRM, WEB-IC, WEB-UICRM Search
View, SAP CRM, SAP CRM Component, SAP CRM VIEW, SAP CRM WEB-IC, sap-crm-web-
ui, VIEW SET, WEB-IC Component

In this post let is see how to create a search and result view and link
the view to the BOL object.

To learn about Custom BOL for a Z Table Click here.

Click Here to Go thru that post to understand how to create a New

component and the new view.

Pre request. A new Component and a BOL object. Use the above link
to learn about that before start going forward.

OK now you have a component. Let us go thru and see how we can
create a search and result views.
For search you need to have 3 views one is search view and another
is result view and a third view is the View set. In this view set you
combine the view one and two. We are going to use the ZTBOL as
our BOL object for this example.

Component Initial Preparation for Search and Result View

creation

First we need to link the custom BOL object to this Component. Go

to the Runtime Repository Editor and click on the edit. Now add the
ztbol to this component. See the following screen shot.
Now the custom BOL component (ZTBOL) is added to our search
and result component. Make sure you save this.

Search View

Create a view with the MODEL Node using the custom BOL.

Now click on the browser component structure tab and go to the

ZSRCMP component. Click on the View and right click to create a
view. The Create New View Wizard will popup and continue the
process. See the following screen shots for the process.

The Above is the name of the View.

In the above screen you need to enter the name for the model
nodes(like a abap structure name) and the BOL entity that you
created during the Custom BOL creation( for more info Click
here for custom BOL)

Select the TestSearchAdv structure that we need for the search view.
TestResult structure will be used for the result view. Now let us go to
the next screen in the wizard . Now we need to identify
the attributes fields that we need to use for this model nodes. So go
to model attributes screen. Skip the value node screen. In theAdd
Model Attributes to Modell Node click on the + sign to add the
attributes. See the following screen shot.

SAP CRM — WEB IC Search view and

Result view Navigation
June 2, 2009 kumar Learn SAP, SAP, SAP CRM, WEB-IC, WEB-UICRM Search
Navigation,CRM Search View, SAP CRM, SAP CRM BOL, SAP CRM VIEW, SAP CRM WEB-
IC, sap-crm-web-ui, WEB-IC Component, Web-ic Component Navigation, web-ic view navigation

Let us see how we can navigate between search and result view.

To learn how to create search and result view Click Here.

Once you know created the search and result view now we need to
create a search button. I added the following code in
the srviewset.htm.
<%@page language=”abap” %>
<%@extension name=”htmlb” prefix=”htmlb” %>
<%@extension name=”xhtmlb” prefix=”xhtmlb” %>
<%@extension name=”thtmlb” prefix=”thtmlb” %>
<%@extension name=”crm_bsp_ic” prefix=”crmic” %>
<%@extension name=”bsp” prefix=”bsp” %>
<%@extension name=”chtmlb” prefix=”chtmlb” %>
<%
*** Determine if search is to be collapsed
DATA lv_show_fields TYPE string.
” lv_show_fields = ‘X’.
” IF lv_show_fields EQ abap_false.
lv_show_fields = ‘true’.
” ELSE.
” lv_show_fields = ‘false’.
” ENDIF.
%>
<chtmlb:pageType type=“SEARCH” >
<thtmlb:searchFrame showSearchFields = “<%= lv_show_fields %
>”
onShowSearchFields = “TOGGLESEARCHDISPLAY”
onHideSearchFields = “TOGGLESEARCHDISPLAY” >
<thtmlb:searchCriteriaFrame>
<%
” IF lv_show_fields EQ abap_false.
%>
<thtmlb:searchArea>
<thtmlb:searchTagArea>
<bsp:call comp_id = “<%= controller-
>GET_VIEWAREA_CONTENT_ID( ‘SV’ ) %>”
url = “<%= controller-
>GET_VIEWAREA_CONTENT_URL( ‘SV’ ) %>” />
</thtmlb:searchTagArea>
<thtmlb:searchButtonsArea>
<thtmlb:button id = “SearchBtn”
design = “EMPHASIZED”
onClick = “SEARCH”
text = “Search”
tooltip = “Search” />
<thtmlb:button id = “Clearbtn”
onClick = “CLEAR”
text = “Clear”
tooltip = “Clear” />
</thtmlb:searchButtonsArea>
</thtmlb:searchArea>
<%
“Endif.
%>
</thtmlb:searchCriteriaFrame>
<thtmlb:searchResultFrame>
<bsp:call comp_id = “<%= controller-
>GET_VIEWAREA_CONTENT_ID( ‘RV’ ) %>”
url = “<%= controller-
>GET_VIEWAREA_CONTENT_URL( ‘RV’ ) %>” />
</thtmlb:searchResultFrame>
</thtmlb:searchFrame>
</chtmlb:pageType>

With the above html I added the search button on the viewset. The
button code is placed in between the view.

See the following screen shot for the button.

Now we have the button. We need to add the search event on the
viewset as well as in the search view. See the following screen shots
for event creation.
Add the following code in the searchadv view on the event handler.

METHOD eh_onsearch.
DATA: query_service TYPE REF TO
cl_crm_bol_dquery_service.
DATA: result TYPE REF TO if_bol_bo_col.

query_service ?= me->typed_context->TestSearch-
>collection_wrapper->get_current( ).
result = query_service->get_query_result( ).

me->typed_context->testresult->collection_wrapper-
>clear( ).

me->typed_context->testresult->set_collection( result ).
ENDMETHOD.

Once the code is added your component should trigger when ever
you click on the search and get the result and show in the result
view.

Now we need to add some code in the DO_HANDLE_EVENT

method of the implementation class of srviewset view. In that
method you are asking the event to be raised for the searchadv view,
so that the code in the advsearch will be called. You can directly put
the code in the viewset so you no need to do the above.

Add the following code in the DO_HANDLE_EVENT method of the

ZL_ZSRCMP1_SRVIEWSET_IMPL.

METHOD do_handle_event.
* Eventhandler dispatching
DATA: lv_viewname TYPE string,
lr_viewctrl TYPE REF TO cl_bsp_wd_view_controller.
CASE htmlb_event_ex->event_server_name.
* Added by wizard
** WHEN ‘SEARCH’. “#EC NOTEXT
* EH_ONSEARCH( htmlb_event = htmlb_event
* htmlb_event_ex = htmlb_event_ex ).

WHEN OTHERS.
lv_viewname = me-
>get_viewarea_content( ‘SV’ ). “#EC NOTEXT
IF lv_viewname IS NOT INITIAL.
lr_viewctrl = me-
>get_subcontroller_by_viewname( lv_viewname ).
IF lr_viewctrl IS BOUND.
TRY.
CALL METHOD lr_viewctrl->(‘DO_HANDLE_EVENT’)
EXPORTING
event = event
htmlb_event = htmlb_event
htmlb_event_ex = htmlb_event_ex
global_messages = global_messages
RECEIVING
global_event = global_event.

CATCH cx_sy_dyn_call_error.
RETURN.
ENDTRY.
ENDIF.
ENDIF.
ENDCASE.

ENDMETHOD.

Now your code is ready to execute had show the results. See the
following screen shot.
Now you get the result in the result view. Let me know if you have
any questions.