Share My Creation [BANanoVuetifyAD3] Organogram Lite FireBase WebApp Source Code @ $11

Ola

See on GitHub

With this project one is able to create multiple projects with multiple child elements. The back-end database is Firebase. This means one has to create a FB profile to store the contents.

organogramlite.jpg



What you will learn?

  1. Firebase CRUD (Create, Read, Update, Delete)
  2. Loading Selects/Combo/AutoComplete from firebase?
  3. Confirmation Dialogs for Deletes
  4. Creating flowcharts & creating node templates.
How does it work?

The first part is creating a project. Here you specify the name of the project and then the number of children planned to be added. The YT video below shows how to perform CRUD operations for project.






Below were the first stages of this project (without a backend)

It is with pleasure to have finally managed to make this a success. Its been a hectic 3 days. This has been one of those bucket list projects have always wanted to score. The great thing is that, its the functionality I also wanted to add to Database.Show, so that will be possible now. This WebApp is developed using BANano+Vuetify=BVAD3

Create organograms, hierarchies, mindmaps, flowcharts anyway you want because you can customize each node to be exactly what you want.

OrganogramLite.jpg


For example, we have created this organogram with: (You can also create a crud form to add the nodes and persist to a database)

Code: 
'build data before loading
Sub oncreate
    'clear the nodes
    organogram.ClearNodes
    Dim extraData As Map = CreateMap()
    extraData.Put("color", vuetify.COLOR_CYAN)
    'add the master node
    organogram.AddNode(-1, "1", "B4x", "b4x", "Development RAD Tools", extraData)

    Dim extraData3 As Map = CreateMap()
    extraData3.Put("color", vuetify.COLOR_INDIGO)

    organogram.AddNode("1", "2", "B4i", "b4i", "iOS Development", extraData3)
    organogram.AddNode("1", "3", "B4a", "b4a", "Android Development", extraData3)
    organogram.AddNode("1", "4", "B4r", "b4r", "Arduino Development", extraData3)
    organogram.AddNode("1", "5", "B4j", "b4j", "Desktop Development", extraData3)
    '
    'add developers
    Dim extraData1 As Map = CreateMap()
    extraData1.Put("color", vuetify.COLOR_YELLOW)

    organogram.AddNode("2", "6", "Engineer", "Engineer", "Erel", extraData1)
    organogram.AddNode("2", "7", "Tester", "Tester", "Erel", extraData1)
    organogram.AddNode("2", "8", "Release", "Release", "Erel", extraData1)

    Dim extraData2 As Map = CreateMap()
    extraData2.Put("color", vuetify.COLOR_ORANGE)
    'add testers
    organogram.AddNode("3", "9", "Engineer", "Engineer", "Erel", extraData2)
    organogram.AddNode("3", "10", "Tester", "Tester", "Erel", extraData2)
    organogram.AddNode("3", "11", "Release", "Release", "Erel", extraData2)

    organogram.Refresh
End Sub

You can then add functionality to save and retrieve these to whatever backend you want.

The source code for the OrganogramLite WebApp is $11 and you can create anything you want to your hearts desire. My paypal email address is [email protected].

We can correspond on [email protected].

Whats good about this...

1. We use a custom view...

1620855053561.png


2. We create our node in whatever way we want..

1620855715644.png


The rest is magic!!
 
Last edited:
Click to expand...
company.jpg


