We start with the following application: The user logs in, enters a customer number, presses the "Display" button, and then receives the customer's name and address. 

Logon

 

Entering the customer number and pressing the "Display" button

 

Name and address display  

We implement an ABAP class "customer" and three HTML files "logon", "start" and "display" , which correspond to the three screenshots above.

1.  The ABAP class "customer"

We create the class locally in an ABAP program with the name "ZZS10_CUSTOMER", whereby the program name is freely selectable. Global ABAP classes (SE24) are also possible. As attributes we specify the customer number, the name and the desired address fields. The methods are "logon" and "display": 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
program zzs10_customer.

class customer definition inheriting from /s10/any.

  public section.
    data:
      kunnr type kna1-kunnr, " Customer number
      land1 type kna1-land1, " Country
      name1 type kna1-name1, " Name
      ort01 type kna1-ort01, " City
      pstlz type kna1-pstlz, " Postal code
      stras type kna1-stras. " Street

* database table name
    constants:
      dbtablename type string value 'kna1'. " for s10databaseread

    methods:
      logon,
      display.

endclass.

class customer implementation.

* logon user
  method logon.

* set S10 license
    s10setlicense( 'Synactive GmbH demo license number=100 role=s10demo_role maxusers=10 signature=821.126.87.7' ).

* set start screen
    s10nextscreen( 'start').

  endmethod.

* display customer data
  method display.
    if not s10databaseread( ).
      s10errormessage( 'Please enter a valid customer number' ).
    endif.

    s10nextscreen( 'display').

  endmethod.

endclass.


Some explanations:

 

Remark:

With the S10 utility transaction /s10/util you can generate such classes and whole display transactions including the HTML files, which is very convenient and time-saving when using many table fields. For our tutorials we do not use generation to get to know the S10 logic better.

 

ABAP Debugging

You can use the ABAP Debugger to its full extent. To do this, set an "external breakpoint" in the ABAP Editor at the point where you want to stop:

Then execute the S10 application. The ABAP Debugger becomes active as soon as the marked position in the code is reached:

Now you can, for example, display variables or proceed step by step.

When switching on, please note that the external breakpoint only takes effect if it is the same user name when switching on the debugger (SAP GUI session) and when logging into the S10 application. If you want to use debugging for a different S10 user name, e.g. to clarify authorization problems, you can specify this in the debugger settings:

 

 

2. The "logon" screen

The logon screen is always stored as an HTML file in the "user" class for the English language. In a later tutorial, we describe how you can dynamically switch to the user's language set in the browser if you want to keep the logon screen multilingual.

For the screenshots for storing the HTML files, we assume that you develop them locally on your PC as described in Local development and only later upload them to the SAP MIME Repository.


You can freely design the logon screen; only some elements to link to the S10 framework are required. If you integrate an application with the Fiori Launchpad, the logon screen will never be displayed, because the login is done via the Launchpad login. 

  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=400">
    <link href="../../../style/s10.style.css" rel="stylesheet" type="text/css">
    <link rel='stylesheet' type='text/css' href='../../../style/custom.style.css'>
    <script src="../../synactiveS10/synactiveS10.java.js"></script>

    <title>Logon</title>

</head>

<body onload="init();" style="width: 410px;" class="colorscheme9">

    <div style="width: 300px; background-color: #076399; margin: 10px;">
        <h2 style="padding-left: 16px; color: white;">Customer information</h2>
    </div>


    <div style="width: 300px; padding: 15px; border-radius: 12px; 
                  background: #f1f5fb; margin: 10px;">

        <label class="label" for="user">User</label><br>
        <input class="input" id="user" name="user"
            style="width: 160px;" type="text">

        <br />
        <label class="label" for="user">Password</label><br>
        <input class="input" id="password" name="password"
            style="width: 160px;" type="password">

        <br />
        <button class="button" id="LogonButton"
            style="width: 160px; margin-top: 10px;"
            onclick="dologon(this);return false;">
            Logon
        </button>

    </div>

    <script>

        function dologon(f) {

            var logon_user = document.getElementById('user').value.trim();
            var logon_password = document.getElementById('password').value.trim();
            var logon_client = '100';
            var logon_language = 'en';

            var classname = "customer";
            var progname = "zzs10_customer";

            // Usr name specified?
            if (logon_user == '') {
                S10ErrorMessage(f, "Please enter the username");
                return;
            };

            // Password specified?
            if (logon_password == '') {
                S10ErrorMessage(f, "Please enter the passsword");
                return;
            };

            // Start the S10 application
            S10Logon(logon_client, logon_user, logon_password,
                logon_language, classname, progname);
        };

    </script>

