Building a CRUD Application with SAPUI5 and ICF REST/JSON Service - Part 2

[Former Member]

This is the part 2 of 3 of this blog series. In this part we will see the implementation of the Create, Read, Update, Delete methods.

Click here if you did not read the Part 1.

Table of Contents

Part 1

Prerequisites

Overview

SAPLink Nuggets and Eclipse Project download

References

SAPUI5

SAPLink

SAPLink plugins (SCN Code Exchange)

CL_TREX_JSON_SERIALIZER bug fixes

Extending SAPUI5 JSON Model

Creating the ICF REST Service

Creating the custom handler class

Creating the ICF node

Retrieving the request method and the parameters passed in the URL

Part 2

Implementing the REST Service

Model and DDIC objects

Implementing the Create method (POST HTTP verb)

Implementing the Read method (HTTP GET verb)

Implementing the Update method (PUT HTTP verb)

Implementing the Delete method (DELETE HTTP verb)

Part 3

Creating the User Interface

Creating the project

Setting up the SAPUI5 bootstrap and required libraries

Creating the view components

Creating the BSPs to deploy the application and the SAPUI5 framework.

Implementing the Controller’s methods

Create

Read

Update

Delete

Find

Model and DDIC objects

To keep our code clean and adherent to the SoC (Separation of Concerns) principle, we will use a separated class to persist the changes in our contact list. To avoid deviating too much from the main subject, the creation of the model class and dictionary objects is not presented here. You can download here the nugg file with these objects.

Implementing the Create method (POST HTTP verb)

First of all we need to declare the necessary local types and variables.

METHOD if_http_extension~handle_request.

   TYPES: BEGIN OF local_type_response,

           success TYPE string,

           msg     TYPE string,

           data    TYPE ztt_scnblog2,

         END OF local_type_response.

* Objects

  DATA: lo_contact         TYPE REF TO zcl_scnblog2_contact,

        lo_json_serializer TYPE REF TO zcl_json_serializer. " Copy of the standard class CL_TREX_JSON_SERIALIZER

* Internal tables

  DATA: lt_contacts TYPE STANDARD TABLE OF ztb_scnblog2.

* Structures

  DATA: ls_contact  TYPE ztb_scnblog2,

        ls_response TYPE local_type_response.

* Variables

  DATA: l_rc        TYPE i,

        l_json      TYPE string.

* Variables

  DATA: l_verb      TYPE string,

        l_path_info TYPE string,

        l_resource  TYPE string,

        l_param_1   TYPE string,

        l_param_2   TYPE string.

…..

Next we implement the code to handle the POST request method that corresponds to the Create Contact action.

WHEN 'POST'.   " C (Create)

     CLEAR: ls_contact,

             ls_response,

             l_rc.

*     Retrieve form data

      ls_contact-email     = server->request->get_form_field('email').

      ls_contact-firstname = server->request->get_form_field('firstname').

      ls_contact-lastname  = server->request->get_form_field('lastname').

*     Create an instance of the class to persist the Contact data in the database

      CREATE OBJECT lo_contact.

*     Create the Contact

      CALL METHOD lo_contact->create

        EXPORTING

          i_s_contact = ls_contact

        IMPORTING

          e_rc        = l_rc.

      IF l_rc IS INITIAL.

        ls_response-success = 'true'.

        ls_response-msg     = 'User created successfully!'."hardcoded here intentionally

      ELSE.

        ls_response-success = 'false'.

        ls_response-msg     = lo_contact->get_message( ).

      ENDIF.

*     Return the form data received back to the client

      APPEND ls_contact TO ls_response-data.

…...

  ENDCASE.

  CREATE OBJECT lo_json_serializer

    EXPORTING

      DATA = ls_response. " Data to be serialized

* Serialize ABAP data to JSON

  CALL METHOD lo_json_serializer->serialize.

* Get JSON string

  CALL METHOD lo_json_serializer->get_data

    RECEIVING

      rval = l_json.

* Sets the content type of the response 

  CALL METHOD server->response->set_header_field( name = 'Content-Type'

    value = 'application/json; charset=iso-8859-1' ).

* Returns the results in JSON format 

  CALL METHOD server->response->set_cdata( data = l_json ).

ENDMETHOD.

Let’s understand what the above code does (only the relevant parts).

• First we retrieve the form data received from the client application using the get_form_field method of the request object.

*     Retrieve form data

      ls_contact-email     = server->request->get_form_field('email').

      ls_contact-firstname = server->request->get_form_field('firstname').

      ls_contact-lastname  = server->request->get_form_field('lastname').

• Next we create an instance of the class zcl_scnblog2_contact that will persist the Contact data in the database and call the create method.

*     Create an instance of the class to persist the Contact data in the database

      CREATE OBJECT lo_contact.

*     Create the Contact

      CALL METHOD lo_contact->create

        EXPORTING

          i_s_contact = ls_contact

        IMPORTING

          e_rc        = l_rc.