B4X: 
'build data before loading
Sub oncreate
    'clear the nodes
    company1.ClearNodes
    Dim extraData As Map = CreateMap()
    extraData.Put("color", vuetify.COLOR_GREEN)
    'add the master node
    company1.AddNode(-1, "1", "Board", "Board", "", extraData)
    company1.AddNode("1", "2", "General Manager", "General Manager", "", extraData)
    '
    Dim extraData3 As Map = CreateMap()
    extraData3.Put("color", vuetify.COLOR_BLUE)
    
    company1.AddNode("2", "3", "Human Resource Manager", "Human Resource Manager", "", extraData3)
    company1.AddNode("2", "4", "Design Manager", "Design Manager", "", extraData3)
    company1.AddNode("2", "5", "Operations Manager", "Operations Manager", "", extraData3)
    company1.AddNode("2", "6", "Marketing Manager", "Marketing Manager", "", extraData3)
    '
    'add developers
    Dim extraData1 As Map = CreateMap()
    extraData1.Put("color", vuetify.COLOR_LIGHTBLUE)
    
    company1.AddNode("3", "7", "Trainers", "Trainers", "", extraData1)
    company1.AddNode("3", "8", "Recruiting Team", "Recruiting Team", "", extraData1)
    company1.AddNode("3", "9", "Finance Asst. Manager", "Finance Asst. Manager", "", extraData1)
    
    company1.Refresh
End Sub
 
Using images only...

Employees.jpg



B4X: 
'build data before loading
Sub oncreate
    'clear the nodes
    staff.ClearNodes
    'add the master node
    staff.AddNode(-1, "1", "Board", "./assets/img1.png", "", Null)
    staff.AddNode("1", "2", "General Manager", "./assets/img2.png", "", Null)
    '
    staff.AddNode("2", "3", "Human Resource Manager", "./assets/img3.png", "", Null)
    staff.AddNode("2", "4", "Design Manager", "./assets/img4.png", "", Null)
    staff.AddNode("2", "5", "Operations Manager", "./assets/img5.png", "", Null)
    staff.AddNode("2", "6", "Marketing Manager", "./assets/img6.png", "", Null)
    '
    staff.AddNode("3", "7", "Trainers", "./assets/img7.png", "", Null)
    staff.AddNode("3", "8", "Recruiting Team", "./assets/img8.png", "", Null)
    staff.AddNode("3", "9", "Finance Asst. Manager", "./assets/img9.png", "", Null)
    
    staff.Refresh
End Sub
 
Check out this WebApp created using the same terminology.

Nobel Prize Show Educational WebApp using BVAD3

Ola Access WebApp The Nobel Prize Organization has a nice API to query the Laureates . So I started to play around... The WebApp itself is response. This is how it looks on mobile. Then on medium and large devices... Within the records, as of today, there are about 962 Laureates...
www.b4x.com www.b4x.com
 
To update the data, do you poll or use another system that updates the data when there is a change?
 
For the above examples the back-ends were to store entered data and retrieve it to show the nodes. I guess that depends on your design. You can create your app to work like that. Like I was thinking of an online brain-storming app where people at different locations can "feed" content and everyone sees changes in "real-time". When I do that though it will be for sale. ;)
 
Mashiane said:
For the above examples the back-ends were to store entered data and retrieve it to show the nodes. I guess that depends on your design. You can create your app to work like that. Like I was thinking of an online brain-storming app where people at different locations can "feed" content and everyone sees changes in "real-time". When I do that though it will be for sale. ;)
Click to expand...
I did not understand anything, however if polling is not necessary I will consider buying it
 
Created a topic.
Please take a look and answer my questions.
 
Mashiane said:
Ola

See on GitHub

With this project one is able to create multiple projects with multiple child elements. The back-end database is Firebase. This means one has to create a FB profile to store the contents.

View attachment 115859


What you will learn?

  1. Firebase CRUD (Create, Read, Update, Delete)
  2. Loading Selects/Combo/AutoComplete from firebase?
  3. Confirmation Dialogs for Deletes
  4. Creating flowcharts & creating node templates.
How does it work?

The first part is creating a project. Here you specify the name of the project and then the number of children planned to be added. The YT video below shows how to perform CRUD operations for project.






Below were the first stages of this project (without a backend)

It is with pleasure to have finally managed to make this a success. Its been a hectic 3 days. This has been one of those bucket list projects have always wanted to score. The great thing is that, its the functionality I also wanted to add to Database.Show, so that will be possible now. This WebApp is developed using BANano+Vuetify=BVAD3

