Overview 
Entering values via dropdown lists is fast and user-friendly. The S10 Framework supports constant value lists, automatic generation of value lists based on the SAP Data Dictionary and also dynamic generation in a separate ABAP method.

Example 1: Constant value list

       

To do this, define an attribute in the ABAP class for the value of the drop-down list, e.g.

data:
  orderlimit type string.

And in HTML a <label> as well as a <select> element with one <option> element per value:

<label class="label">Order amount</label>
 <br />

 <select class="inputselect" name="orderlimit">
     <option value=""></option>
    <option value="0">No limit</option>
    <option value="1000">1 000 EUR</option>
    <option value="50000">50 000 EUR</option>
 </select>

If you want to call an ABAP method immediately by selecting it from the drop-down list, you can do this with the "onchange" addition:

 <select class="inputselect" name="orderlimit"  onchange="S10Apply('select_orders')">

The ABAP method called in this example is "select_orders". The selected value is automatically available in the variable "orderlimit". Details on the function "S10Apply" can be found in the article S10Apply().

With the addition "required" you can achieve that before sending the screen data to the application; a check is made that the user has selected a value:

<select class="inputselect" name="orderlimit" required>


Example 2: Data dictionary-based value list

ABAP
 data:
 land1 type kna1-land1.

HTML
<label class="label output" name="land1"></label><br>
 <select class="inputselect" name="land1" style="width: 240px;"
      data-s10dropdownlist='land1@dropdownlist'>
 </select>

The S10 framework builds the dropdown list according to the value tables T005 and T005T listed in the data dictionary for "kna1-land1". Details can be found in the article s10dropdownlist().

Value lists that are not compiled from customizing tables but are constantly stored in the data dictionary can also be displayed in this way. For example, the following values are stored in the SAP Data Dictionary for "document status" with the corresponding language-dependent texts:


ABAP
 data:
 bstat type bkpf-bstat.

HTML
<label class="label output" name="bstat"></label><br>
 <select class="inputselect" name="bstat" 
   data-s10dropdownlist="bstat@dropdownlist" data-s10options="hidekeys"
   style="width:240px"></select>




Example 3: Value list generated dynamically in an ABAP method

 

Here, the contact persons stored in the SAP system for a customer are offered for selection as a drop-down list. The value list is built up dynamically in an ABAP method depending on the current client number. The following should be noted:

  • Create the value list as a class attribute of the type "string "
  • It is best to then define a build method for this, in which the import parameters determine which other attributes the value list is dependent on. This ensures that the value list is rebuilt if an import attribute has changed.
  • The value list consists of lines separated from each other by line feeds
  • Each line consists of the value, a tab character and the text
  • A line feed at the end of the list is ignored
  • The value list is automatically sorted by the S10 framework for display, by key values if they are displayed, otherwise by the text

ABAP
data:
   kunnr        type kna1-kunnr,
   parnr        type knvk-parnr,
   ddl_contacts type string.

methods:
   build_ddl_contacts
     importing
       kunnr        type kna1-kunnr
     exporting
       ddl_contacts type string.

  method build_ddl_contacts.
    clear ddl_contacts.

    data: knvk type knvk.

    select parnr namev name1 from knvk
        into corresponding fields of knvk
          where kunnr = kunnr.

      ddl_contacts =
          ddl_contacts
          && knvk-parnr
          && cl_abap_char_utilities=>horizontal_tab
          && knvk-namev
          && | |
          && knvk-name1
          && cl_abap_char_utilities=>cr_lf.

    endselect.

  endmethod.

HTML
<select class="inputselect"  name="parnr" data-s10dropdownlist="ddl_contacts" data-s10options="hidekeys"></select>

The value list is automatically rebuilt as soon as the customer number has changed. 

 

General S10 options for dropdown lists

  • data-s10options="hideKeys"
    The key value is not displayed. 
     
  • data-s10options="noEmptyEntry"
    No empty entry is added to the beginning of the value list

A combination of the two options is denoted by   data-s10options="hideKeys,noEmptyEntry".

Components: S10 Framework