Saturday, 30 November 2013

7. Assigning Views to ViewSet

Let's assign Views to Viewset.

You remember that assignment are done at .... 'Runtime Respository Editor'.

Lets go to 'Runtime Repository Editor'.

Before assigning view to viewset, check whether we have already assigned 'AdvSearchView'. Remove this view from window as .






Now, goto 'Viewsets' Expand it. You will get 'SearchResultViewSet', expand it.
Select 'SearchArea', right click select 'Add View'.
A pop up window appears. select View go to F4 help. It will provide list of view, select 'AdvSearchView'.
Click on continue button.

Note* : Don't forget to save 'runtime repository editor' you need to get practice of it. You can save few trials :-) .
Similarly, add Resultview to ResultArea, and and ... don't forget..... saving it...

Just think why, it has to be saved every time when I use 'Runtime Repository Editor'??...  I am leaving it for you.

Now, Assign viewset to the window, in window panel...... save it. as

.





Now test the application. By clicking on test button.

O Noooooo, how many times, we missed one more thing to add Search Button, where we need to add Search Button. we need to add in AdvSearchView.

So, we are facilitating User to
a) To provide Search inputs (Already we designed it)
b) To Perform a action 'Clicking on search button' to fetch the results. (to be done).







6. Creating ViewSet & Defining View Areas

Lets create a view set, and assign AdvSearchView and ResultView to it.

Go to 'Component Structure Browser' Select 'Views' as.










A wizard will open before you,  click on 'Continue'. Provide the same of a ViewSet as 'SearchResultViewSet'. 

Now we have to provide view areas, and their positions. WebUI Viewset is using GRID layout.

There are different type of layout are there as row layout, flow layout.

Provide Lines as '2', Columns as '1'.









Click 'continue'. We have to define 'View Area' Define them as:








Click Continue, it will display view areas, with the defined layout as:










Click 'Complete' you have created viewset.

Notes : Viewset is same as of view which contains controller, context, and .htm file.

Now our job is to assign views to viewset, and then viewset to window.

We will perform them in next chapter.

5. Creating Result View - Table View

Go to 'Component Structure Browser' ,
        ->     Select views -> ( Right Click) Select 'Create View',

       




it opens up a wizard, Provide name of the view as 'Result View',  Click 'Continue'.

Now it's time to provide BOL Entity for Model Node, what we have to provide.
Fine, We expect result page should display result object of 'AdvancedSearchObject'
Lets check what is the result object for 'Advancedsearchobject' at GENIL_MODEL_EDITOR.











result object is 'Mobile', So we should provide BOL Entity as 'Mobile' and model node as 'ResultObject' .
Continue... till you get 'Select View Type'.
Now, Select view type as 'Table View', check 'Configurable' properties.
Continue, Complete.

Now, observe, first it creates 'Context class', then 'Context Node', then View Controller, then View Controller implementation class.

Our result view is done. Oops, there are few things still left.

First, of all we will select the fields that we want to display.









Now, click on 'New Configuration' Button.







Select the defaulted entries, what ever you have, continue.






Note*: Configuration determination has its significance when users would like to have different screen element of same UI Component.

Now select the fields which you want to display on result page. By selecting them from Available fields to Display Fields.







Select all of them for our application.

and 'Save' it by clicking on 'save' button above. Unless you save these configuration will not be save with these changes.

We have to display this view in viewset, so, we will create a viewset and will add Search view , and result view. We will perform it in next chapter




Thursday, 28 November 2013

4. Assigning View to Window

First of all let's discuss why we need to assign view to a window?

As of now, I can say from a web page(browser) we will be able to access a window not a view. So to access a view it should be assigned to a window.

Finally, to see Advanced Search View on browser, we need to assign Advanced Search View to window. Where we have to assign window to view. The place for assignments is 'Runtime Repository Editor'.

Try to understand the terms 'Run time' + 'Repository' + 'Editor'. Have you got something, if not, no worries we will discuss about it later.

Fine, Now we will start assigning view to a window.

Go to 'Runtime Repository Editor'. Expand 'Windows' you will find 'MainWindow', Who has created Mainwindow? You only created, at the time of UI Component creation.

Right click on 'MainWindow'. You should have 'Add View' option under it. If it is not the case then you are at display mode, now go to edit mode by clicking on pencil icon. Then select 'Add View'.

You will get a pop up, where Select view part you will get F4 help, there you can find the view that you have created 'AdvSearchView', select it. Click 'Continue'.

That's all you have assigned view to a window.

The resulted screen looks like.










Don't forget to check and save it. Otherwise 'Runtime repository Editor' will not get updated with latest changes.








Now, test the UI Component by clicking on test button as:



You will get screen as:





