5A_Create a Custom Component With a Simple View

7/28/2019 5A_Create a Custom Component With a Simple View

1/19

Create a custom component with a simple view

I have seen people struggling about how to create custom component to meet their need. Before you go into the component developmentyou 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 wont 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.


2/19

Step 1: Start the componentworkbench by using the tr.

BSP_WD_CMPWB or via the SAP Menu

as shown below.


3/19

Step 2: Enter the UI componentName


4/19

Make sure that the componentname 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 buttonand 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.


5/19

Step 4: Go to Runtime repositoryin edit mode, Right Click on the

Models and select Add Model.


6/19

If you dont know which one totake, 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).


7/19

Make sure that you always hitsave button after any changes

in Runtime Repository.


8/19

Step 5: Now we want to create anempty view. For that go to

Component Structure Browser,right click on the node view and

hit create.


9/19

System will start a wizard. Hit continue


10/19

Define Name: This is casesensitive


11/19

Add the Model Node: Choose theBOL entity by using F4 help as

per your requirment. I am

selecting BTAdminH . Put in aname in the field Model

Nodes to give the context node

a name (Advice: Name it the sameas the BOL for identification

and maintainability reasons)

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


12/19

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

Add Value Attr: Adding value attributes coheres with the value node. Skip thissection.Link to CuCo: This step is used for binding context nodes. Again skip this stepas 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.


13/19

One thing you must have observedthat in the above picture there

is only one tab called View

Structure as highlighted butthere 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.


14/19

The system generated code willlook like this.


15/19

Modify the code as shown belowand activate it.

C


16/19

Step 6: Start your BSP workbenchagain by using Tr. BSP_WD_CMPWB

and open your component. You

will notice the configurationtab for your view.


17/19

Step 7: Click on theconfiguration tab to enter the

configuration tool.

Click the Edit button and addthe fields from the available

fields align them as per yourrequirement and save it.


18/19

Step 8: In order to test yourview go to run time repository.

Switch to edit mode. Assign your

view to window byright-clicking and adding the

view. Set the window as default

and save the runtime

repository. Once saved click on

test.


19/19

After testing remove the viewfrom the window. Make sure that

you save your runtime

repository every time you dosome changes.

So far this is what we have

achieved:

o We have created acomponent ZVKH.

o We have created a viewDetailsOV and assigned

the BOL entity BTAdminH

to the view.o In configuration we have

adjusted the view and

added some fields to

display on the screen.

5A_Create a Custom Component With a Simple View

Documents

Transcript of 5A_Create a Custom Component With a Simple View