Work with Visual Composer from NWDS
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. ** 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+. 0.1. Now close the NWDS and open it again. (This is required to get the connection name in search list of systems of VC). 0.2. Here you can go to +window+ and open perspective +Visual Composer+. The model browser will appear in left hand side pane. Step2. 0.1. 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) 0.1. Within Model Browser you will get the DC name, +flightdata+. Now from toolbar open the Visual Composer by clicking the icon. 0.1. 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. 0.1. Please design a model like below with the following details. 0.1. Create a form called +Search Flight+ with a field called +Airline+ and a button with action SUBMIT.0.1. Search a data source +BAPI_FLIGHT_GETLIST+ from the source +ECC+, which is available in your search in option. 0.1. Drag +BAPI_FLIGHT_GETLIST+ into your design board with selection of following i/p and o/p parameters. 0.1. Create a table called +Available Flight+ with the following fields. 0.1. Create another form called +Selected Flight Details+ with the fields available in table. 0.1. Layout will be looked like bellow Step4. 0.1. 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. +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. 0.1. 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+. 0.1. 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.