You are on page 1of 22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

SAP CRM Technical Tutorials by Naval Bhatt.


SAP CRM tutorials for all : Please feel free to contact me on naval.k.bhatt@gmail.com. This blog is for helping those who are facing issues in CRM technical and functional . Not for career counselling , Please refrain from sending those questions . Please do some research before asking any question . Please don't copy and paste the requirements which you get from your client . YOUR URGENCY IS NOT MY PROBLEM :-) I will take my sweet time in replying . Home My Intro SAP Job Websites Document pdfs ... Middleware concepts ...

Basics of OOABAP... Interview Questions ....

Practical BOL programming ..

SAP CRM related links ...

Tuesday, December 18, 2012

Search

The CRM 7 Web UI Creating Views The CRM 7 Web UI Creating Views
In this example we create 2 views in one window to select a business partner and then to search for orders for that business partner. In a second session, Ill show you, once the orders are found, how one can click on a hyperlink on the order number in the rseults found to then display some details of the line items for that order. So lets get started. Go to transaction BSP_WD_CMPWB and create a component.

Followers:Join to get regular update


Join this site
w ith Google Friend Connect

Members (82) More

Already a member? Sign in

My other blogs SAP BPM & Workflow tutorials My travel experiences Me & my pursuit of happiness Wandering hermit Photography

When prompted provide a window name.

Join me on my photography journey


Naval Bhatt Photography .. on Facebook

Blog Archive
http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html 1/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

2014 (2) 2013 (57) 2012 (155) December (2) The CRM 7 Web UI Creating Views
This will create a whole lot of classes and other stuff which you can add to a relevant transport. Once created youll see the following:

ENHANCEMENT SET CONCEPT November (8) October (1) September (15) August (14) July (26) June (18) May (11) April (9) March (28) February (13) January (10)

Now create the first view. This view will be for entering a business partner number that we will use as our search criterion: To create a view for the selection criteria right click on View and Create. This will start a wizard, we will use a Value Node for our Business Partner field:

pow ered by

Popular Posts CRM Tables and Transaction Codes TABLE NAME DESCRIPTION BUSINESS PARTNERS
http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html 2/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

BUT000 BP: General data Contains Business Partner Number, Partner Category, Partne... Getter - Setter methods in Web UI Using Get and Setter methods you can retrieve data to field and set specific data to field. Using Get_I method you can make your field ... Important methods in CRM web UI Important methods in CRM web UI or component programming . View Impl class methods: DO_CONFIG_DETERMINATIO N : The method is for run tim... SAP CRM interview questions Q 1. What is the typical landscape for a CRM project? What is the maximum number of landscapes that you have worked on in a project. ... SAP CRM Most useful BADIs (Updating) . ORDER_SAVE BADI is used at the time of saving order. 1st called CHECK_BEFORE_SAVE Useful for check if the values are filled as expect... An introduction about IPC SAP CRM uses IPC to determine pricing information when creating a business transaction, such as a quotation, sales order, service proce... One order framework One Order Object Model The CRM One Order documents are created in transaction CRMD_ORDER. The Header table that is updated by the crea... Concepts of BOL programming : Get_current Get_current and get_iterator how does it works? The data you enter on the Web UI gets saved in the database tables via BOL Entities ... How to use messages in CRM web UI In general there are 4 different
http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html 3/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

Sources for error messages: Important Info Message BSP Framework messages UI Framework mes... Create a Tree view display in CRM web UI This blog gives the steps to create a Tree view display in CRM web UI. Below is a screen shot of the sample implementation. ...

Total Pageviews

2 5 6 2 8 5
Follow by Email
Email address... Submit

We chose to create the view with a sample button, but didnt use it in the end, so you can also select the radiobutton that says Without Buttons:

Now we create a Viewset. Note that when we created this viewset we were only going to have 2 views Search and Result, hence the 2 rows (one column since the one view will be below the other). It can always be modified later by adjusting the generated html, or if you know upfront how many views you will have in your window make sure you do it correctly when creating the view set.

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

4/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

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

Up to now we have been in the Component Structure Browser. We now need to go into the Runtime Repository Editor. We go here to define the BOL model/s we are going to use and also to assign each view to a view area.

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

5/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

To define the BOL model we are going to use right click on Models and add the BOL model you want to use. We will use BTBP which includes the Business Partner BOL entities as well as the BT Order BOL entities.

