Enter the credentials and click *Log on*. On the right hand side click on *Create New Model*. Select *Composite View.* One feature of Visual Composer7.1 over Visual Composer 7.0 is the reusability. We can reuse models that are created in the same Development Component (DC). Click on *New*, give some name for the *Development component*, for this demo, use *map_bank_demo*. Click *Ok*. Give the name of the Model as *Yahoo_Map*. On right hand side, click on *Search*. In the Search in you will find all the systems that are connected to your server. For this demo I am selecting *IDES(R3)* as the IDES system which is the perquisite or you can select any other ECC system in which the data is present for the above two mentioned Bapis. In *Search* for put *bapi*bank** as the search criteria. For *Type* select *Bapi/RFC* Click on *Search*. In the *Result* panel you will find many Bapis that have come as the result of the search, search for *BAPI_BANK_GETLIST*. Select it and drag it to the left section. By this we have taken one Bapi and now we will test it so that we can make sure that this is working fine. Right click on it and select *Test Data Service*. Click on the *Inpu*t field in the top left and put the input as *BANK_CTRY: US* *MAX_ROWS: 0* Click *Test* On right hand side you will see the result, if somehow you are not able to see any data and see some ERROR than please check in the back end that what is the input parameter that you have to pass, it can be different from *US* that I entered. Click *Close*. After testing the Bapi we move to next *User Interface*. *Left click* on the *Input* field on the Bapi that is there on the board and drag the mouse to some place and release the click. You will see a *pop up* window gets displayed, select *Form View*. This is will be acting as the layout by which we can pass the input parameters to the Bapi. On the *Input Form* that you have created just now, you will find one in field on the left, select it by pressing the left click of the mouse and drag the mouse to some position and release the click, again a pop comes and select *Start Point*. This will be starting point of the application that we are designing. Left click on the *BANK_LIST* field on the Bapi which is on the board and drag the mouse and release it, pop will come and select *Table View*. In this table view we will see all the result that will come after executing the Bapi, like the one that we got when we tested the Bapi. By this Bapi we get the list of the Banks that are present in the country* US*, now to get the address of any particular we need one more Bapi i.e. *BAPI_BANK_GETDETAIL*. This Bapi takes the input parameters from the first Bapi BAPI_BANK_GETLIST. Lets test this Bapi, right click on it and do the same process that we did for the first one. This time the input are: *BANKCOUNTRY: US**BANKKEY: 021000089* (This I got from the execution of the first Bapi BAPI_BANK_GETLIST), may be you will get something different depending upon the type of data that you are having. Again if you get some Error on testing this Bapi then cross check the input field in the backend. Select the *Input* field of the *BAPI_BANK_GETDETAIL* and map it with the out field of the *BANK_LIST*, like shown in the picture. +Right click on the line+ i.e. *out* and*input* and select *Map Data*, pop up window come and give the input as shown in the picture. Select the *ADDRESS *filed of the *BAPI_BANK_GETDETAIL* and drag the mouse and release it, select *Form View*. You will see a pop up with all the fields selected. Click on *Close button*. This view gives the address of the selected Bank. Select the* out* field of the newly created form and drag the mouse and release it and select *End Point*. +Right click on the+ line i.e. joining *out* and end select *Configure*, on the right hand side give the event name as *End*. By this we have designed our process now the main part comes, when we select any bank, we want to see that place in the Yahoo Map, for that we need to do the following steps. *Save* the model at this point. Type the URL *maps.yahoo.com*You will see that it takes *Address, City and State* as the parameter.So we have to pass the same thing in order to get the desired location on the map. Lets put *India**Gate, Delhi, India* as the input and click on *Go*. You will see that the map is showing the desired output. Copy the URL and analyze that what we have to pass in which order.Keep these things in mind because later on wee need these. Click on the *Layout tab* located at the bottom left part of the screen. Select the Button and drag it to the *BANK_ADDRESS* table as shown in the picture. Select the +newly created button+ and click the *Configure* on the right hand side to configure the properties of this button, so that we can create some actions associated with this button. In the *Text field* change the name of the* Button *as Show Map.
Click on the +dots of Action input field+, a pop up window comes up.
Click on the ‘*+*’ sign (Add action), select *Hyperlink*, click on the function corresponding to *Condition* input box.
In the *Dynamic Expression Editor* remove the true do the following steps carefully.
Type =”*http://maps.yahoo.com/#q1= (http://maps.yahoo.com/#q1=)”* and click *Check* button.
You will see that up to now things are ok, now we have to include the other parameters.
Put ‘*&*’ symbol after the URL and now we include *Bank Name*, click on *Data Fields* on the right and select *BANK_NAME*
The URL is now *=”http://maps.yahoo.com/#q1=“&@BANK_NAME*
click on the *Check* button to see whether expression is correct or not.
If error comes then check the expression, while for this demo it is working fine.
Till now we have given the name of the Bank, before adding other parameters we have to give the space, use *&” “* to give the space.
Look to the URL now *=”http://maps.yahoo.com/#q1=“&@BANK_NAME&” “*When we want to include any field we have to give *&* symbol.
Put *&* after the URL to include city, select the *CITY* from the *Data Fields*.
The URL at this point is *=”http://maps.yahoo.com/#q1=“&@BANK_NAME&” “&@CITY** *
Last thing to include is *Bank Country*, put *&” “* and go to the *BANK_LIST* and select the *BANK_CTRY* field, the URL is now *=”http://maps.yahoo.com/#q1=“&@BANK_NAME&” “&@CITY&” “&BANK_LIST@BANK_CTRY*
Click on the *Check *button and when the expression is valid then move next else look to your URL and correct it.
The complete URL is *=”http://maps.yahoo.com/#q1=“&@BANK_NAME&” “&@CITY&” “&BANK_LIST@BANK_CTRY*
Copy the URL and click *OK* In the URL input field paste the final URL and remove the data from the Condition input field and put *true* in that place.
Click *Close*. Save the *Model*. Click on the *Deploy* button on the right hand side panel. If there is error it will come, try to fix that and on successfully deploying of the model you will see this picture. Click on *Yahoo_Map* under *Html/Flex*, I prefer *Flex*.
Input the data as *US and 0*
Click on the *Show Map Button*, pop up will come, saying that *+select a particular location+*, because the data is not correct in the backend i.e. this problem is coming. If you have the correct data then map will come without any break. Select the nearest place from the window and click *Go*.