Tab component - adding a body & sub-components ?

[f8dca]

I was very exited to see the Tab component but in its current form it is not that useful because it is limited to show only some very small pieces of information. Would you consider adding the following enhancements:

1. Adding a new property called body_md that would contain the markdown text shown when the tab is selected.
2. Adding some kind of a mechanism to show components under the different tabs ? Something along like this would introduce 2 more properties subcomponent and container:

select 'Tab' as component;
select  'Tab1' as title, 'shows a table component', 1 as active;
select  'Tab1' as title, 'shows a table component', 1 as active;

SELECT 
    'table' as subcomponent.'Tab1' as container ;
SELECT 1 as a, 2 as b;
SELECT 3 as a, 4 as b;

SELECT 
    'table' as subcomponent.'Tab2' as container ;
SELECT 1 as a, 2 as b;
SELECT 3 as a, 4 as b;

[lovasoa]

The tab component is made to provide the tabs themselves. To display the contents of the tab, you are supposed to use a WHERE clause, like that:

select 'tab' as component;
select  'Tab1' as title, $tab='Tab1' as active;
select  'Tab2' as title, $tab='Tab2' as active;

SELECT  'table' as component;
SELECT * FROM table1 WHERE $tab='Tab1';
SELECT * FROM table2 WHERE $tab='Tab2';

Does that do what you need?

This design avoids querying and returning data you don't need.

[f8dca]

Yes !

This is exactly what I was trying to achieve. But of course I have some follow up questions:

• Is there a limitation on what type of components can be used for the content ?
• Can I theoretically nest tab components ?
• Maybe elaborate a bit on the usage of parameters in this context ?
• Is $tab a special parameter ?
• Are there any other special parameters like this ?

[lovasoa]

There is absolutely no magic going on here. The tab component just emits a series of links. By default, the links are directed to the current page, with ?tab=the tab name appended to the end. You can hover over a tab to see the link target. Then, using $tab works the same as in any other page.

Nested tabs are easy too, you can set ?second_level_tab=second level tab name as link for your second set of tabs, and then use $second_level_tab in your page.

[f8dca]

I upgraded to 0.95 just to test this feature. so far this is how I tested it.

select 'tab' as component;
select  'TabHeader1'  as title, 1  as active;
select  'TabHeader2' as title, 1 as active;
select  'TabHeader3' as title, 1 as active;
select  'TabHeader4' as title, 1 as active;
select  'TabHeader5' as title, 1 as active;
select  'TabHeader6' as title, 1 as active;

select  'table' as component where $tab='TabHeader1';
select top 10 id, whse,part_no from AMTV2.SPIRE_MATVIEWS_INVENTORY where $tab='TabHeader1';

select  'table' as component where $tab='TabHeader2';
select top 4 id, whse,part_no from AMTV2.SPIRE_MATVIEWS_INVENTORY where $tab='TabHeader2';

SELECT 'datagrid' as component where $tab='TabHeader3';
SELECT 'Language' as title, 'SQL' as description where $tab='TabHeader3';
SELECT 'Creation date' as title,  '1974' as description where $tab='TabHeader3';
SELECT 'Language family' as title, 'Query language' as description where $tab='TabHeader3';

SELECT 'map' as component, 'Paris' as title, 11 as zoom, '48.85' as latitude, '2.34' as longitude,  400 as height where  $tab='TabHeader4';;
SELECT 'Notre Dame' as title, '48.853' as latitude, '2.3498' as longitude where  $tab='TabHeader4';

SELECT 'card' as component where $tab='TabHeader5';
SELECT 'A' as title where $tab='TabHeader5';
SELECT 'B' as title where $tab='TabHeader5';
SELECT  'C' as title where $tab='TabHeader5';

SELECT 'list' as component where $tab='TabHeader6';
SELECT 'A' as title where $tab='TabHeader6' ;
SELECT 'B' as title where $tab='TabHeader6';
SELECT 'C' as title where $tab='TabHeader6' ;

One issue is that if the component does not have a where $tab='TabHeader1' clause then an empty line is shown in all tabs.

[f8dca]

This component makes SQLPage (for me) almost feature complete. Now it is possible to build high density complex user user interfaces that matches other systems. All it needs is some more polishing, bugfixes to deal with untested edge-cases and performance tuning.

Anything else can be added using either CSS ,Handlebar templates or stored procedures.

Very impressive.

[f8dca]

Closing case

[lovasoa]

Don't hesitate to open new issues here or discussion threads on the forum !