How to implement JQuery autocomplete functionality...

Former Member · ‎10-08-2012

If I had to guess a majority of people today do not realize the power within SAP BSP. In this blog I want to introduce some of this power by showing how to implement autocomplete functionality like google search.

The first thing we need to do is create a new BSP application.

1. Go to SE80, select BSP Application.

2. Next create a controller class. Right click on your object and select create -> Controller

3. Next enter a name for the ABAP class that will be associated with the index.do, double click on the name and the system will automatically create the class for you.

4. Now we need to redefine the method do_request.

5. Once we have the method redefined we can start adding code. For this example add the following lines of code

data view type ref to if_bsp_page.

me->view_name = 'index.htm'.

view = me->create_view( view_name = me->view_name ).

if view is bound.

me->call_view( view ).

endif.

6. In order for this to get activated you need to add a class attribute called VIEW_NAME of type string. Activate your new class.

7. Now we need to create the index.html view that we reference in the do_request method.

8. Right-click on your application, choose create->page

9. Now lets write some HTML and show the power of BSP!!

10. First thing is to open the index.html and remove everything except the following tags at the top.

<%@page language="abap"%>

<%@extension name="htmlb" prefix="htmlb"%>

11. Add the following code

<%@page language="abap"%>

<%@extension name="htmlb" prefix="htmlb"%>

<!DOCTYPE html>

<html>

<head>

body { background:url(bg.jpg);font-family:Lucida Sans, Arial, Helvetica, Sans-Serif; font-size:13px; margin:20px;}

#main { width:960px; margin: 0px auto; border:solid 1px #b2b3b5; -moz-border-radius:10px; padding:20px; background-color:#f6f6f6;}

#header { text-align:center; border-bottom:solid 1px #b2b3b5; margin: 0 0 20px 0; }

fieldset { border:none; width:650px;}

legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}

label { display:block; margin:15px 0 5px;}

input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000;}

//.prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none;}

//.prev:hover, .next:hover { background-color:#000; text-decoration:none;}

//.prev { float:left;}

//.next { float:right;}

#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}

#steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}

#steps li span {font-size:11px; display:block;}

#steps li.current { color:#000;}

#makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px;}

#makeWizard:hover { background-color:#000;}

#shell {

width:850px;

height:auto;

background:white;

-moz-border-radius:6px;

}

//#uploader { margin: 0 auto; }

.info { text-align: center; padding: 50px 0; color: #666; font-family: Helvetica, Arial, sans-serif; }

#runtime { text-transform: uppercase; }

.info span { color: #81c468; }

#LeftPane {

/* optional, initial splitbar position */

overflow: auto;

}

/*

* Right-side element of the splitter.

*/

#RightPane {

padding: 2px;

overflow: auto;

}

.ui-tabs-nav li {position: relative;}

.ui-tabs-selected a span {padding-right: 10px;}

.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}

.ui-tabs-selected .ui-tabs-close {display: block;}

.ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}

.ui-datepicker {z-index:1200;}

.rotate

{

/* for Safari */

-webkit-transform: rotate(-90deg);

/* for Firefox */

-moz-transform: rotate(-90deg);

/* for Internet Explorer */

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.error {

font: normal 10px arial;

padding: 3px;

margin: 3px;

background-color: #ffc;

border: 1px solid #c00;

}

label.error { font-weight:normal;color:red;text-align:left;width:140px; padding-left:25px;

background: transparent url(images/cancel.png) no-repeat scroll left; }

input.button { position:absolute; top:125px; left:120px; padding:3px 6px;

border:2px solid #fff; margin:20px 0px 0px 0px; color:#3D7169;

font-family:Verdana, Arial, Helvetica, sans-serif;

background:#CCC; -moz-border-radius:5px; }

input.button:hover { background:#009FAA none repeat scroll 0% 0%; color:white; }

</style>

<%= runtime->session_manager->header_script( ) %>

$(document).ready(function(){

});

$(function() {

$("#vendor").autocomplete({

source: function( request, response )

{

$.ajax(

{

url: "Vendorlookup.htm",

dataType: "json",

data: {term: request.term},

success: function(data){

response($.map(data, function(item){

return{

label: item.name,

id: item.id };}));}

});

},

minLength: 2,

select: function(event, ui)

{

$('#vendor_id').val(ui.item.id);

}

});

});

</script>

</head>

src="http://jqueryui.com/themeroller/themeswitchertool/">

</script>

</td>

</tr></table></td></tr><tr>

<tr>

<label for="vendor">Vendor</label>

<input id="vendor" type="text" class="required"/>

<input id="vendor_id" type="hidden" />

</div>

</td></tr></table></td></tr></table></td></tr><tr>

</body>

</html>

12. You need to import a background image. Right-click your BSP application and choose create->MIME Object->Import. Select the file and it will upload to the server.

13. Now we need another view that will handle the autocomplete lookups.

14. Right-click on view and choose create. Enter the values Page: VendorLookup.htm, pagetype = Page with Flow Logic

15. Once the view is created remove everything from the layout tab.

16. Now navigate to the Event Handler tab, choose OnRequest.

17. Now we get to add the ABAP code to do the lookup and return the information back to the BSP page.

data: ls_field type ihttpnvp,

lt_field type tihttpnvp.

data: q type string.

DATA: it_vendor type STANDARD TABLE OF lfa1,

wa_vendor like LINE OF it_vendor.

DATA: json_string type string.

TYPES: BEGIN OF t_vendor,

id type i,

NAME type NAME1_GP,

END OF t_vendor.

data: it_return type STANDARD TABLE OF t_vendor,

wa_return type t_vendor.

request->get_form_fields( CHANGING fields = lt_field ).

loop at lt_field into ls_field.

if ls_field-name = 'term'.

q = ls_field-value.

endif.

ENDLOOP.

CONCATENATE '%' q '%' into q.

select LIFNR name1 name2 name3 from lfa1 into CORRESPONDING FIELDS OF TABLE it_vendor where name1 like q or name2 like q.

if it_vendor is NOT INITIAL.

CONCATENATE '[' json_string into json_string.

data: count type i.

count = 1.

data: lines type i.

DESCRIBE TABLE it_vendor LINES lines.

loop at it_vendor into wa_vendor.

data count_str type string.

clear count_str.

count_str = count.

CONDENSE count_str.

if lines > 1.

if sy-tabix = lines.

CONCATENATE json_string '{"id":"' wa_vendor-LIFNR '","name":"' wa_vendor-name1 '(' wa_vendor-lifnr ')' '"}' into json_string.

else.

CONCATENATE json_string '{"id":"' wa_vendor-LIFNR '","name":"' wa_vendor-name1 '(' wa_vendor-lifnr ')' '"},' into json_string.

endif.

else.

CONCATENATE json_string '{"id":"' wa_vendor-LIFNR '","name":"' wa_vendor-name1 '(' wa_vendor-lifnr ')' '"}' into json_string.

endif.

count = count + 1.

ENDLOOP.

CONCATENATE json_string ']' into json_string.

else.

json_string = '[{}]'.

endif.

CALL METHOD _M_RESPONSE->IF_HTTP_ENTITY~SET_CDATA

EXPORTING

DATA = json_string.

18. Now activate everything and give it a try. Right-click on index.do and choose test. this will open the browser.

Start typing a vendors name and you should see something like...

How to implement JQuery autocomplete functionality in SAP BSP

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z