Is this what we expected. Nooo, there is lot more to do. Now it time to create 'Result view'.







3. Creating Advanced Search Page - Advanced Search View

Now, We will create a search page. Which looks like.






Search Page contains
a. Dynamic Search View can be called as Advanced Search Page
b. Result view - Table view
c. View Set

First, We will start with Creating Advanced Search Page.

Go to Web UI Component using BSP_WD_CMP_WB.

By default always, 'Component Structure Browser' will get opened.

Select 'Views' under Component (* View is a part of Component),
right click , select 'Create'.














A wizard will open before you, Click on 'Continue'.

Define Name as 'AdvSearchView' by this you are provide name for Advanced search view.Click on continue.

Click on F4 help of BOL Entity, and Select 'AdvMobileSearch'.










Now, provide name of the Model Node as SearchObject(You can have your own Model Node name, but always better to add same name as of BOL Entity). For generalizing I am providing Model Node as 'SearchObject'.








'Model Node' a type of context node, Where context node stores business data at run time. Here we are defining the structure of Context node, based on BOL Entity of type 'AdvMobileSearch'.

Another key element to know here is, since we are designing this page for searching for mobile, need to provide a search object, already we have defined 'AdvMobileSearch' as a dynamic search object in GenIL Component 'ZMOBXX' which is a part of 'ZMOB_CMPXX'.

Fine, now Click 'Continue'.

Continue. Continue, Continue.Continue (4 times). Till you get 'Select View Type'. Specify view type as 'Empty View'.

Hold on this page and Observe: 
1. How many types of views are maintained?
2. What is specified at Context Node. try to think about it, how we got it? :-)







Continue, Complete.
Observe what are the classes getting generated. Note them.
 Finally, View is created.

Oops!  Nooooo, this is an empty view, and we are about to create Advanced Search View/ Dynamic Search View.Fine, we will convert this empty view to Advanced Search Page.

Steps to convert Empty page to Advanced Search Page.

1. Specify View Controller class type as Advanced Search Controller class.

Go to View implementation class:-






Double click on it, go to properties of this class. 







Double click on this super class. Don't forget to click on this class, (most of the people will make mistake here).

Go to edit mode.  Provide Description as ' Search View for Mobile details '.
Now change the super class by 'Change Inheritance'. Provide super class as 'CL_CRM_BP_ADVSEARCH_CONTROLLER' .






Press 'enter' Button, It will ask for redefining methods message. Say 'Yes' by clicking on 'Yes' Button. Save and Activate it.

2. Specifying the corresponding 'Context Node' as Advanced Search Node.
To do this,  expand 'Context' , expand 'Context Node' you will see a context node named 'SearchObject'(This we have created while creating view). Expand it. Can you see Context node implementation class 'ZL_ZMOB_DTL_ADVSEARCHVIEW_CN00'. 









Double click on it. Go to Properties tab. Now change the immediate super class from 'CL_BSP_WD_CONTEXT_NODE' to 'CL_BSP_WD_CONTEXT_NODE_ASP'. Save and Activate it.

Now, Properties tab looks like.






Now, we have converted 'empty view' to 'Advanced Search View'.
Next, step is to write code for layout, this will be done at .htm file of view.
Goto .htm file, you can view at.














Double click on this 'AdvSearchView.htm'. Add below mentioned code inside it.









check,Save and activate it.
We are done with 'Advanced Search View'.
Next Step is to assign 'Advanced Search View' to Window(MainWindow). We will see this in next chapter





Wednesday, 27 November 2013

2. Adding Model to UI Component

First of all we will discuss, why do we need Model?

SAP CRM UI Component follows Model-View-Controller design pattern. The responsibility of a model is to retrieve corresponding business data. In SAP CRM WebUI business data resides at GenIL Object Model at run time. GenIL object Model is embedded in GenIL Component, and GenIL Component is assigned  to Component Set. We are adding this Component set as Model to our UI Component.

* We have two types of component in SAP CRM WebUI framework one is UI Component, and another is GenIL Component.

Let start how to add a model to UI Component.

Open the UI component, Click on 'Runtime Repository Editor'.













Now, add the model. Click on the pencil icon to make 'Runtime Repository Editor' into edit mode. Select 'Model' right click, then select 'Add Model'










Add Model(Component Set).







Now, you have added Model(GenIL Component Set ). check the syntax Error by clicking on check icon, and save it.

Note* : Don't forget that you need to save it by clicking on 'save' button. If not your changes will not reflect in UI Component. What ever the changes you make at 'Runtime Repository Editor' has to be explicitly saved.

* For you : try adding one more component set,  it is possible? We will discuss on this topic sometime later :-) .

Now check whether you got 'BOL Model Browser' option is available left side of workbench, if not try to open the Web UI Component again. This time you will get it.

