You have a z-table in your ERP system which you would like to display on the CRM WebUI in its own Assignment Block. Let's say this table even depends on one of the objects of CRM; the Business Partner (henceforth called just partner or BP).
This guide describes step by step a possible way to do this. Please note that there might be other, easier ways and what is described below is what I found out and it worked for me so I thought it could work for others too.
Before I start a development, I always like to know all the technical data and write them down so I don't have to look them up all the time during developing.
I said before this z-table has data which belongs to partners. This means I have to find out the Overview Page for the BP details display - there we will eventually add our assignment block.
1. Create a Structure and Table type
We need a structure and a table type in the CRM system which look the exact same as the table in the ERP system. Let's assume this table in the ERP system contains the favorite color, meal and sport of a partner (not saying that makes much sense but it's easier if we have an example). So the structure could look something like this:
2. Create Component & Window
To add a new, custom assignment block must we create our own component (with a window) and view. This is done in the BSP Component Workbench - transaction BSP_WD_CMPWB.
Type in a suitable name for the Component and choose create (also remove the Enhancement Set, if existing). Follow the instructions and name the Window.
3. Create View & Context Nodes
Display the newly created component and in the tree on the left side right-click on View and choose Create View. Do changes in following steps of the wizard:
- Define Name: type in a suitable name for the view
- Add Model Node: because the data from the z-table is dependent on the BP we have to add a Context Node which has the corresponding BOL entity. The Business Partner header data has the BOL entity BuilHeader. Add the model node PARTNER with that BOL Entity.
- Add Value Node: we need a value node for our z-table (which will become a node for a table in Select View Type). Simply type a name for the node.
- Add Model Attributes to Model Node: here we decide which attributes of the partner (header data) we would like to have. In our case we only need the partner number. Add it with the plus-icon.
- Add Value Attributes to Context Node: here we have to add every component (field) of our table. This is best done with the plus-icon. Choose the correct Context Node (the Value Node for the z-table) and type in the structure we created in Step 1. Press enter, mark all attributes and add them.
- Select View Type: choose View Type "Table View" and the Context Node we created for the z-table in Add Value Node.
Finish the wizard.
4. Set Runtime Repository
The tree to the left side in the Component Workbench can display different things. The normal one is Browse Component Structure. In order to change the Runtime Repository click on Runtime Repository Editor and after click on the edit-icon. We have to do three steps:
- Add View to Window: Open the Window node, find your window, right click on it and choose Add View. Select the view you created in Step 3.
- Add Window to Component Interface: Open the Component Interface node, right click on Interface View and choose Add. Select your Window and View.
- Add Component Usage: Open the Component Usages node, right click on Component Usage and choose Add Interface View. Select the Interface View you added above.
Save the Runtime Repository with the disc-icon.
5. Bind Model Node with Component Controller
Go back to Browse Component Structure.
The Model Context Node we created in Step 3 now needs to be bound to the Component Controller. This will make sure that when our z-component is called all the attributes from the BOL entity are passed to our node.
Double click on Component Controller, right click on Context Node and choose Create. Follow the wizard and create the same Model Node as in Step 3 (preferably also with the same name).
Double click the View we've created in Step 3. Open the node Context and double click on the Context Implementation Class. Locate the method CREATE_PARTNER (Model Node) and go into its coding. Add the binding to the Component Controller at the end of the method as shown below:
6. Create refresh Event for dependent Value Node
Our table is dependent on the partner - therefore do we need to create an Event that refreshes the table display whenever the partner changes.
Double click the view, open the nodes Context and Context Node, open the Table Node ZBP_FAVS and double click its Implementation Class. Go into edit mode and add a new method called ON_NEW_FOCUS. Open the method-attributes (puzzle-piece-icon) and tick "Event Handler for" (see the box below). Go to the Parameters and add the parameters of the Event by clicking on the icon with the small blue square. We leave the coding empty for now.
Now we have to call this Event Handler. Go into the Context Class (just like in Step 5) and open the coding of method CREATE_ZBP_FAVS (Value/Table Node). Add the call of method ON_NEW_FOCUS depending on the Model Node as shown below:
7. Get data from the ERP System
Now our component is ready to be filled with data. So we have to create a RFC function module in the ERP system which later will be called from the CRM system.
The only two parameters needed are the Partner Number (as importing) and the table with the favorite things (as exporting). Code a simple SELECT statement which gets the data from the database table.
8. Fill the Table Node with data
The next step is to get the data from the ERP system into the CRM. We do this in the Event Handler method ON_NEW_FOCUS which we created in Step 6 (so that every time the partner is changed, the new data from the ERP system is selected). Following coding is a possible way to do it:
9. Display data
Unfortunately we're not done yet. I don't know why, but the standard created HTML-page doesn't display the Table Node we filled with a data collection in Step 8. Therefore I programmed my own workaround.
Go to the HTML-page which is located under View Layout. Double click to get into the HTML editor.
Please note: the html-table you'll find in the coding below _considers the user's Layout settings_ but it's not the official coding - just something I figured out myself.
10. Add assignment block to Overview page
As our last step, we need to add our z-component to the Overview page of the Business Partner. Go to the BSP Component Workbench - transaction BSP_WD_CMPWB and display component BP_HEAD.
First we have to make our z-component available in this component. Go to the Runtime Repository Editor and choose edit mode. Open ViewSets, ViewSet BP_HEAD/BPHEADOverview and ViewArea OverviewPage. Right-Click on the ViewArea and choose Add View. Type in the z-component as BSP-Application and choose the correct View. Save the Runtime Repository with the disc-icon.
Go back to the Component Structure, locate View BPHEADOverview and double click it. Change into the Configuration tab and select the Configuration with your Role Key (or copy the configuration to your Role Key). At the right side under Available Assignment Blocks you'll now see our z-component. Mark it and add it with the arrow pointing right to the Displayed Assignment Blocks. Give it a suitable Title and choose the Load Option.
*And once you saved the configuration, you're done!*