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.




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.



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

B4X: 
'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 anele@mbangas.com.

We can correspond on mbanga.anele@gmail.com.

Whats good about this...

1. We use a custom view...



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



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

Mashiane

Expert
Licensed User
Longtime User


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
 

Mashiane

Expert
Licensed User
Longtime User
Using images only...




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
 

Mashiane

Expert
Licensed User
Longtime User
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
 

Star-Dust

Expert
Licensed User
Longtime User
To update the data, do you poll or use another system that updates the data when there is a change?
 

Mashiane

Expert
Licensed User
Longtime User
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.
 

Star-Dust

Expert
Licensed User
Longtime User
I did not understand anything, however if polling is not necessary I will consider buying it
 
S

Sergey_New

Well-Known Member
Licensed User
Longtime User
Created a topic.
Please take a look and answer my questions.
 
You must log in or register to reply here.
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…