Now assign the views created to the view areas created. Note that at this stage we have only created the searchCriteria view. Once the other views have been created you can repeat this step. Note below that the searchCriteria view is assigned to the view area that we have called search:

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

6/22

3/21/2014
Now add the Viewset to the Window:

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

Go out of the transaction and and back in again to be able to see the BOL browser. Note BOL Model Browser extra button. This also enables the BOL entities to be available when you select them as model nodes in your views:

Now we can create View for the result. Go back to the Component Structure Browser, right click on Views and Create New View. Name this view resultList. Follow steps in the wizard as follows. Note that here we use a model node BTAdminH which contains data about the order header and we create the view as a table view since there may be many orders that we will display in our results.

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

7/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

Now that 2 views have been created searchCriteria and resultList we can configure what we want to be shown on these views. To start double click to the searchCriteria view in the Component Structure Browser. Then click on the Configuration tab on the right side of your screen. Click on Show available fields and select the Customer field. Click on the plus button. This will put the field onto the screen. You can hold ALT and then select the field to change some of the field properties and decide exactly where you

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

8/22

3/21/2014
would like the field.

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

We now want to change this field from an ordinary input field into a field with a drop down. To do this click on the View Structure tab. Open the Context folder, and open the BPNUMBER folder, then open the Attributes folder. Right click on the BPNUMBER attribute and select Generate Getter and Setter Methods. Once that has been done double click on the GET_P_BPNUMBER node and create the method:

This will provide a blank implementation of this method where you can now put in the following code: M E T H O Dg e t _ p _ b p n u m b e r . C A S Ei v _ p r o p e r t y . W H E Ni f _ b s p _ w d _ m o d e l _ s e t t e r _ g e t t e r = > f p _ f i e l d t y p e . r v _ v a l u e=c l _ b s p _ d l c _ v i e w _ d e s c r i p t o r = > f i e l d _ t y p e _ p i c k l i s t . E N D C A S E . E N D M E T H O D .

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

9/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

To provide values in the drop down list we need to do a few things. Firstly we need to put an instance attribute in the context class for the relevant attribute. Double click on the class shown just below the attribute node. In my case the class is called ZL_ORDER_S_SEARCHCRITERI_CN00:

Click on the attributes tab and create an attribute called GR_DDLB. It must be type ref to CL_CRM_UIU_DDLB.

Once this is done we need to implement the GET_V method for the context attribute. Go back to the View Structure and implement the GET_V_BPNUMBER method. If it is still grey double click it and create the method on the prompt.

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

10/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

This will create a blank implementation of the method in which you can now put the following code: m e t h o dG E T _ V _ B P N U M B E R . d a t a :l t _ d d l bt y p eb s p _ w d _ d r o p d o w n _ t a b l e , l s _ d d l bt y p eb s p _ w d _ d r o p d o w n _ l i n e , l s _ b u t 0 0 0t y p eb u t 0 0 0 , l t _ b u t 0 0 0l i k et a b l eo fl s _ b u t 0 0 0 . I Fg r _ d d l bi sn o tb o u n d . c r e a t eo b j e c tg r _ d d l b e x p o r t i n g i v _ s o u r c e _ t y p e=' T ' . *g e tt h ev a l u e s . . . * K E Y 1T y p e sC H A R 4 0 * V A L U E 1T y p e sT E X T 8 0 *i n i t i a l l ya d ds p a c et ot h ed r o p d o w nf o rw h e nt h e r ei sn ov a l u et h e r e l s _ d d l b k e y=s p a c e . l s _ d d l b v a l u e=s p a c e . a p p e n dl s _ d d l bt ol t _ d d l b . s e l e c t*f r o mb u t 0 0 0i n t ot a b l el t _ b u t 0 0 0 w h e r et y p e=1 . i fs y s u b r c=0 . l o o pa tl t _ b u t 0 0 0i n t ol s _ b u t 0 0 0 . l s _ d d l b k e y=l s _ b u t 0 0 0 p a r t n e r . c o n c a t e n a t el s _ b u t 0 0 0 p a r t n e rl s _ b u t 0 0 0 i n i t i a l sl s _ b u t 0 0 0 n a m e _ l a s t i n t o l s _ d d l b v a l u es e p a r a t e db ys p a c e . a p p e n dl s _ d d l bt ol t _ d d l b . e n d l o o p . e n d i f . i fl t _ d d l bi sn o ti n i t i a l . g r _ d d l b > s e t _ s e l e c t i o n _ t a b l e (l t _ d d l b) .

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

