Visual Builder

Get Involved. Join the Conversation.


    Marcin Lachowicz
    Dynamic data with nested table data implementationAnswered
    Topic posted January 24, 2019 by Marcin LachowiczGreen Ribbon: 100+ Points, tagged Composite Component, Custom Code, JET, REST, Services, UI 
    177 Views, 8 Comments
    Dynamic data with nested table data implementation


    I need to code the functionality involving displaying data, obtained from API service when user opens the details view of a parent record.

    The parent record is being displayed in the collapsible component.

    The details view data should be displayed with table component.

    The parent record data contains the identifier to obtain the details data.
    The number of parent records is dynamic.

    If possible I would like to only populate the details table when user opens the details view.

    I have already tried adding property to the parent data item type which would hold the details array data for the table but when I tried to update it I got strange errors and the component I have been using (collapsible) automatically closed, probably because the parent data changed.

    How could/should this be done using VBCS?

    ​Could this be done using MultiServiceDataProvider object? If so, then how - the examples on the MSDP page are not very helpful, especially with regards to "mergeTrasnformOptions" and passing the details id to the details SDP.



    • Marcin Lachowicz

      Would it be feasible to encapsulate the details table in a custom component which would handle loading of the data into the table based on the details id passed to the component through prop attribute?
      How could I access the rest service I created from within such custom component?

    • Shay Shmeltzer

      Can you clarify specifically where is the challenge that you are facing?

      The basics of doing a parent/child relationship in your UI is shown here:

      • Marcin Lachowicz

        My case differs from the presented in the link - every collapsible component with parent data has to have detail view and these views must be presented independently of each other.
        The user has to be able to open more than one collapsible and see multiple detail tables at the same time. In such a configuration there can not be a single details data service provider object, each details table component has to have independent data source - these sources have to be created dynamically or perhaps the data from two services (parent and details) should be merged somehow.

    • Marcin Lachowicz

      I managed to resolve this case by creating a custom component which has its own data provider variable (ArrayDataProvider).
      I'm using jQuery to send AJAX request to get the details table data.
      Even though this works it's not a perfect solution - the URL I'm using to make request is absolute and if for example the application version changes it will stop working.
      I was thinking about using the ServiceDataProvider but the reference for this object describes it's usage from the VBCS context. There are examples of configuration but this looks like VBCS configuration JSON not a Javascript recipe.

      Is there an example/reference for using ServiceDataProvider in Javascript?
      There is also another question: how can I reference the service endpoints from within the custom component?

    • Duncan Mills


      Yes it is possible for a custom component to talk to service endpoints it's a little complicated to write it up here so I'll write up a blog article on Monday which explains what to do 

      Duncan Mills

      • Marcin Lachowicz

        Thanks, it was very helpful! smiley
        Do you also know how to use Service Data Provider in component Javascript to leverage for example its automatic paging capabilities?

        • Duncan Mills

          For reference see this: 



          Something like this will work, where the SDP has been passed in as a property called data:

          var sdp =;

          var fetchOptions = {}

          var providerIterator = data.fetchFirst(fetchOptions)[Symbol.asyncIterator]();

          Then you can call next() on the providerIterator until you're done.