B4J Question [BANanoVueMaterial] How to create dynamic data-table from database schema & data [SOLVED]

[micro]

Hi
the next step .....but always with the same problem of updating the component (VMDataTable)
dt1 = VMDataTable in a module gestDatiArc is show and only the indication of the number of
records in the pagination is updated but it does not show the name of the columns and records
I read as you recommended (mashiane) the tutorial on VUE but it is not clear to me why dt1 does not update
With

Log(dt1.GetData)

the Array records are present
Attaching the related test project, thanks.

 

[Mashiane]

Ok I will look at it, just to eliminate confusion, the right prefix to use is [BANanoVueMaterial] and not [BANanoVue] as the component you are referring to is in that Library.

Also try and be more specific on the title so that one is clear what you want to achieve and the context of your question. For example, you could use [BANanoVueMaterial] VMDataTable does not display columns? if that is what you want to know. This helps a great deal for a more focused approach to helping anyone on any issue.

Ta!

 

[Mashiane]

but it does not show the name of the columns and records

You have not added the column names when defining the table initially. See the Demo examples on how to add the columns. To the table.

What are you trying to achieve? Do you want to create columns dynamically during runtime? If that is what you want to do then your question is misleading, rather change it to reflect that because you have a condition of runtime setting of column names.

Ta!

PS: Please also comment your code. I am making assumptions here due to reading the code. The fact that its not commented is not helping at all.

Please.!

 

[micro]

What are you trying to achieve? Do you want to create columns dynamically during runtime?

Yes, because every time you choose a different table the names of the columns change, that's why I don't set the columns at the beginning.

If that is what you want to do then your question is misleading, rather change it to reflect that because you have a condition of runtime setting of column names.

??

PS: Please also comment your code. I am making assumptions here due to reading the code. The fact that its not commented is not helping at all

Sorry,I thought it was easy to interpret .

In a module gestDatiArc in Sub 'Initialize', i cretate a container and a datatable (dt1) which I add to vm.
In this Sub dt1 it's not fully set because I have not chosen the table therefore do not know the columns name.
When the table is chosen in the Sub 'LoadDatiTable' I run the query and fill lnmanecol (list) with a name columns and
ltypecol (list) with a type columns, setting the data source for dt1 (dt1.SetDataSource(dbsql.result)) and
in the Sub 'PopolateTable' I set columns and fill dt1 with data.

 

[Mashiane]

your question is misleading

Yes, rather change it to [BANanoVueMaterial] How to create dynamic data-table from database schema & data.

That is what you want to achieve isnt it?

This is what I need from you. Please send me a database with a few tables and data inside it. That will be easier to work with.

Things I have noted..

1. You dont need to use the Class Module to create a page, use a code module, its better that way as much as it may seem not to make a difference right now. There is no example anywhere that uses a class to create a BANanoVueMaterial page.
2. You need to forget a little about BANano in some instances, for example CallSub, this is not how VueJS works, there is a better way to do that. It is vm.SetMethod(?) and vm.CallMethod(?). With VueJS, when you define methods, these are stored in memory of the app.

As soon as you send me a database with records I will continue and please change the question title.

Ta!

 

[Mashiane]

We already have a .Reset method for the data-table. So you need to use that so that the previous structure, data, sorting and everything is cleared. So as soon as you click the new table name on the drawer, on the globally defined data-table variable, the first thing you need to call is <datatablevariable>.Reset, then you add the new columns and set the datasource.

Creating data-tables in this fashion is only partially implemented and works with the designer currently. See here.




This was discussed on this post. https://www.b4x.com/android/forum/t...based-framework-for-banano.113789/post-758389

Ta!

 

[micro]

As soon as you send me a database with records I will continue

 

[Mashiane]

Hi

Please find the updated project.

A word of caution. If your plan is to create a dynamic CMS with CRUD functionality, please be advised that BANanoVueMaterial was never built for that in mind. There are some things that currently with the implementation have not been added. For example, to be able to create dynamic components at runtime you need to use slots. That is the only way to do it and I have not educated myself in terms of how those work and there have not been plans to do either in the near future. This is how VueJS work as you follow those guidelines, its not the normal javascript / jquery and it does not follow BANano terms and conditions either.

The current implementation assumes that everything is predefined before it gets rendered, and dynamic content is fed using v-for directives. This is built via strings and there is no way to compile at runtime at the moment. So be warned. So the limit is for any dynamic component that has to be bound to data, at this particular moment, it cannot be done efficiently.

You will need to download the updated library for your example to work. Checkboxes, Switches and other dynamic components are not supported with this dynamic approach.

If you need to develop a CRUD app based on an existing database, you have to follow the approach indicated on this thread, Mock.Compile.Publish

Good luck!

 

[micro]

Thanks Mashiane

 

[joulongleu]

+1

 

[Mashiane]

@micro

Explorations of the dynamic component creation are being explored. This should be available soon. Phase 1 is complete.

[BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

*START OF NOTICE As of 02 FEB 2021, this project is is no longer maintained as it has given birth to BVAD3. This project was a joy to create, however like everything that has a start and an end, its time to move on and evolve. BVAD3 is faster, more simpler to implement and takes advantage of...

www.b4x.com