Skip to Content
Author's profile photo Chandan Jash

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.     

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Paul Snyman
      Paul Snyman
      Thanks for taking the time to create this article, it's pretty clear you've taken the time to think this through.
      Author's profile photo Former Member
      Former Member
      Chandan,

      Can you explain the next steps to deploying. Like, add to SCR, check-in, activate/release and transporting mechanism? Also please let me know where does my models reside at each of the above stages.

      Thanks,
      Kiran

      Author's profile photo Chandan Jash
      Chandan Jash
      Blog Post Author
      Hi Kiran,

      The development approach is same like other type of project from NWDS. You can develop locally or by using NWDI. For local development please check my blog Step 5. There you will get a Deploy button, from there you can deploy in J2EE engine but before that you need to configure the J2EE engine in your NWDS. But for NWDI based development from the starting you need to create your project in a track and you can do check in and build and deploy.
      For help please check the below links-
      Guide to Develop Applications using NWDI - Part 1
      Guide to Develop Applications using NWDI - Part 2