Let us check what 'BOL Model Browser' contains. Click on 'BOL Model Browser'.

You can see GenIL Objects, and you can understand How the GenIL Object is modeled.

Now, we have done with adding model to UI Component.

Next, Create 'Advanced Search Page'.

1. Creating Web UI Component


To create a UI Component Transaction : BSP_WD_CMPWB is used.

BSP_WD_CMPWB standards for Business Server Pages, WebDnypro, Component Work Bench. Means we are using BSPs, and webdnypro concepts in our Web UI Component development.

We can use SE80 to build a Web UI Component, there we have to create individual classes and Component elements. It's a time taking process.

When we use BSP_WD_CMPWB, this workbench will help us to create dependent classes.

Lets move to creating UI Component in BSP_WD_CMPWB.











Give name of component as : ZMOB_DTL_CMPXX.

Click on 'Create' Button.

It will ask for UI Component description.








Provide the description as per your business requirement.  

By default, Window name will be MainWindow, you can change it, but right now we will use the same name

Now, wizard is creating below classes, just observe them, we are going to discuss them about it in future,
1 . Component : ZMOB_DTL_CMPXXX
3. Component Context : ZL_ZMOB_DTL_BSPWDCOMPONE0_CTXT
3. Component Controller : ZL_ZMOB_DTL_BSPWDCOMPONE0
4.  Component Controller Implementation class : ZL_ZMOB_DTL_BSPWDCOMPONE0_IMPL
6. Window Context class : ZL_ZMOB_DTL_MAINWINDOW0_CTXT
7. Window Controller  : ZL_ZMOB_DTL_MAINWINDOW0
8. Window Controller implementation class : ZL_ZMOB_DTL_MAINWINDOW0_IMPL

Finally, we have create a Component:  ZMOB_DTL_CMPXXX , and a window- MainWindow for our UI Component.


















Let us move to Adding a Component Set (What we call 'Model') in next chapter.

 By clicking on Creating Search Page

Tuesday, 26 November 2013

What are BDoc?

BDoc are abbreviated as Business Documents.

  • The flow of data to and from the CRM system takes place using BDoc (Business Documents).
  • BDocs are containers for transporting the business data
  • BDoc types describe the hierarchical structure of the business data segments of a BDoc message
  • SAP provides a number of BDoc types and services.
  • You can also create custom specific BDoc Types and services.
 The motivation for using BDoc as a data container for processing business objects that logically belong together and for transporting them as one unit is that this avoids having to process or transport several individual table entries.
  1.  BDoc messages are used for data processing within the CRM system and for data replication toward Mobile clients. BDoc messages are BDoc types filled with field values.
  2. BDoc types are defined and managed in the BDoc repository with the BDoc modeler. They are the containers/Structures of business objects.
  3. A BDoc Type consists of a header and a body.
  • The BDoc Header consists of one single segment, the so-called control segment.
  • The BDoc body consists of one or more data segments and of one error segment.
  • The Control Segments merely contains header information, whereas the individual Data Segments contain the actual table entries that make up the corresponding business object.
  • The Error Segment can be used to store error information.

The message layer uses messaging BDoc for data exchange with the CRM server application.
the synchronization layer exchanges data with mobile clients and uses Synch BDoc.
 
SAP provides a number of BDoc types and services. The sequence of services for a BDoc type is defined in the flow context which is controlled via flow tables. The services to be performed on a BDoc type depend on the available flow context of the given flow definition.
 
The SAP standard flow table SMW3FDSTD contains predefined entries that you cannot change.

Monday, 25 November 2013

Deleting Context Node of a View

Hi All,
In SAP CRM Web Client User Interface, Deleting existing context node is very simple.

Steps to Delete context node are as follows.

Navigation to the view where you want to delete context node.

Select the view, right click, select delete



Now, you will get a pop up screen as:
Now Select the context node that you want to delete.

You have alternative ways to delete context node by deleting controller methods, and commenting few lines of code. I would recommend you to use the above mentioned method, where wizard will take care of deleting context node.



Friday, 22 November 2013

Activating AET in SAP CRM 7.0 EHP1

AET(Application Enhancement Tool ) in SAP CRM WebUI has lot of useful features for developer, when extension of  existing UI Component is required.

Before using AET, AET should be activated to the User to work on AET features.

Below are the steps to activate AET.

Logon to webui: Click on personalize link









You will be navigating to Personalization page. select 'Personalize Settings'.











Now pop-up window appears. Scroll down, check the checkbox of 'Enable Configuration Mode' as:




















Then, Click on save button.


Now your AET Configurations are activated.

You can see 2 additional icons appear at webui screen as.









Now enjoy using AET.