Share My Creation [Web][SithasoDaisy5] Low Code - A Source Code Generator for your Beautiful BANano WebApps

Hi Fam

Experience it for yourself

In 7 simple steps, you can have a running WebApp with CRUD functionalities...

1757735561235.png



As the name says, SithasoDaisy5 Low Code is a tool to generate source code for your BANano based WebApps using SithasoDaisy5.

This TOOL IS NOT FOR SALE OR FOR RESALE but for the use by the b4x community for FREE, by using this tool you bind yourself to the BANano LICENSE as included in the SithasoDaisy5 Distribution Pack.

In simple easy steps you have a WebApp that you can build up and publish it as simple as ABC.

Step 1. Create a Project.

1757735689169.png


Step 2. Create tables / collections for your project. These will hold your data.

1757735742991.png



Step 3: Create fields for each of your tables and also establish foreign table linkages between the tables.

1757735802098.png


Step 4: Chop & Change your Forms as you see fit

1757735855822.png


Step 5: Generate the source code (see the first image)

Step 6: Create a B4x SithasoDaisy5 BANano Project and paste your source code.

Step 7: Run your app and Publish it to your Domain.


Have fun..


Complete Video Tutorial of creating the relational address book with SithasoDaisy5 Low Code




SithasoDaisy5 Low Code Tour



The details of the complete tutorial are below.

[Web][SithasoDaisy5]🚀 Building Responsive Low-Code Web Apps with BANano in B4X

Hi Fam Experience it for yourself In today’s fast-paced world of software development, low-code platforms are bridging the gap between ideas and working apps faster than ever before. If you're looking to create responsive, modern, and progressive web apps without writing endless lines of...
www.b4x.com www.b4x.com
 
Last edited:
Click to expand...
What's New

Export Functionality - with this functionality one is able to export (backup) a project to a json file. The export will include the project details, all tables and fields.

1757770127643.png


You can also export (backup) a table to a json file. The export includes all the table details and all the field details.

1757770179517.png


The advantage with this is that one person can work on one part of a project and another work on another part and these can be consolidated later on for a final project.

Let's do this!
 
Version 1.05 is now available.

Experience it for yourself

What's New

1. Added a treeview to have an easy to the eye structure of the generated source code.

1757987399523.png

2. Fixed the bugs of duplicated records on the row happening when inline-editing happened. The transition is much more smooth and there is no flickering.

1757987553884.png



3. Added code to handle selects with append buttons that support adding lists. When the app is ran, clicking the plus append button will provide a prompt.

1757987694417.png


Example code generated based on append buttons will allowAdd.

Code: 
Private Sub cboCategory_append (e As BANanoEvent)
    'executed when cboCategory append button is clicked
    e.preventdefault
    'use a sweet-alert2 dialog to ask the user for a Category
    Dim sname As String = banano.Await(app.ShowSwalInputWait("Add Category", "Please type a new category to add below.", "Save", "Cancel"))
    'trim the entered content
    sname = sname.Trim
    'if the content is blank do nothing
    If sname = "" Then Return
    'something has been specified, add it to the database
    App.PagePause
    Dim tblX As SDUIWebSQL
    tblX.Initialize(Main.DBName, "categories")
    'tblX.ShowLogs = True
    'set the schema from the data model
    tblX.SetSchemaFromDataModel(app.DataModels)
    'prepare to add a record
    tblX.PrepareRecord
    'assign fields to add and their values
    tblX.SetField("id", tblX.NextID)
    tblX.SetField("name", sname)
    'execute the INSERT in the database
    Dim aid As String = BANano.Await(tblX.Create)
    If aid <> "" Then
        'reload the select with new records
        BANano.Await(Loadcategories)
        'update the select
        BANano.Await(cboCategory.SetOptionsFromMap(categoriesObject))
        'show the value just added
        cboCategory.Value = aid
    Else
        'read the record id by display value
        aid = BANano.Await(tblX.READ_ID_BY("name", sname))
        cboCategory.Value = aid
    End If
    App.PageResume
End Sub

4. Added Download button on the code. This allows one to get a text file of the generated source code.
5. Fixed some other notable bugs...

Have Fun

Mashy

PS: You can download the repo and run the app locally on your web server.


 
Last edited:
Hi Fam

