Here I wish to share how you can start your UI development using Visual Composer of CE 7.1.1 SP3 and what configuration you need to do to interact with backend systems like ECC, CRM, BI etc. Now consider an example which will help you for better understanding. Suppose we want to search available flight for particular Airline from VC base UI where available flight data will come from backend ECC system. Now see the following steps

Step1.

• Open the NWDS (SAP Enhancement Package 1 for SAP NetWeaver Developer Studio 7.1 SP03, assumed it is installed in your local system).
• Go to window and select preferences. Preferences wizard will appear now select Destination Configuration -> R/3 Configuration. To add the R/3 system click on add button and provide the input data with a connection name. Here I am considering the connection name like ECC.
• Now close the NWDS and open it again. (This is required to get the connection name in search list of systems of VC).
• Here you can go to window and open perspective Visual Composer. The model browser will appear in left hand side pane.

Step2.  

• Now to create a visual composer development component go to file -> New -> Other -> Visual Composer -> Visual Composer Development Component and provide the required data like below and click on finish. Here flightdata is the name of Development Component(DC) (Local Development)

• Within Model Browser you will get the DC name, flightdata. Now from toolbar open the Visual Composer by clicking the icon.
• To create a new model click on link Create New Model and a wizard will appear, here you please select Composite View as model type and put the model name like, flightavailabilitysearch and select the Development Component which you have created. Then click OK button.

Step 3.

• Please design a model like below with the following details.

• Create a form called Search Flight with a field called Airline and a button with action SUBMIT.
• Search a data source BAPI_FLIGHT_GETLIST from the source ECC, which is available in your search in option.

• Drag BAPI_FLIGHT_GETLIST into your design board with selection of following i/p and o/p parameters.

• Create a table called Available Flight with the following fields.

• Create another form called Selected Flight Details with the fields available in table.

• Layout will be looked like bellow

Step4.

• Save the model flightavailabilitysearch. Then click on Deploy Task from Task Panel. Now compile the model and next task is to deploy the model but before the deployment you need to configure the Server with host name and instance number.
• Destination configuration: Open the URL http://<Host>:<Port>/nwa. Then go to the path:>> SOA Management-> Technical Configuration -> Destinations. Create a destination of type RFC Destination and the destination name should be the same as you have used for creation of destination from NWDS. So please use the name ECC here and put the required data for successful connection to backend system.

Step 5.

• Now this is the time to run your application. From NWDS after successful deployment you will get the two links (one based on Flex and another one is based on Html) with message Completed Successfully.

• Click any one link and the new browser will open with the UI which you have created in layout. To test please put the airline name like AA, AC, LH and click on Search button or without putting any test data just click on Search button. The available flights will come in table and the bellow form will present details of selected flight.