You can follow him at @ :  http://twitter.com/juanpedrov

His documentation goes as follows.

Finally let me tell you that in part got based in the explanation of this article: https://www.sdn.sap.com/irj/scn/wiki?path=/display/CRM/How+to+display+a+z-table+in+an+assignment+block

That article explain how to display a z table without using all the BOL concept that I’d like to understand. I tried to used a standard BOL (PRPAdvSearch) but it didn’t work. Maybe I should try creating my own BOL, maybe next time.

Overview: This document pretends to show how to add a new view at the BP_ACCOUNT factsheet. In particular, for this example, a table with the information of PPR (partner product rage) for a particular business partners (the one at the factsheet).

• 1) Create z structure and table with the fields needed to show at the factsheet

• 2) Create a new component

• 3) Add BP_APPL model at Runtime Repository Editor

• 4) Create a view with:
• a. BuilHeader model node.
• b. Value node.
• c. Model attributes: for this example only the BP number.
• d. Value attributes: select the fields wanted to show, indicate the z structure created at step 1.
• e. Select table type “Table view” with the value node.

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.

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.

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 the Add Model Attributes to Modell Node click on the + sign to add the attributes. See the following screen shot.

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.

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.

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.

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)

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.

Access:

  You need to have IC manager  in your profile. This scripting is configuration only. You can customize this and do some coding. But for a plain vanilla you really no need to do that. See the following screen shot for the menu.

 

Use of the interactive script:

             Interactive script is used to navigate the screen in a particular way how business wants. If the call center agent needs to work on 10 screen and by asking questions he/she has to determine which screen he/she needs to go. Some time the agent can go to the wrong screen. By scripting we can navigate to the right screen with the answer provided by the customer.

In this post I am going to do a sample as follows.

           We are going to create a script with welcome script and go to a  Identification screen and go to good bye screen.

We need to do the following two steps.

step 1. Create all the dialoge that needed for the scripting.

step 2. Create the script and use the already created dialogue.

Step I. Create Dialogues.

  See the following screen in the script editor to create a dialogue.

 Click on the question and give a question ID and description on the bottom of the screen and enter a question. See the following screen shot.

once the question is entered now you need to add the button area for yes or no question on the script. see the following screen shot.

As soon as you click on the button you will see the following box apper(button box).  see the following screen shot.

Now let us add Yes and No button. Drag and Drop the button from the right hand side to this box. See the following screen.

Click save and your Dialogue is saved. Now create a good bye dialouge like the above one.

Create one more dialogue as above for good bye.

Let us create a new dialogue as

We are ready to create the dialogue.

Step II. Create script

Let us create the script and put the dialogue in an sequence.