The thing about No-Code tools is the ability to eliminate as much repititive work as possible. So today I did some enhancements on the tool.

You remember those google color coded name abbreviations? When you deal with CRM and other systems, you might just want such a functionality. This is possible with the Avatar-Placeholder component.

1759000466274.png



For example, we have defined an abbreviation field, its abbreviation will be sourced from the fullname column. We mark it an an "avatarColor" because we want it to automatically translate itself to those color coded abbreviations. As you will note from the fake-data generated, each Avatar-Placeholder here is color-coded.


1759000581500.png


Behind this are two methods, they pick up the full name and get the abbreviation and then color code it depending on the first letter.

Code: 
Sub GetAvatarColorMap As Map
    Dim avatarColors As Map
    avatarColors.Initialize
    
    avatarColors.Put("A", "#F44336")   ' Red
    avatarColors.Put("B", "#E91E63")   ' Pink
    avatarColors.Put("C", "#9C27B0")   ' Purple
    avatarColors.Put("D", "#673AB7")   ' Deep Purple
    avatarColors.Put("E", "#3F51B5")   ' Indigo
    avatarColors.Put("F", "#2196F3")   ' Blue
    avatarColors.Put("G", "#03A9F4")   ' Light Blue
    avatarColors.Put("H", "#00BCD4")   ' Cyan
    avatarColors.Put("I", "#009688")   ' Teal
    avatarColors.Put("J", "#4CAF50")   ' Green
    avatarColors.Put("K", "#8BC34A")   ' Light Green
    avatarColors.Put("L", "#CDDC39")   ' Lime
    avatarColors.Put("M", "#FFEB3B")   ' Yellow
    avatarColors.Put("N", "#FFC107")   ' Amber
    avatarColors.Put("O", "#FF9800")   ' Orange
    avatarColors.Put("P", "#FF5722")   ' Deep Orange
    avatarColors.Put("Q", "#795548")   ' Brown
    avatarColors.Put("R", "#9E9E9E")   ' Grey
    avatarColors.Put("S", "#607D8B")   ' Blue Grey
    avatarColors.Put("T", "#F06292")   ' Pink Accent
    avatarColors.Put("U", "#BA68C8")   ' Purple Accent
    avatarColors.Put("V", "#64B5F6")   ' Blue Accent
    avatarColors.Put("W", "#4DD0E1")   ' Cyan Accent
    avatarColors.Put("X", "#81C784")   ' Green Accent
    avatarColors.Put("Y", "#FFD54F")   ' Amber Accent
    avatarColors.Put("Z", "#A1887F")   ' Brown Grey
    
    ' Numbers 0-9 (using vibrant Material colors)
    avatarColors.Put("0", "#F44336")
    avatarColors.Put("1", "#E91E63")
    avatarColors.Put("2", "#9C27B0")
    avatarColors.Put("3", "#3F51B5")
    avatarColors.Put("4", "#03A9F4")
    avatarColors.Put("5", "#009688")
    avatarColors.Put("6", "#8BC34A")
    avatarColors.Put("7", "#CDDC39")
    avatarColors.Put("8", "#FF9800")
    avatarColors.Put("9", "#795548")

    Return avatarColors
End Sub

Also, the text color needs to be appropriate for the back-ground color. So we detect dark and light colors.