Create organograms, hierarchies, mindmaps, flowcharts anyway you want because you can customize each node to be exactly what you want.

View attachment 113281

For example, we have created this organogram with: (You can also create a crud form to add the nodes and persist to a database)

Code: 
'build data before loading
Sub oncreate
    'clear the nodes
    organogram.ClearNodes
    Dim extraData As Map = CreateMap()
    extraData.Put("color", vuetify.COLOR_CYAN)
    'add the master node
    organogram.AddNode(-1, "1", "B4x", "b4x", "Development RAD Tools", extraData)

    Dim extraData3 As Map = CreateMap()
    extraData3.Put("color", vuetify.COLOR_INDIGO)

    organogram.AddNode("1", "2", "B4i", "b4i", "iOS Development", extraData3)
    organogram.AddNode("1", "3", "B4a", "b4a", "Android Development", extraData3)
    organogram.AddNode("1", "4", "B4r", "b4r", "Arduino Development", extraData3)
    organogram.AddNode("1", "5", "B4j", "b4j", "Desktop Development", extraData3)
    '
    'add developers
    Dim extraData1 As Map = CreateMap()
    extraData1.Put("color", vuetify.COLOR_YELLOW)

    organogram.AddNode("2", "6", "Engineer", "Engineer", "Erel", extraData1)
    organogram.AddNode("2", "7", "Tester", "Tester", "Erel", extraData1)
    organogram.AddNode("2", "8", "Release", "Release", "Erel", extraData1)

    Dim extraData2 As Map = CreateMap()
    extraData2.Put("color", vuetify.COLOR_ORANGE)
    'add testers
    organogram.AddNode("3", "9", "Engineer", "Engineer", "Erel", extraData2)
    organogram.AddNode("3", "10", "Tester", "Tester", "Erel", extraData2)
    organogram.AddNode("3", "11", "Release", "Release", "Erel", extraData2)

    organogram.Refresh
End Sub

You can then add functionality to save and retrieve these to whatever backend you want.

The source code for the OrganogramLite WebApp is $11 and you can create anything you want to your hearts desire. My paypal email address is [email protected].

We can correspond on [email protected].

Whats good about this...

1. We use a custom view...

View attachment 113283

2. We create our node in whatever way we want..

View attachment 113284

The rest is magic!!
Click to expand...
How to buy this source code from you ?
 
NGUYEN TUAN ANH said:
i have send you my money
If you receiced my money, please send your source code to my email: [email protected]
Thank you very much !
Click to expand...
Please access your Gumroad Account and download the content there... I have also sent it to you.

Thank you so much for your certificates of appreciation.

NB: This is a very old project and is not compatible with 3.6, you will have to use an earlier version of BVAD3.
 
Last edited:
i have received your source code, thank you very much
But i don't see Firebase CRUD (Create, Read, Update, Delete) in [BANanoVuetifyAD3]
Could you please help me ?

NB: I don't see any connection to FireBase Realtime Database
 
NGUYEN TUAN ANH said:
i have received your source code, thank you very much
But i don't see Firebase CRUD (Create, Read, Update, Delete) in [BANanoVuetifyAD3]
Could you please help me ?

NB: I don't see any connection to FireBase Realtime Database
Click to expand...
Let me check from my old backups as this is a very old project, apologies for the inconvenience.
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article Article
Share My Creation [BANanoVuetifyAD3] WhatsApp CRM
Replies
2
Views
6K
Dave G
D
Mashiane
  • Article Article
Share My Creation BANanoVuetifyAD3 - New Form Builder Concept
Replies
18
Views
11K
joulongleu
J
Mashiane
Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
7 8 9
Replies
164
Views
123K
bridge1
B
Mashiane
  • Article Article
Share My Creation [BANAnoVuetifyAD3] Creating CRUD based WebApps free eBook (for those in a hurry)
2
Replies
25
Views
15K
Mashiane
Mashiane
Mashiane
  • Article Article
B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano
34 35 36
Replies
707
Views
278K
Mashiane
Mashiane
Back
Top