Skip to Content

I have seen people struggling about how to create custom component to meet their need. Before you go into the component development you should have a good understanding of BSP programming and while writing this blog I am assuming that the target audience is comfortable in BSP. So I won’t go into details about CRM Web UI Architecture and the MVC concept.

 

In this Blog I will cover how to create a component with a simple view.

 

Step 1: Start the component workbench by using the tr. BSP_WD_CMPWB or via the SAP Menu as shown below.

 

image

 

Step 2: Enter the UI component Name

 

image

 

Make sure that the component name you are trying to use already does not exist by clicking on the Display button (a message should appear that this component does not exist).

 

Step 3: Hit the create button and system will prompt for the Description and window name. Give the name and hit ok (I prefer not to change the system proposed name). System will prompt you to save several times so be patient because behind the scene system is generating different classes for you.

 

image

Step 4: Go to Runtime repository in edit mode, Right Click on the Models and select Add Model.

 

image

 

If you don’t know which one to take, take component set ALL (You should choose a component set which suits your needs i.e. component must also include the BOL component which you intend to use objects from).

 

image

 

Make sure that you always hit save button after any changes in Runtime Repository.

 

image

 

Step 5: Now we want to create an empty view. For that go to Component Structure Browser, right click on the node view and hit create.

 

image

 

System will start a wizard. Hit continue.

 

image

 

Define Name: This is case sensitive

 

image

 

Add the Model Node: Choose the BOL entity by using F4 help as per your requirment. I am selecting BTAdminH . Put in a name in the field “Model Nodes” to give the context node a name (Advice: Name it the same as the BOL for identification and maintainability reasons)

 

image

 

Add Value Node: This is only needed if you want to add fields which can not be retrived from BOL. Skip this step.

Add Model Attr: Skip this section as the attribute will be automatically reterived by the BOL.

Add Value Attr: Adding value attributes coheres with the value node. Skip this section.

Link to CuCo: This step is used for binding context nodes. Again skip this step as there is no context node available for binding.

View Type: Select the view type “Empty View”.

Complete: Trigger the generation of your view by clicking the complete button. Once Saved find your view in browser and double click on the view.

 

image

 

One thing you must have observed that in the above picture there is only one tab called View Structure as highlighted but there is no configuration tab. In order to get the configuration tab we need to modify the *.htm file. Double click on the DetailsOV.htm file.

 

The system generated code will look like this.

 

image

 

Modify the code as shown below and activate it.

 

image

 

Step 6: Start your BSP workbench again by using Tr. BSP_WD_CMPWB and open your component. You will notice the configuration tab for your view.

 

image

 

Step 7: Click on the configuration tab to enter the configuration tool.

 

image

 

Click the Edit button and add the fields from the available fields align them as per your requirement and save it.

 

image

 

Step 8: In order to test your view go to run time repository. Switch to edit mode. Assign your view to window by right-clicking and adding the view. Set the window as default and save the runtime repository. Once saved click on test.

 

image

 

After testing remove the view from the window. Make sure that you save your runtime repository every time you do some changes.

 

So far this is what we have achieved:

  • We have created a component ZVKH.
  • We have created a view DetailsOV and assigned the BOL entity BTAdminH to the view.
  • In configuration we have adjusted the view and added some fields to display on the screen.

image

 

In my next Blog I will cover CRM 7.0 How to –5B Create an Overview Page with content.

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. chandrakant kulkarni
    Hello Vikash,

    Thanks for such a blog. Really helpful. I have a requirement in which instead of empty form i need to create a table form. It would be of great help if you could tell the changes that are to be made. Should i change only in the form. Or do i need to make any changes in the other blogs as weel . i.e 5b, 5c etc….

    REGARDS
    CHANDRAKANT KULKARNI

    (0) 

Leave a Reply