Code: 
Sub GetAvatarTextColorMap As Map
    Dim textColors As Map
    textColors.Initialize
    
    ' Dark backgrounds - use white text (#FFFFFF)
    textColors.Put("A", "#FFFFFF")   ' Red
    textColors.Put("B", "#FFFFFF")   ' Pink
    textColors.Put("C", "#FFFFFF")   ' Purple
    textColors.Put("D", "#FFFFFF")   ' Deep Purple
    textColors.Put("E", "#FFFFFF")   ' Indigo
    textColors.Put("F", "#FFFFFF")   ' Blue
    textColors.Put("G", "#FFFFFF")   ' Light Blue
    textColors.Put("H", "#FFFFFF")   ' Cyan
    textColors.Put("I", "#FFFFFF")   ' Teal
    textColors.Put("J", "#FFFFFF")   ' Green
    textColors.Put("P", "#FFFFFF")   ' Deep Orange
    textColors.Put("Q", "#FFFFFF")   ' Brown
    textColors.Put("S", "#FFFFFF")   ' Blue Grey
    textColors.Put("T", "#FFFFFF")   ' Pink Accent
    textColors.Put("U", "#FFFFFF")   ' Purple Accent
    textColors.Put("Z", "#FFFFFF")   ' Brown Grey
    
    ' Numbers with dark backgrounds
    textColors.Put("0", "#FFFFFF")
    textColors.Put("1", "#FFFFFF")
    textColors.Put("2", "#FFFFFF")
    textColors.Put("3", "#FFFFFF")
    textColors.Put("4", "#FFFFFF")
    textColors.Put("9", "#FFFFFF")
    
    ' Light backgrounds - use dark text (#111827 = Tailwind text-gray-900)
    textColors.Put("K", "#111827")   ' Light Green
    textColors.Put("L", "#111827")   ' Lime
    textColors.Put("M", "#111827")   ' Yellow
    textColors.Put("N", "#111827")   ' Amber
    textColors.Put("O", "#111827")   ' Orange
    textColors.Put("R", "#111827")   ' Grey
    textColors.Put("V", "#111827")   ' Blue Accent
    textColors.Put("W", "#111827")   ' Cyan Accent
    textColors.Put("X", "#111827")   ' Green Accent
    textColors.Put("Y", "#111827")   ' Amber Accent
    
    ' Numbers with light backgrounds
    textColors.Put("5", "#111827")
    textColors.Put("6", "#111827")
    textColors.Put("7", "#111827")
    textColors.Put("8", "#111827")
    
    Return textColors
End Sub

Unique Fields

To eliminate duplicates for our "list-like" content. We are adding "unique" flags for the columns. This way when a record is being added and its name already exists in the database, it is not added. This works on the C, (create) mode when adding records.

Fake-Data Generation

When defining fields for your table, during the design phase you can test your application using fake-data. You need to define in each column what kind of fake data to generate. For testing, 20 records are records.. i.e. FakeType

1759000959174.png


Report Templates & Excel Report Manager

One will be able to generate an Excel Report Template for their report and then use that template on their final app to generate reports. As this is just a basic template, one can customize the template to suit their needs. Writing data to the templates is easy peasy.

Below is an example of a template I built and are using. SithasoDaisy5 will read the excel template and write the data you specify and then save and download the report for you.

1759001112639.png


Form Placement

There is no limit as to where you can place your forms. These can be on the bottom sheet which slides up to show the content...

1759001252843.png


Or Normal Modal

1759001294078.png


Or Right Drawer

1759001330619.png


Generated Source Code

Advancements on the generated source code have been made. By default, Fake Data generation is built in. This means when doing your presentations, you dont have to capture content as an automated process is used to build the fake data based on your preferences. This does not stop you from running tests on your code e.g. feeding it incorrect data / goobly gook to test its functionality thoroughly.

1759001506080.png


Exporting your data to Excel

Built into the tool is the ability to use your generated Excel Report Templates to generate useful reports. You get the template and adjust it to suit your needs and then update this portion of the code with small tweaks to make it work. The source code to export and generate Excel Reports is provided for you.

1759001613257.png


Code Comments

The code is commented as much as possible for understanding what it does.

Enjoy!

Mashiane
 
To demonstrate the power of this tool, we have created the same application using different back-ends. These are the following

1. IndexedDB aka BANanoSQL
2. PocketBase (FireBase/SuperBase Alternative)
3. MySQL via REST API (PHP)

1.

[Web][BANanoSQL] Offline First Relational Address Book created with SithasoDaisy5 Low Code Generator

Hi Fam Download Source Code Access the Address Book on Vercel SithasoDaisy5 Low Code Generator 🏗️ Building an Offline-First Address Book with SithasoDaisy5 Low-Code Power In today’s fast-paced world, we expect our apps to work anytime, anywhere — even offline. That’s why I recently built a...
www.b4x.com www.b4x.com

2.

[Web][SithasoDaisy5] Full Stack LowCode Generated Address Book CRUD WebApp using PocketBase Back-End

