B4J Question [BANanoVuetifyAD3] VStepper Loadlayout problem

[sdleidel]

I would like to load and display a layout with the Vstepper at Step1.
Sample: 2 text fields for first name and name.
however, the fields should be next to each other. (Left "First Name" and on the right side "Name")
I've already tried everything and the examples don't help either.
Is rows and colums from the Tutorialvideos in Vstepper not possible ?

 

[Mashiane]

In one of my posts, I indicated that the Kitchen Sink should be your best.

If you visit the Kitchen sink > Layouts > V-Grid, you can see and refer to how grids are created via layouts.

BANanoVuetifyAD3 V7.36 - New Awesome Kitchen Sink

BVAD3 Design System

mashiane.github.io

You also know that one can put an element inside a vcol and other components. Give yourself time and skim through.

 

[sdleidel]

what is the Mistake ?
I have only a yellow Field and the rest ist around the Stepper...
I have attach my File...

 

[Mashiane]

The post #2 was for you to understand how grid creation works.

Please spend some time going through this lesson to understand how grids work and how to insert contents into them.

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

21: CRUD - Creating a Dialog Form to capture our Invoices - Part 2

www.b4x.com

There is a video on this lesson in terms of how to create split forms.

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

Understand, thank you

www.b4x.com

What I will also do, is to include an example of how to use forms inside steppers but its the same principle you use as the only example in the kitchen sink just has labels.

 

[sdleidel]

Please Check my sample…
I can Not load the file correctly…
But why ?

I have delete the login.jpg to reduce the Zip Size...

 

[Mashiane]

I have reviewed your code, and I understanding that its perhaps being coded by someone who is new to the library. You need to understand the basics.

To do that you need to spend time learning about how the library works. The kitchen sink source code will help in that regard.

First, you are using deprecated code. This is code that existed even before the Mashy Teaches Series existed. This is in relation to BindVueElement and using VElement directly.

I will create an example in the Kitchen Sink about how to have a stepper with a form and input elements, perhaps that will shed some light.

 

[sdleidel]

Thank you for you help.
An Example would be Great.

 

[sdleidel]

The post #2 was for you to understand how grid creation works.

Please spend some time going through this lesson to understand how grids work and how to insert contents into them.

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

21: CRUD - Creating a Dialog Form to capture our Invoices - Part 2

www.b4x.com

There is a video on this lesson in terms of how to create split forms.

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

Understand, thank you

www.b4x.com

What I will also do, is to include an example of how to use forms inside steppers but its the same principle you use as the only example in the kitchen sink just has labels.

The tutorial is too cumbersome for beginners. Problem what I have, that it is not really up-to-date.
Example: Where can I find this? (Photo)
The current Kitchesink does not have it and the link can not be found...

 

[Mashiane]

The tutorial is too cumbersome for beginners. Problem what I have, that it is not really up-to-date.

I have noted your comments

Example: Where can I find this? (Photo)

You wont. This is a very old version of the kitchen sink that ran in 2021 and some stuff in it was DEPRECATED, especially the direct use of the VueElement and BindVueElement! Thus you will not find any reference to that in the updated kitchen sink.

The latest version, which is the single source of truth for everything BVAD3 is provided with source code from the Github. This is running on both Netlify and Github.

This is how it looks.,..

What I would advise you is to skim through the kitchen sink and explore the components being featured and then you can decide what you want to use on your app.

On May 11, I also pinned this thread post so that anyone who wants to can make it their first reference point.

[BANanoVuetifyAD3] How to learn from the New Awesome Kitchen Sink to create your next powerful WebApp/Website

Hi there As a start to anyone interested in BANanoVuetifyAD3 and its webapp/website development eco-system, creating powerful webapps / websites, I greatly recommend the kitchen sink. So you can head over to netlify and explore what has been done so far using the BVAD3 library...

www.b4x.com

All the best!

 

[sdleidel]

Yes i think i understand...

But see step 4.

i have this:

Sub created

    dynaForm.Clear
    dynaForm.AddTextField("firstname", "First Name", "", 10)
    dynaForm.AddClass("firstname", "mx-4")
    dynaForm.AddStyle("firstname", "background-color", "pink")
    dynaForm.SetHint("firstname", "This is a hint")
    dynaForm.SetCols("firstname", "6")
    dynaForm.SetReadOnly("firstname", True)
    
....
end sub

And the Form...

But nothing go in the right direction...


A little help, Code Sample where ok.

How to load a layout in a Stepper item ?

 

[Mashiane]

Can you attach a small project based on your code above?

 

[sdleidel]

Can you attach a small project based on your code above?

Yes...

 

[Mashiane]

But nothing go in the right direction...

I am already using this with Incwadi yamaBali to create dynamic forms, using the same approach. You are possibly missing something.

 

[Mashiane]

Ok, i have checked your code. Lets please go back to post #2 of this thread. The grid.

The first blue item in this grid spans 12 spaces. You will note that in its "Cols" property, in the kitchen sink the value is 12.
The items on the 2nd row, both span 6 spaces. For each of them you will note a value of 6 in the VCol definitions. When creating the columns you need to look at how the output will work across all devices.

On the dynamic form, based on the kitchen example, you used.

dynaForm.SetCols("firstname", "6")

This means only the firstname will be sized to 6, all others will retain 12, if that wont fit on the 12 sized row, they are wrapped to the following row.

The reason that the other items in the dynamic form don't have a 12, is because its default.

For the items in the 3rd row, to make 12, each item is "4" i.e 4+4+4
For the items in the 4th row, to make 12, each item is "3" i.e 3+3+3+3

I hope this makes sense.

 

[Mashiane]

How to load a layout in a Stepper item ?

This is already existing in the kitchen sink, just do a search on the pages that use the VStepper from the source code and you will find it.

 

[Mashiane]

Other comments on your code.

In terms of the kitchen sink code, the dynamic form is not coded on "Initialize" but on the "created" call, you need to remove the code that relates to the dynamic form on initialize. I understand you are learning and finding your way, if however you are diverting from how things are done as per source code examples in the kitchen sink, you are setting yourself up for failure.

created = page components DO NOT exist. This is useful to fetch data etc. The dynamic form works on created because its being created in memory.

If you plan to use a dynamic form inside a vstepper component, rather use the "mounted" sub as by then the stepper EXISTS on the form.

 

[sdleidel]

Thanks for the tips.
However, that doesn't really help me.
I've tried your tips, but it doesn't work.
Can you change this in my source code so that I know what it should look like?

 

[Mashiane]

No you have not implemented my last recommendations, that is why your code is not working.

THIS CODE IS IN THE KITCHEN SINK ViewADStepper code module.

banano.LoadLayout(VStepper1.Item("1"), "mystep1")

 

[sdleidel]

Thanks for your help, now it works.
However, I would have a small question.
I would like to generate different panels at runtime e.g.:
3 pieces with the names a1 a2 and a3, that works if I do that in the "initalize".
Is that also possible in mounted or something?
Background: different users, who log in, should be shown different panels.

 

[Mashiane]

Is that also possible in mounted

Yes.