How to implement JQuery autocomplete functionality in SAP BSP
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>
<style type=”text/css”>
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>
<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css” type=”text/css” />
<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery.ui.all.css” type=”text/css” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js“></script>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js“></script>
<script type=”text/javascript” src=”http://bp.yahooapis.com/2.4.21/browserplus-min.js“></script>
<%= runtime->session_manager->header_script( ) %>
<script type=”text/javascript”>
$(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>
<body leftmargin=”0″ marginwidth=”0″ topmargin=”0″ marginheight=”0″ offset=”0″>
<center><table border=”0″ cellpadding=”0″ cellspacing=”0″ height=”100%” width=”100%” id=”backgroundTable”><tr>
<td align=”center” valign=”top”><table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”800″ id=”templateContainer”><tr>
<td align=”center” valign=”top”><table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”800″ id=”templateHeader”><tr>
<td class=”headerContent”>
<script type=”text/javascript”
src=”http://jqueryui.com/themeroller/themeswitchertool/“>
</script>
<div id=”switcher”></div>
</td>
</tr></table></td></tr><tr>
<td align=”left” valign=”top”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”800″ id=”templateBody”>
<tr>
<td valign=”top” class=”bodyContent”>
<table border=”0″ cellpadding=”20″ cellspacing=”0″ width=”100%”><tr><td valign=”top”>
<div id=”shell”>
<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>
<td align=”center” valign=”top”><table border=”0″ cellpadding=”10″ cellspacing=”0″ width=”600″ id=”templateFooter”>
<tr><td valign=”top” class=”footerContent”></td></tr></table></td></tr></table><br /></td></tr></table></center>
</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…
Too cool! I have got to find something to use this in.
Thanks!!
Looks good!
Can this be incorporated with a dropdown with said values/vendor names (just in case the user doesn't know and can just select)? So like a combobox?
Good to see some new and nice features in old BSP 😉 .
Hello guys,
thats exactly what I was looking for.
But 2 questions.
How do I get/read the selected value?
And is there a possibility, to mark the entered characters bold in drop-down-list?
thx
and one furhter thing....is it possible, to make this functionality possible without access to the internet? I mean calling the scripts local?
Hi guys, has anyone tried this for search views in CRM web UI as well? E.g. BP_HEAD_SEARCH/MainSearch? I tried to use the autocomplete function for the account name field (C32_W39_V132_search_parameters[1].VALUE1) getting values from an AJAX json call, however, it didn't work. The logic itself is fine since it works without any issues on a Z BSP application outside CRM UI. Thanks & regards Wolfgang