How to create a master-detail report in accordion style?

Hi Jan,

of course this is possible, we are using master detail reports in accordion panels but also in split panels.

Its nearly the same as shown in the expample 3 Level Master Detail Grids in the demo section. But instead of including the panels into one main panel, you can use an accordion container and include a master and detail panel as an accordion. You have to name your master and detail datasource instances used in the accordeon panels, define the event in the master grid (selectionChanged) or datasource (Current Row Changed) to refresh the detail datasource as shown in the example and there you go.

Best Regards,

Michael

Hi Jan,

the accordion panel is just a container. You have to create a master and a detail panel where the grids are included. In the accordeon panel (a separate one) you are now adding the master and detail panel into accordions. The "order" is a mandatory attribute to set the sort order how the accordions should be arranged. Here is a small code snippet to demonstrate:

accordionPanel

<accordionPanel name="accordionPanel" multiExpand="Y" resizable="Y">
  <accordion panelName="masterPanel" order="1" title="Master"/>
  <accordion panelName="detailPanel" order="2" title="Detail"/>     
</accordionPanel>

masterPanel

<panel name="masterPanel">
  <tableLayout>
    <row>
      <cell>
... here should be your master grid 
      </cell>
    </row>
  </tableLayout>
</panel>

detail Panel

 <panel name="detailPanel">>
  <tableLayout>
    <row>
      <cell hAlign="Full" vAlign="Full">
       ... here should be your detail grid 
      </cell>
    </row>
  </tableLayout>
</panel>

You can find a similar example in the demo section as well link.

If you are new to Formspider, I can warmly recommend the tutorial and demo section. Walking through the tutorial helped us a lot to understand Formspider.

I hope this is helpful for you, if not feel free to ask more and I will try to help.

Best Regards,

Michael

Hi Jan,

we are now working nearly two years with formspider and yes we had to learn a lot by ourselves by trying. But the demos and tutorial gives you a good impression of the basics and what is possible with Formspider.

Your use case seems to be the next level of using Formspider ;-) As far as I understand you correctly you want to avoid the details to be rendered initially but if you click or expand a master accordion.

You can do this by adding a detail container to each master accordion and only load the detail panel if the master (accordion) is clicked or expaned:

<accordionPanel name="accordionPanel" multiExpand="Y" resizable="Y">
   <events>
      <expanded action="action_load_details"/>
   </events>

   <accordion panelName="master1" order="1" title="Master1"/>
   <accordion panelName="master2" order="2" title="Master2"/>
</accordionPanel>

master panel container (is needed because there is still a display issue including an accordion panel in an accordion panel)

<panel name="master1">
   <tableLayout>
     <row>
      <cell>
        <includePanel panelName="master1_detail_accordion"/>
      </cell>
    </row>
   </tableLayout>
</panel>

accordion container where the details should be included

<accordionPanel name="master1_detail_accordion" multiExpand="Y" resizable="Y" >
</accordionPanel>

Detail Panels of the Master 1

    <panel name="master1_detail1">
    ....
    </panel>
    <panel name="master1_detail2">
    ....
    </panel>
    ....

In the action "action_load_details" - that is fired if an master accordion is expanded - you now have to add all the corresponding detail panels to e.g. the master1_detail_accordion by using the api of the accordion

 api_accordionpanel.addAccordion(in_accordionPanelName_tx => 'master1_detail_accordion', (if Master 1 was clicked)
                              in_order_nr              => 1,  (Order Attribute)
                              in_accordionName_tx      => 'acc_detail1', (Name Attribute)
                              in_title_tx              => 'Detail 1',   (Title Attribute)
                              in_panelName_tx          => 'master1_detail1' (PanelName Attribute);

     api_accordionpanel.addAccordion(in_accordionPanelName_tx => 'master1_detail_accordion', 
                              in_order_nr              => 2,  (Order Attribute)
                              in_accordionName_tx      => 'acc_detail2', (Name Attribute)
                              in_title_tx              => 'Detail 2',   (Title Attribute)
                              in_panelName_tx          => 'master1_detail2' (PanelName Attribute);           
...

If you want to hide the headers of the detail accordions you can use the function setaccordionheadervisible.

This is just one possible way if you have more than one detail panel.

You can also do this by using normal panels instead of the detail accordion and include panels into defined cells using the addPanel function in api_panel. Therefore you have to name the cells to define which detail panel should be included in which cell of the detail container.

Using this way(s) of including panels during runtime allows you to only render the detail panels if they are needed.

I hope you could follow my approach and it fits your needs.

Best Regards,

Michael

Hi Jan,

I guess I understood your intention and my example with the accordion could be one solution. Maybe I have to explain it a little bit more.

The first table of all masters is the first layer in the my accordion example. So for each row in this table you have to add an accordeon in the accordeonPanel. So it might look like a list of all possible "Menue Entries" like

1. HOME
2. PRODUCTS
3. ABOUT
4. CONTACT

in your mentioned example page. Each bullet point is the header of one of these accordeons.

But each accordeon has a content part, the Panel that has to be defined if you add an accordion. There the container comes in. This is shown directly below of the accordion header. So we have to display the details in this content (using an additional detail accordion panel - second layer).

To render the details during runtime you need to add them via api functionality. To display more than one detail (panel) below the master, it must be possible to add several details (panel) dynamically. This can be done using an accordion panel. You can remove the header and expand all details after loading to don't let them look like a new accordion panel.

So if you click for example on 2. PRODUCTS it should look like this:

1. HOME
2. PRODUCTS

   Product 1

   Product 2

   Product 3

3. ABOUT
4. CONTACT

In fact you have the following panels displayed:

<accordionPanel MENUE>
   <accordion 1. HOME\>
   <accordion 2. PRODUCTS>
     <accorionPanel PRODUCTS_DETAILS>
        <accordion>Product 1</accordion>
        <accordion>Product 2</accordion>
        <accordion>Product 3</accordion>
     </accordionPanel PRODUCTS_DETAILS
   </accordion 2. PRODUCTS
   <accordion 3. ABOUT\>
   <accordion 4. CONTACT\>
</accordionPanel>

(This is not the real code, but should represent the structure of the formspider panels.)

It is a little bit hard to explain it without showing it directly in Fromspider or in Code. So if you need more assistance I can offer you to get in contact with me directly and we can walk through a little example online.

Best Regards,

Michael

Just created a small demo

As ment before you have to set the detail accordion based on the detail table and using api functions but this gives you an impression of the final result.

Best Regards,

Michael