• Next we need to handle the result of the action based on the return code (l_rc). Then we set the value of the attributes success and msg accordingly.

              IF l_rc IS INITIAL.

        ls_response-success = 'true'.

        ls_response-msg     = 'User created successfully!'."hardcoded here intentionally

      ELSE.

        ls_response-success = 'false'.

        ls_response-msg     = lo_contact->get_message( ).

      ENDIF.

• The information received is returned back to the client application.

*     Return the form data received back to the client

      APPEND ls_contact TO ls_response-data. 

• Finally the data is serialized in a JSON string.

  ENDCASE.

  CREATE OBJECT lo_json_serializer

    EXPORTING

      DATA = ls_response. " Data to be serialized

* Serialize ABAP data to JSON

  CALL METHOD lo_json_serializer->serialize.

* Get JSON string

  CALL METHOD lo_json_serializer->get_data

      RECEIVING

        rval = l_json.

• To send the JSON response to the client we need this last code.

* Sets the content type of the response   

  CALL METHOD server->response->set_header_field( name = 'Content-Type'

    value = 'application/json; charset=iso-8859-1' ).

* Returns the results in JSON format 

  CALL METHOD server->response->set_cdata( data = l_json ).

ENDMETHOD.

Let’s test our first method using the Postman REST client.

Select the POST method and type the URL and the form fields. Be aware of using the correct field names (email, firstname, lastname).

Click the Send button to test the service. The service should return a JSON response with the message “Contact created successfully!”.

Let’s check the database table using the SE16.

If you hit the send button again without changing the form data the service should return a message informing that the contact already exist.

The created method is finished. Let’s go to the next method, read contact.

Implementing the Read method (HTTP GET verb)

Below is the code that we need to implement to handle the read method. It’s structure is very similar to the create method.

   WHEN 'GET'.   " R (Read)

      CLEAR: ls_contact,

             ls_response.

      CREATE OBJECT lo_contact.

*     Retrieve the Contact's email passed in the URL

      ls_contact-email = l_param_1.

*     Retrieve querystring data

      ls_contact-firstname = server->request->get_form_field('firstname').

      ls_contact-lastname  = server->request->get_form_field('lastname').

*     Read Contact's data

      CALL METHOD lo_contact->read

        EXPORTING

          i_s_contact  = ls_contact

        IMPORTING

          e_t_contacts = lt_contacts.

      IF NOT lt_contacts[] IS INITIAL.

        ls_response-success = 'true'.

        ls_response-data[] = lt_contacts[].

      ELSE.

        ls_response-success = 'false'.

        ls_response-msg     = lo_contact->get_message( ).

      ENDIF.

Let’s test our read method.

Implementing the Update method (PUT HTTP verb)

Below is the code that we need to implement to handle the update method.

   WHEN 'PUT'. " U (Update)

      CLEAR: ls_contact,

             ls_response,

             l_rc.

*     Retrieve the Contact's email passed in the URL

      ls_contact-email = l_param_1.

*     Retrieve form data

      ls_contact-firstname = server->request->get_form_field('firstname').

      ls_contact-lastname  = server->request->get_form_field('lastname').

      CREATE OBJECT lo_contact.

*     Update the Contact

      CALL METHOD lo_contact->update

        EXPORTING

          i_s_contact = ls_contact

        IMPORTING

          e_rc        = l_rc.

      IF l_rc IS INITIAL.

        ls_response-success = 'true'.

        ls_response-msg = 'Contact updated successfully!'.  "Hardcoded here intentionally

      ELSE.

        ls_response-success = 'false'.

        ls_response-msg     = lo_contact->get_message( ).

      ENDIF.

*     Return the form data received to the client

      APPEND ls_contact TO ls_response-data.

Let’s test our update method. Let's put an “X” at the end of the contact’s first and last name.

Let’s check our table in the SE16.

Implementing the Delete method (DELETE HTTP verb)

Below is the code that we need to implement to handle the delete method.

WHEN 'DELETE'. " D (Delete)

      CLEAR: ls_contact,

             ls_response,

             l_rc.

      CREATE OBJECT lo_contact.

*     Retrieve the Contact's email passed in the URL

      ls_contact-email = l_param_1.

*     Delete the Contact

      CALL METHOD lo_contact->delete

      EXPORTING

        i_s_contact = ls_contact

      IMPORTING

        e_rc        = l_rc.

      IF l_rc IS INITIAL.

        ls_response-success = 'true'.

        ls_response-msg = 'Contact deleted successfully!'.  "Hardcoded here intentionally

      ELSE.

        ls_response-success = 'false'.

        ls_response-msg     = lo_contact->get_message( ).

      ENDIF.

Let’s test our delete method.

Now our table must be empty. Let’s check it in the SE16.

In the Part 3 of this blog series we will see the most interesting part, the creation of the user interface using SAPUI5.