SAP BSP to auto select region when user selects country using HTML and Javascript
If you have not created a BSP before you will need to look the following example of creating a simple BSP application just to get an
understanding of the basic components. You can then use the information below to build a BSP which allows a user to select a country and it will
automatically populate the region key. You could also then use the knowledge you are about to learn to make it work the other way and when
the user selects a region it could remove all countries that are not within the selected one.
The basic concept here is that you build a HTML drop down assigning the country key to the 'value' attribute and the region key to the
'id' attribute. Then when the user selects the dropdown option the javascript captures it and uses the 'id' to set the second
region HTML dropdown.
--Properties Tab
Just leave as standard
--Layout Tab
<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<html>
<head>
<script language="JavaScript" type="text/javascript">
function getRegion(selval)
{
var line = selval.selectedIndex;
var region = selval.getElementsByTagName("OPTION")[line].id;
if ( region != "") {
document.getElementById("region").value = region;
}
}
</script>
</head>
<body>
<label for="country" >Country:</label>
<select onchange="getRegion(this);" data-placeholder="Choose a Country..."
id="country" name="country" value="<%= country%>">
<option value="" selected="selected">Select a Country</option>
<% loop at it_country into wa_country. %>
<option id="<%=wa_country-regionid%>" value="<%= wa_country-land1%>"
<% if country eq wa_country-land1. %> selected="selected" <% endif. %> >
<%= wa_country-landx%></option>
<% endloop. %>
</select>
<br><br>
<label for="region" >Region:</label>
<select id="region" name="region">
<% if region is initial. %>
<option value="" selected="selected">Select a Region</option>
<% endif. %>
<% loop at it_region into wa_region. %>
<option value="<%= wa_region-regionid%>" <% if region eq wa_region-regionid. %>
selected="selected" <% endif. %>><%= wa_region-text%></option>
<% endloop. %>
</select>
</body>
</html>
--Page Attributes Tab
region TYPE STRING html field to store region country TYPE STRING html field to store country it_country TYPE TT_COUNTRY Country codes with associated region it_region TYPE TT_REGION Region codes wa_country TYPE T_COUNTRY work area for country wa_region TYPE T_REGION work area for Region
--Type Definitions Tab
types: begin of t_region, regionid(4) type c, text type string, end of t_region. types: tt_region type STANDARD TABLE OF t_region. types: begin of t_country, land1 type land1, landx type landx, regionid(4) type c, text type string, end of t_country. types: tt_country type STANDARD TABLE OF t_country.
--Event Handler Tab - OnInitialization
* Select Country Dropdown Values from SAP country table
SELECT *
FROM t005t
INTO CORRESPONDING FIELDS OF TABLE it_country
WHERE spras EQ 'EN'.
SORT it_country BY landx.
********************
*Build region table*
********************
* Creates an entrty for each region code, you can create as many of these
* as you want but should really be stored in a SAP Ztable oince you understand
* how it works
wa_region-regionid = 'EU'.
wa_region-text = 'Europe - EU'.
APPEND wa_region to it_region.
wa_region-regionid = 'ROTW'.
wa_region-text = 'Rest of the World'.
APPEND wa_region to it_region.
wa_region-regionid = 'UK'.
wa_region-text = 'United Kingdom'.
APPEND wa_region to it_region.
wa_region-regionid = 'ASIA'.
wa_region-text = 'Asia'.
APPEND wa_region to it_region.
***
************************
*Link Country to region*
************************
loop at it_country into wa_country.
* The following only assigns a few countries as this should really be stored in a
* SAP Ztable. Others are then simply assigned to the ROTW id
case wa_country-land1.
when 'GB'.
wa_country-regionid = 'UK'.
when 'FR'.
wa_country-regionid = 'EU'.
when 'GR'.
wa_country-regionid = 'EU'.
when 'US'.
wa_country-regionid = 'ROTW'.
when 'ZA'.
wa_country-regionid = 'ROTW'.
when 'HK'.
wa_country-regionid = 'AISA'.
when others.
wa_country-regionid = 'ROTW'.
endcase.
MODIFY it_country from wa_country.
endloop.
***
--Test code
Save and activate the code and then execute it. You should then be able to select a country and it will default
in the region/global area.
See here for more BSP examples