Visual composer example - Very simple to implement
Below are the steps required for creating a visual composer application, it users two function modules / BAPI's to
get a list of users from SAP and then display further details about a specific selected user.
Step 1 - Access the Visual composer
Easiest way to do this is access your SAP portal using the URL similar to http://url.co.uk:501/irj/portal
Then replace the irj/portal section with VC
You will then be taken to the Visual composer development screen
Step 2 - Create a new model
From the menu bar select Model->New Model to create a new VC model
Step 3 - Name your new model
Give your model a name such as Userlist
Step 4 - Create an iView
Double click on your model to open it up. Nopw while ensuring the 'Compose' button is selected on the far right hand side of the screen,
drag an iView component onto your VC model. I.e. Left click and hold on the iView icon, move mouse to model window and then let go of the mouse button.
Screen should now look like this!
Step 5 - Open iView
Double click on the iView icon to open it up
Step 6 - Find data services on SAP system
Next step is to use the Find Data services functionality within VC, this can be accessed via the 'Find Data' button on the right hand toolbar.
Step 7 - Search for BAPI_USER_GETLIST
Enter the name of your SAP system (this name will have been setup by your basis / VC config team). Now choose 'Look for services by name', enter BAPI_USER_GETLIST
into the service field and press Search.
Step 8 - Drag BAPI_USER_GETLIST into your iView
Simply drag the found service onto your iView
Step 9 - Define the data service (BAPI)
A popup window should now be displayed where you will need to select all the fields required for this service.
I think most of them will automatically be selected apart from USERLIST, so click the check box for this field as well.
Step 10 - Add BAPI_USER_GET_DETAIL to your VC application
Basically repeat steps 6 to 8 for BAPI_USER_GET_DETAIL (note you may get an error about the BAPI having an invalid field name, ignore this as it will still work in the context of this example). When the define data service window pops up the following fields should already be selected.
But you also need to select the address output port and all the fields associated with this.
Step 11 - Create input form
Click and hold on the input node of the ..GETLIST data service and drag your mouse out to the left.
A red broken line should have appeared, now let go of the mouse and select 'Add Input Form'
Step 12 - Create output table view
Now do the same for the Userlist output node and select 'Add table View'
Your model should now look like this.
Step 13 - link data services together
Drag from the out of the table view to the Input of the ..GET_DETAIL data service
Step 14 - add address output form view
Add a Form View from the Address node of the ...GET_DETAIL data service and select all display fields.
Step 15 - Compile and deploy
Within the deploy button on the right hand toolbar select compile and then deploy. Alternatively you could use the compile and deploy buttons on the top toolbar.
Step 16 - Change runtime compiler
You may recieve an error at this point, saying somthing about flex. This may be solved by changing the runtime compiler to 'flex2' or even 'Web Dynpro'. Make this change then complie and deploy it again.
Step 17 - Run your VC application
Right thats it, now click on the Run "iView" link displayed in the deploy to portal window and your application should appear. Simples!
Step 18 - Populating the application screen
The application is fairly straight forward, simply enter the number of users you want to return in the max row inputfield, 'X' in the with Username field and press Submit. Then simply select one of the returned rows
on the second form and further details about the selected user should apear in the third form.
Click here to Add transition layers to your VC application so that each form is on a separate page.