Hi Fam Download Complete Deployable Project (Source Included) Here is it and 99% of the UI, Source Code has been done via the SithasoDaisy5 LowCode Generator. I kid you not. We have a dashboard, CRUD functionality and Excel Reporting. CRUD SCREENS Running An...
www.b4x.com www.b4x.com

3.

[Web][SithasoDaisy5] Low Code Generated CRUD WebApp using MySQL as Back-End via REST API (PHP)

Hi Fam Download Complete Deployable Project (Source Included) To run this WebApp, you will need a webserver running PHP. We use Laragon for development. You will also need BANano You will also need SithasoDaisy5, get it from this GitHub Repo This app has been developed using SithasoDaisy5 Low...
www.b4x.com www.b4x.com

4.

[Web][SithasoDaisy5] Low Code Generated CRUD WebApp using NoSQL CouchDB & PouchDB as Back-End (Offline Db with Sync to Server Functionality)

Hi Fam Download Complete Deployable Project (Source Included) To run this WebApp, you will need a webserver. We use Laragon for development. You will also need BANano You will also need SithasoDaisy5, get it from this GitHub Repo This app has been developed using SithasoDaisy5 Low Code...
www.b4x.com www.b4x.com
Enjoy!
 
Last edited:
Support for SithasoApex now added.

1764433035285.png



1764433070219.png


1764433091991.png




Let's look at the simplicity of how the charts are generated. After one add the component to their page and set properties. One is able to execute code like this to define the charts.

