Hi,

Would it be possible to create a master-detail report in accordion style?

For example. Datasource 1 is based on a table with countries. Datasource 2 is based on a table with cities

I want to see a list of countries and when i click a country, the cities should be shown. Like an accordion. One country at a time.

If it is possible, do you have an example for me?

Kind regards, Jan Willem

asked 24 Mar '15, 10:51

Jan%20Willem%20Vermeer's gravatar image

Jan Willem V...
1231330
accept rate: 0%


12next »

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

link

answered 26 Mar '15, 05:25

Michael's gravatar image

Michael
2095
accept rate: 0%

Hi Michael,

this sounds so easy... but i have no idea what to put where...

I have a master panel based on the datasource. When i try to create that panel as an accordion, the interface asks many questions and i have no idea what they mean, not what to enter. For example, now i have entered <accordion panelName="master"> but then it needs an "order".

With an example i could probably figure it out, but i can not find it. The example you mentioned is based on normal panels and that's clear.

I hope you can help me further.

Kind regards, Jan Willem

link

answered 26 Mar '15, 05:44

Jan%20Willem%20Vermeer's gravatar image

Jan Willem V...
1231330
accept rate: 0%

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

link

answered 26 Mar '15, 06:18

Michael's gravatar image

Michael
2095
accept rate: 0%

Hi Michael,

indeed i am relatively new on Formspider :) However, i have studied all examples and tutorials many times and still have the feeling that 90% of Formspider has not been documented in any way.

But many thanks to you, because now i have the accordion working. However, not in the way i hoped... I think i was not clear enough. Now indeed the masters can be "accordioned out" and also the details and the relationship works. However, what i need is a list of masters (so, every master is an accordion) and when i click such master, the corresponding details appear. So, like somekind of menu or list. But the disadvantage of a list is that all children are rendered in the html. Because the details can be thousands, i only want them to render when i click the master.

For example this: http://cssmenumaker.com/menu/elegant-accordion-menu

I need to see the masters, and when i click one, the details appear. Just like clicking the + on "products" and "about". In this case the html always contains all list elements. And that can be thousands.

I really hope this would be possible.

Kind regards and thanks, Jan Willem

link

answered 26 Mar '15, 06:38

Jan%20Willem%20Vermeer's gravatar image

Jan Willem V...
1231330
accept rate: 0%

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

link

answered 26 Mar '15, 07:47

Michael's gravatar image

Michael
2095
accept rate: 0%

edited 26 Mar '15, 08:30

Hi Michael,

may thanks for your help and explanations !!!

It is not 100% clear what you mean, but i think your suggestion is to create an accordionpanel for each master and when that's clicked, the details for that specific master are rendered. There can be however hundreds of masters...

The concept of what i need is basically very simple:

a) there are two tables: 1 = master, 2 = detail

b) i want to show the masters in a list - that list appears immediately after starting up the form

c) when a master is clicked, the details must appear immediately below that master (so between this master and the next one)

So in fact the question is: how to display the details below their master and above the next master?

It looks like an accordion mechanism, but perhaps it is not.

In the examples of master-detail forms, the masters are in a panel (in the good old Oracle Forms-days we called that a block) and the details are in a second, separate panel (also a block). But what i need is to mix up these panels, in such a way that details are shown between the masterrecords. Just like the menu i referenced.

Perhaps this is the next level or Formspider :) But the days of old "block like" master detail forms are counted. Most of my customers use tablets and smartphones and that needs a new kind (accordion like) interface. Only a few forms remain with pure master-details screens - i think 90% of them will be replaced by forms with an interface i am now looking for.

If you know a way to show details between masters, please let me know.

Kind regards, Jan Willem

link

answered 26 Mar '15, 09:10

Jan%20Willem%20Vermeer's gravatar image

Jan Willem V...
1231330
accept rate: 0%

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

link

answered 26 Mar '15, 11:04

Michael's gravatar image

Michael
2095
accept rate: 0%

edited 26 Mar '15, 11:08

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

link

answered 26 Mar '15, 11:28

Michael's gravatar image

Michael
2095
accept rate: 0%

This is really unbelievable Michael ! Thanks thanks thanks.

In this example i see "home", "products", "about" and "contact". Did you select these values with a datasource? Or did you create these four accordions manually? Or with a procedure calling the API for every master record found? That's the only thing that's not completely clear for me.

Do you know Camtasia? With that you could have captured/filmed the steps to build this example.

If this works, the only challenge remaining is the styling. I need many of similar "reports" and they have to be styled with css-classes, depending on the website or app page (app url plugin) they are placed on. But that question is asked separately :)

Kind regards, Jan Willem

link

answered 26 Mar '15, 11:48

Jan%20Willem%20Vermeer's gravatar image

Jan Willem V...
1231330
accept rate: 0%

By the way - currently i have this application. The "Districten" should become accordions and "Verenigingen" should be displayed between the "Districten". So, for me is the most important question: how to create the accordions for "Districten".

link

answered 26 Mar '15, 11:54

Jan%20Willem%20Vermeer's gravatar image

Jan Willem V...
1231330
accept rate: 0%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×4
×2

Asked: 24 Mar '15, 10:51

Seen: 1,987 times

Last updated: 30 Mar '15, 03:46


© Copyright Gerger 2017