11/22

3/21/2014
e n d i f . e n d i f .

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

r v _ v a l u e h e l p _ d e s c r i p t o r=g r _ d d l b . e n d m e t h o d . Alternatively you could do a F4 value help on the field by implementing the code as shown below. This uses search help BUPAP. If you want to use an Advanced Search Help you cannot use this this is for simple search helps only. When using a search help you would not implement the get_p method. Note that you use the struct preface for the field name when using a Model node, for a Value Node do not use the struct preface. M E T H O Dg e t _ v _ b p n u m b e r . D A T A :l s _ m a pT Y P Ei f _ b s p _ w d _ v a l u e h e l p _ f 4 d e s c r = > g t y p e _ p a r a m _ m a p p i n g , l t _ i n m a pT Y P Ei f _ b s p _ w d _ v a l u e h e l p _ f 4 d e s c r = > g t y p e _ p a r a m _ m a p p i n g _ t a b , l t _ o u t m a pT Y P Ei f _ b s p _ w d _ v a l u e h e l p _ f 4 d e s c r = > g t y p e _ p a r a m _ m a p p i n g _ t a b . l s _ m a p c o n t e x t _ a t t r=' B P N U M B E R ' . l s _ m a p f 4 _ a t t r=' P A R T N E R ' . A P P E N Dl s _ m a pT Ol t _ i n m a p . A P P E N Dl s _ m a pT O l t _ o u t m a p . " ' s t r u c t . b p n u m b e r ' .

C R E A T EO B J E C Tr v _ v a l u e h e l p _ d e s c r i p t o rT Y P E c l _ b s p _ w d _ v a l u e h e l p _ f 4 d e s c r E X P O R T I N G i v _ h e l p _ i d =' B U P A P ' i v _ h e l p _ i d _ k i n d =i f _ b s p _ w d _ v a l u e h e l p _ f 4 d e s c r = > h e l p _ i d _ k i n d _ n a m e i v _ i n p u t _ m a p p i n g =l t _ i n m a p i v _ o u t p u t _ m a p p i n g=l t _ o u t m a p . E N D M E T H O D . Now we need to configure our result list. Remember that we decided that we want this to display as a table, so the configuration will look quite different. From the Model or Value node structure, you can decide which fields you want to display and you can provide titles for each column. There are a few other things that you can do, but Ill leave that up to you to discover.

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

12/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

The following screenshots show some editing done to the htm created for our views. Because the view group context does not exist in our scenario, the code to determine display mode would cause a run time error. We therefore need to comment out this line of code. To do so we embrace it with the following tags: <% %> as below: To find the htm file, double click on the node shown under the View Layout section:

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

13/22

3/21/2014
Youll see the following htm file:

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

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

Even though we have done very little so far, we are ready to test that what we have done so far

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

14/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

works. Note that no data will be displayed in our results as yet. To test return to the UI Component Workbench home screen (transaction bsp_wd_cmpwb) for your component and press the test (wrench) icon:

After logging into the CRM web UI you should see the following in your browser. The drop down for customer will contain all the BP records in BUT000, so its not that useful. Maybe the search help described above would be more appropriate.

Stage One complete, lets now get some functionality going! We need to create a button to invoke the search once we have selected a Business Partner. To do that we need to edit the htm file in the searchCriteria view, by inserting the following code: < t h t m l b : b u t t o ni d =" S e a r c h " o n C l i c k=" S E A R C H " t e x t =" S e a r c h " e n a b l e d=" T R U E " t o o l t i p=" S e a r c hf o rT r a n s a c t i o n s " d e s i g n =" E M P H A S I Z E D "/ > The screenshot of the htm file is shown below:

We have a search in one view with results being displayed in another view, so we need some way

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

15/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

to communicate between the two views. Because these views are in the same component we can use the Custom Controller for this purpose. To create a Custom Controller right click on the Custom Controller node on the left part of the screen and click Create:

Follow the wizard providing a name for the custom controller. It is unfortunate that I called mine btadminh as this will be a little misleading later on, sorry! When prompted in the wizard to add a model node add BTAdminH as it will be this node that we will use to communicate between the views.

The remainder of the screens in the wizard can be left blank. The BTADminH model node needs to be added to the searchCriteria screen as well. To do this

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

16/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

go to the searchCriteria view and right click on the Context Nodes node. Then click create. Follow the wizard and create a model node with the name BTADMINH utilizing BTADminH BOL entity. The remainder of the screens in the wizard can be left blank:

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

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