Code: 
Sub BuildSDUI5ApexChart(component As Map)
    Try
        Dim sComponentName As String = component.Get("componentname")
        Dim thisComp As SDUI5ApexChart
        thisComp.Initialize(Me, sComponentName, sComponentName)
        thisComp.SetProperties(component)
        BANano.Await(thisComp.AddComponent)
        'area|bar|column|donut|line|pie|polarArea|radar|radialBar|rangeArea|scatter
        Dim sChartType As String = component.Get("TypeOf")
        Select Case sChartType
        Case "line"
            thisComp.Clear
            thisComp.AddCategories(Array("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"))
            thisComp.AddSeries("Daily Visitors", "#008FFB", Array(1200, 1350, 1180, 1420, 1680, 1890, 2100))
            thisComp.Refresh
        Case "area"
            thisComp.clear
            thisComp.addCategories(Array("Jan","Feb","Mar","Apr","May","Jun","Jul"))
            thisComp.addSeries("Organic", "#008FFB", Array(44,55,41,67,22,43,21))
            thisComp.addSeries("Direct", "#00E396", Array(13,23,20,8,13,27,33))
            thisComp.addSeries("Referral", "#FEB019", Array(11,17,15,15,21,14,22))
            thisComp.refresh
        Case "bar"
            thisComp.clear
            thisComp.addCategories(Array("Jan","Feb","Mar","Apr","May","Jun"))
            thisComp.addSeries("Revenue", "#FF4560", Array(1200,1500,1800,2200,1900,2500))
            thisComp.refresh
        Case "column"
            thisComp.clear
            thisComp.addCategories(Array("Jan","Feb","Mar","Apr","May"))
            thisComp.addSeries("Revenue", "#008FFB", Array(100,120,140,160,180))
            thisComp.addSeries("Target", "#00E396", Array(110,130,135,155,175))
            thisComp.refresh
        Case "donut"
            thisComp.clear
            thisComp.addSeries("Chrome","#008FFB",65)
            thisComp.addSeries("Firefox","#00E396",20)
            thisComp.addSeries("Safari","#FEB019",10)
            thisComp.addSeries("Other","#FF4560",5)
            Dim options As Map = CreateMap()
            app.UI.PutRecursive(options, "stroke.width", 6)
            app.UI.PutRecursive(options, "stroke.colors", Array("#fff"))
            app.UI.PutRecursive(options, "stroke.lineCap", "round")
            thisComp.UpdateOptions(options)
            thisComp.refresh
        Case "pie"
            thisComp.clear
            thisComp.addSeries("Desktop", "#008FFB", 44)
            thisComp.addSeries("Mobile", "#00E396", 23)
            thisComp.addSeries("Tablet", "#FEB019", 33)
            Dim options As Map = CreateMap()
            app.UI.PutRecursive(options, "stroke.width", 6)
            app.UI.PutRecursive(options, "stroke.colors", Array("#fff"))
            app.UI.PutRecursive(options, "stroke.lineCap", "round")
            app.UI.PutRecursive(options, "plotOptions.pie.dataLabels.offset", 0)
            app.UI.PutRecursive(options, "plotOptions.pie.dataLabels.style.colors", Array("#fff"))
            thisComp.UpdateOptions(options)
            thisComp.refresh
        Case "polarArea"
            thisComp.clear
            thisComp.addSeries("House A", "#FF7A59", 44)
            thisComp.addSeries("House B", "#FFD166", 20)
            thisComp.addSeries("House C", "#06D6A0", 13)
            thisComp.addSeries("House D", "#4CC9F0", 43)
            thisComp.addSeries("House E", "#7209B7", 27)
            thisComp.refresh
        Case "radar"
            thisComp.clear
            thisComp.addCategories(Array("Strength","Speed","Endurance","Agility","Technique","Luck"))
            thisComp.addSeries("Car 1", "#AA00FF", Array(80,50,30,40,100,20))
            thisComp.refresh
        Case "radialBar"
            thisComp.clear
            thisComp.addSeries("Progress", "#008FFB", 70)
            thisComp.addSeries("Score", "#00E396", 80)
            thisComp.addSeries("Rating", "#FEB019", 90)
            thisComp.refresh
        Case "rangeArea"
            Dim xSeries As String = "New York Temperature"
            thisComp.clear
            thisComp.addSeriesColor(xSeries, "#008FFB")
            thisComp.addSeriesPoint(xSeries, "Jan", Array(-2, 4))
            thisComp.addSeriesPoint(xSeries, "Feb", Array(-1, 6))
            thisComp.addSeriesPoint(xSeries, "Mar", Array(3, 10))
            thisComp.addSeriesPoint(xSeries, "Apr", Array(8, 16))
            thisComp.addSeriesPoint(xSeries, "May", Array(13, 22))
            thisComp.addSeriesPoint(xSeries, "Jun", Array(18, 26))
            thisComp.addSeriesPoint(xSeries, "Jul", Array(21, 29))
            thisComp.addSeriesPoint(xSeries, "Aug", Array(21, 28))
            thisComp.addSeriesPoint(xSeries, "Sep", Array(17, 24))
            thisComp.addSeriesPoint(xSeries, "Oct", Array(11, 18))
            thisComp.addSeriesPoint(xSeries, "Nov", Array(6, 12))
            thisComp.addSeriesPoint(xSeries, "Dec", Array(1, 7))
            thisComp.Refresh
        Case "scatter"
            thisComp.clear
            thisComp.addSeriesColor("Data Points", "#008FFB")
            thisComp.addSeriesPoint("Data Points", 10, 20)
            thisComp.addSeriesPoint("Data Points", 15, 25)
            thisComp.addSeriesPoint("Data Points", 20, 30)
            thisComp.addSeriesPoint("Data Points", 25, 35)
            thisComp.addSeriesPoint("Data Points", 30, 40)
            thisComp.refresh
        End Select
    Catch
    End Try        'ignore
End Sub
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article Article
Share My Creation [Web][SithasoDaisy5] Low Code Generated CRUD WebApp using NoSQL CouchDB & PouchDB as Back-End (Offline Db with Sync to Server Functionality)
Replies
0
Views
2K
Mashiane
Mashiane
Mashiane
  • Article Article
Share My Creation [Web][SithasoDaisy5] Low Code Generated CRUD WebApp using MySQL as Back-End via REST API (PHP)
Replies
0
Views
2K
Mashiane
Mashiane
Mashiane
  • Article Article
Share My Creation [Web][SithasoDaisy5] Full Stack LowCode Generated Address Book CRUD WebApp using PocketBase Back-End
Replies
0
Views
2K
Mashiane
Mashiane
Mashiane
  • Question Question
B4J Question [Web][SithasoDaisy5] Questions & Answers
Replies
14
Views
5K
Mashiane
Mashiane
Mashiane
  • Article Article
B4J Library [Web][SithasoDaisy5] - Create WebSites & WebApps with the power of the Abstract Designer (OpenSource)
2 3
Replies
57
Views
24K
Mashiane
Mashiane
Back
Top