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...

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.

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

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

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

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




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

 

[Mashiane]

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.

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

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!

 

[Mashiane]

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.

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.

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.

Example code generated based on append buttons will allowAdd.

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.

 

[Mashiane]

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.

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.

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.

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.

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

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.

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...

Or Normal Modal

Or Right Drawer

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.

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.

Code Comments

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

Enjoy!

Mashiane