17/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

We now need to create an Event Handler to respond to clicks to the Search button that we have created. Right click on the Event Handler node and click Create:

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

18/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

Give the Event Name SEARCH. This will create a blank implementation of a method EH_ONSEARCH which will be triggered when the button is pressed. Implement the following code in the event handler. This will populate the BTAdminH model node of the resultList view via the custom controller. The results will then be viewed in the table you created. M E T H O De h _ o n s e a r c h . D A T Al r _ i t e r a t o rT Y P ER E FT Oi f _ b o l _ b o _ c o l _ i t e r a t o r . D A T Al r _ b oT Y P ER E FT Oi f _ b o l _ b o _ p r o p e r t y _ a c c e s s . D A T Al v _ b pT Y P Eb u _ p a r t n e r . D A T A :l r _ r e s u l tT Y P ER E FT Oi f _ b o l _ e n t i t y _ c o l , e n t T Y P ER E FT Oc l _ c r m _ b o l _ e n t i t y , e n t h T Y P ER E FT Oc l _ c r m _ b o l _ e n t i t y , l r _ q sT Y P ER E FT Oc l _ c r m _ b o l _ q u e r y _ s e r v i c e . l r _ i t e r a t o r=m e > t y p e d _ c o n t e x t > b p n u m b e r > c o l l e c t i o n _ w r a p p e r > g e t _ i t e r a t o r () . I Fl r _ i t e r a t o rI SB O U N D . l r _ b o=l r _ i t e r a t o r > g e t _ f i r s t () . I Fl r _ b oI SB O U N D . l r _ b o > g e t _ p r o p e r t y _ a s _ v a l u e (E X P O R T I N Gi v _ a t t r _ n a m e=' B P N U M B E R ' I M P O R T I N Ge v _ r e s u l t =l v _ b p) . l r _ q s=c l _ c r m _ b o l _ q u e r y _ s e r v i c e = > g e t _ i n s t a n c e (' B T Q u e r y 1 O ') . l r _ q s > s e t _ p r o p e r t y (i v _ a t t r _ n a m e=' B P _ N U M B E R ' i v _ v a l u e =l v _ b p) . l r _ q s > s e t _ p r o p e r t y (i v _ a t t r _ n a m e=' M A X _ H I T S ' i v _ v a l u e =' 1 0 ') . l r _ r e s u l t=l r _ q s > g e t _ q u e r y _ r e s u l t () . e n t? =l r _ r e s u l t > g e t _ f i r s t () . W H I L Ee n tI SB O U N D . e n t h? =e n t > g e t _ r e l a t e d _ e n t i t y (' B T O r d e r H e a d e r ') . m e > t y p e d _ c o n t e x t > b t a d m i n h > c o l l e c t i o n _ w r a p p e r > a d d (e n t h) . e n t? =l r _ r e s u l t > g e t _ n e x t () .

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

19/22

3/21/2014
E N D W H I L E . E N D I F . E N D I F . E N D M E T H O D .

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

Finally before we test again we need to create a binding between the custom controller and the resultList view:

We should now be able to test our search out and obtain some results for our search:

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

20/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

The creation of the Display Item button on our search results, to show the transaction number in blue (a hyperlink) and to display the items in the view below will be done in the next session. Look forward to it coming in the future!

Posted by Naval Bhatt at 9:06 PM Labels: The CRM 7 Web UI Creating Views

2 comments:
Prakash J December 23, 2013 at 4:12 AM Hi, This is a very useful post. I appreciate your efforts. I've a question here. Please explain what exactly is TYPED_CONTEXT here in the statement... me>typed_context->bpnumber->collection_wrapper->get_iterator( ). Reply

Md Rajib Imran January 27, 2014 at 6:47 AM Nice post. carry on for more sharing. You can have a look at SAP Bangladesh for more info on SAP Implementation, BASIS, Cost, Project management. Reply

Enter your comment...

Comment as:

Google Account

Publish

Preview

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

21/22

3/21/2014

SAP CRM Technical Tutorials by Naval Bhatt.: The CRM 7 Web UI Creating Views

Newer Post

Home
Subscribe to: Post Comments (Atom)

Older Post

Naval bhatt 2012. Awesome Inc. template. Powered by Blogger.

http://sapcrmtutorial.blogspot.in/2012/12/the-crm-7-web-ui-creating-views.html

22/22