</body>

</html>


Explanations:

 

3. The "start" screen

The screen set with s10nextscreen( 'start' ) in the ABAP method "logon" is assigned as an HTML file to the active class "customer". It is searched for in the language set at logon, e.g. "en" for English: 

  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=400">
    <link rel='stylesheet' type='text/css' href='../../../style/s10.style.css'>
    <link rel='stylesheet' type='text/css' href='../../../style/custom.style.css'>
    <script src='../../synactiveS10/synactiveS10.java.js'></script>

    <title>Customer Information</title>
</head>
<body style="width:100%; margin:0px; padding:0px;" onload='init();' class="colorscheme9">

    <div class="headerarea" style="width: 100%; padding:10px;">
        <b>Customer Information</b>
         <br />
         <br />

         <button type="button" class="toolbarbutton" onclick="S10Apply('display');">
            Display
        </button>

        <button type="button" class="toolbarbutton"  onclick="S10Logoff();">
            Logoff
        </button>

    </div>


    <div style="padding:10px">
        <label class="label output" name="kunnr" for="kunnr"></label><br>
        <input type="text" class="input"  required name="kunnr" 
                      id="kunnr" style="width: 140px;">
    </div>

</body>
</html>


Explanations:

 

4. The "display" screen

If the user presses the "Display" button, the ABAP method "display" is called by onclick=S10Apply( "display" ) and there then by s10nextscreen( 'display' ) the subsequent screen "display" is set. It is also assigned as HTML file to the active class "customer":

In general, the ABAP object that calls s10nextscreen() always becomes the active ABAP object. In our small application here this does not matter yet, because we are working with only one object; but in more complex application it can be important to change the active ABAP object when navigating through different parts of the application, for example to display a sales order sfrom "customer" to "order" by using an object of the class "order" and then calling s10nextscreen() in it.

The HTML file looks like this:

  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=400">
    <link rel='stylesheet' type='text/css' href='../../../style/s10.style.css'>
    <link rel='stylesheet' type='text/css' href='../../../style/custom.style.css'>
    <script src='../../synactiveS10/synactiveS10.java.js'></script>

    <title>Customer Information</title>
</head>
<body style="width: 100%; margin: 0px; padding: 0px;" onload='init();' class="colorscheme9">

    <div class="headerarea" style="width: 100%; padding: 10px;">
        <b>Customer Information</b>
        <br />
        <br />

        <button type="button" class="toolbarbutton" onclick="S10Logoff();">
            Logoff
        </button>

    </div>

    <div>

        <!-- Customer -->
        <div class="infoblock">
            <label class='label output' name="kunnr"></label>
            <br />
            <span class='output' name='kunnr'></span>
        </div>


        <!-- Name -->
        <div class="infoblock">
            <label class='label output' name="name1"></label>
            <br />
            <span class='output' name='name1'></span>
        </div>

        <!-- City -->
        <div class="infoblock">
            <label class='label output' name="ort01"></label>
            <br />
            <span class='output' name='ort01'></span>
        </div>

        <!-- Postal Code -->
        <div class="infoblock">
            <label class='label output' name="pstlz"></label>
            <br />
            <span class='output' name='pstlz'></span>
        </div>

        <!-- Street -->
        <div class="infoblock">
            <label class='label output' name="stras"></label>
            <br />
            <span class='output' name='stras'></span>
        </div>

        <!-- Country -->
        <div class="infoblock">
            <label class='label output' name="land1"></label>
            <br />
            <span class='output' name='land1'></span>
            <span class='output' name='land1@text'></span>
        </div>


    </div>

</body>
</html>

Explanations: