Skip to Content

In the Blog I and Blog II , I have explained the steps to create the “ESS home page” and “One level page navigation”.

In this Blog, I will explain in detail about “Two level page navigation”.

Also to remind, as I have mentioned in the Blog I, application Z_HTML5_ADDRESS_LIST will be modeled using NEPTUNE_FLIGHT02_LIST and Z_HTML5_ADDRESS_DETAILS will be modeled using NEPTUNE_FLIGHT02_DETAIL.

1)  Since the Header has to be uniform, just copy the header section from the Z_HTML5_HOMEPAGE and replace in the App Z_HTML5_ADDRESS_LIST and Z_HTML5_ADDRESS_DETAILS.


2) Perform the steps 2 to Step 7 from Blog II, and complete developing the app Z_HTML5_ADDRESS_LIST.

3) Following are the delta changes that you need to carry out in the App Z_HTML5_ADDRESS_LIST.

  1. The link is added as the application has to call the second page with the highlighted key value and new internal table is introduced IT_0006 in the class attributes.

/wp-content/uploads/2013/09/1_273140.png

   b. Title section under the link will display the descriptions fetched from the class and it will display as list view.

/wp-content/uploads/2013/09/2_273141.png

   c. In the Class, call the method get_address_list whenever the application Z_HTML5_ADDRESS_LIST is called.

/wp-content/uploads/2013/09/3_273142.png

   d. Logic to retrieve the address type for an Employee.

/wp-content/uploads/2013/09/4_273143.png

   e. In the section 3.A, i have mentioned the key field and the application where it has to be navigated. This key field value can be accessed always in the handle_on_request method.

/wp-content/uploads/2013/09/5_273144.png

   f. Information has to retrieved from table based on the key value.

/wp-content/uploads/2013/09/6_273145.png

/wp-content/uploads/2013/09/7_273146.png

4) Lets enhance the application that will display all the details based on the key value.  Map all the new internal table values under the loop section and in the back button just call the Address list Application as mentioned in the below image.

/wp-content/uploads/2013/09/8_273147.png

5)  Change, activate the application and preview in Wrapper.

      a) Home page

    /wp-content/uploads/2013/09/9_273148.png

     b) Address List main page

    

     /wp-content/uploads/2013/09/10_273149.png

    c) Detailed page.

      /wp-content/uploads/2013/09/12_273151.png

         

Thanks,

S.Rajkumar.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply