Skip to Content
Author's profile photo Sumeet Narang

How To Create dependent list view

Just in case you are wondering how do we create nested nodes and how do we display them as dependent lists on the screen, below are the steps of how we can achieve this.

Here the example which I have taken is attaching a new tab to the Opportunity which contains nested screens of Sales Quotes and its corresponding items.

Step 1: Create a Custom Business Object and add nested nodes containing fields for Sales Quote and its items details. One Opportunity can have multiple Sales Quotes and One Sales Quote can have multiple items.

BO.png

Step 2 : Create an Embedded Component.In UI designer do the following steps for screen creation :

       a) Drag and Drop the AdvancedListPane from Toolbox onto the screen.

         /wp-content/uploads/2016/02/2_884039.png

      b) Change the property UsePreviewPane of ListPaneVariant to True.

/wp-content/uploads/2016/02/3_884040.png

      c) Once this is done, a new child Advanced List Pane will be created.

/wp-content/uploads/2016/02/4_884041.png


      d) Use the Toolbar properties to add buttons on the Advanced List Pane.

/wp-content/uploads/2016/02/5_884046.png

/wp-content/uploads/2016/02/6_884047.png/wp-content/uploads/2016/02/7_884048.png

/wp-content/uploads/2016/02/8_884049.png

          e) Bind the corresponding fields in the Data Model as shown below.

/wp-content/uploads/2016/02/9_884050.png


      e) Create Add row buttons on the Advanced list Pane screens.

/wp-content/uploads/2016/02/10_884054.png

    f) Create OnClick event for Add row button as below.

/wp-content/uploads/2016/02/11_884055.png

/wp-content/uploads/2016/02/12_884056.png

       g) Create Remove button and create on Click event for the same.

/wp-content/uploads/2016/02/13_884057.png

/wp-content/uploads/2016/02/14_884058.png

     h) Create Add Row and Remove buttons and their events for the child Advanced List pane as well.

/wp-content/uploads/2016/02/15_884059.png

/wp-content/uploads/2016/02/16_884060.png

/wp-content/uploads/2016/02/17_884061.png

/wp-content/uploads/2016/02/18_884062.png

Bind this EC to the Opportunity TI and check on the UI.

Hope this document is helpful.

Assigned tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Bin Huang
      Bin Huang

      Hi Sumeet,

      I do as the sample, but there is no the DataModel/inport parameter, I don't know how to do.

      And the BO Opportunity need add the association node?

      when I check on the UI, it raise as the picture, and can not add row.

      Could you help me the other step?

      Thanks a lot.

      Benny

      Author's profile photo Former Member
      Former Member

      Hi Bin,

      I have the same problem, you were able to solve this problem??

      Regards,

      Ricardo

       

      Author's profile photo Bin Huang
      Bin Huang

      Hi Ricardo,

      The link:https://blogs.sap.com/2016/06/08/create-a-dynamic-codelist-from-bco-and-bcc/

      I have finished the sample, hope the document is helpful.

      Best Regards,

      Benny

       

      Author's profile photo Former Member
      Former Member

      Hi Bin,

      If you have the solution to that problem, I thank you you can answer me, I have days with that mistake.

       

      Regards,

       

       

      Author's profile photo Bin Huang
      Bin Huang

      Hi Ricardo,

      You also can access the blog:https://blogs.sap.com/2014/04/02/sap-application-studio-1402-add-ec-with-custom-bo-to-standard-screen/

      Best Regards,

      Benny

       

      Author's profile photo Former Member
      Former Member

      Hi Benny,

      Thank you, I will review the information provided.

      Regards,