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.
Step 2: Enter the UI component Name
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.
Step 4: Go to Runtime repository in edit mode, Right Click on the Models and select Add Model.
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).
Make sure that you always hit save button after any changes in Runtime Repository.
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.
System will start a wizard. Hit continue.
Define Name: This is case sensitive
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)
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.
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.
Modify the code as shown below and activate it.
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.
Step 7: Click on the configuration tab to enter the configuration tool.
Click the Edit button and add the fields from the available fields align them as per your requirement and save it.
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.
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.
In my next Blog I will cover CRM 7.0 How to –5B Create an Overview Page with content.