B4J Tutorial [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 JavaScript or CSS, then SithasoDaisy5, powered by BANano, TailwindCSS, and DaisyUI, is the perfect combination for you.

In this post, we’ll explore how to harness these tools within the B4X ecosystem to build stunning web applications in record time.

What is SithasoDaisy5?​

SithasoDaisy5 is a low-code UI framework built specifically for BANano, a B4X library that compiles B4J code into full-fledged JavaScript-powered web apps. It seamlessly integrates TailwindCSS and DaisyUI, giving you access to:

• A utility-first CSS framework (TailwindCSS)
• Beautifully styled components (DaisyUI)
• A drag-and-drop approach for web app design. Use the power of the b4x abstract designer to create your page layouts.
• A responsive layout engine built on Flex/Grid

Whether you’re a B4X pro or just dipping your toes into web development, SithasoDaisy5 simplifies UI design with minimal coding effort.

Why TailwindCSS and DaisyUI?​

TailwindCSS is the go-to utility-first CSS framework that allows you to design directly in your markup. No custom CSS files, no naming headaches—just rapid styling.

DaisyUI builds on Tailwind by offering beautifully themed components like:

• Buttons, Cards, Alerts
• Modals, Drawers
• Tabs, Menus, Dropdowns and more

How BANano Powers It All​

BANano is a B4J library developed by @alwaysbusy that lets you write B4X code and compile it into HTML/JS/CSS.

It brings the productivity of the B4X language to the web, letting you:

• Build Progressive Web Apps (PWAs)
• Use WebSocket communication
• Store data offline
• Access JavaScript functions via B4X syntax and more..

Together with SithasoDaisy5, you get a full low-code stack: Design, Logic, Deployment—all inside B4J.

Let's cut to the chase in these some simple steps...

Have fun!

PS: SithasoDaisy5 LowCode Back-End

The SithasoDaisy5 LowCode App stores your project in the web indexedDB back-end. This is accessible via developer tools. Your projects will be downloadable and restorable.

NB: Creating LowCode BANanoSQL Projects

Please ensure that you copy and paste the additional libraries contents to your b4j additional libraries folder.

How to get started?

Get the latest version of BANano here...

[Web][BANano] Website/App/PWA library with Abstract Designer support

Download the latest version here: https://www.b4x.com/android/forum/threads/banano-a-sneak-peek-into-a-progressive-web-app-library.99740/#post-627764 INTRO BANano is a new B4J library to websites/webapps with (offline) Progressive Web App support. Unlike its big brother ABMaterial, BANano...

www.b4x.com

Get SithasoDaisy5 here..

GitHub - Mashiane/SithasoDaisy5: Developing SithasoDaisy on Tailwind4 and Daisy5

Developing SithasoDaisy on Tailwind4 and Daisy5. Contribute to Mashiane/SithasoDaisy5 development by creating an account on GitHub.

github.com

Remember to copy the additional libraries to your additional libraries folder.

SithasoDaisy5 Low Code is available online on this link, however you can download and publish in on your webser and use it.

Source Code

GitHub - Mashiane/SithasoDaisy5-Low-Code: A low source code generator for your SithasoDaisy WebApps with BANano

A low source code generator for your SithasoDaisy WebApps with BANano - Mashiane/SithasoDaisy5-Low-Code

github.com

Online Version

SithasoDaisy5 LowCode

SithasoDaisy5 LowCode

sithaso-daisy5-low-code.vercel.app

I'm here should you need help and have questions to ask, just start a new question thread for your question...

Let's do this...

Mashy


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

 

[Mashiane]

Step 1: Define your project.

A low code SithasoDaisy5 project can be a database based application. This can have multiple tables/collections and multiple pages.

Above we have defined a project called addressbook. It will use a PocketBase back-end. We can have other back-ends we can use. Going forward we will use BANanoSQL as a back-end and later explore other back-ends.

One is able to Add/Edit one or more projects.

 

[Mashiane]

Step 2: Define the tables / collection

We defined our app and the back-end it will use. The next step is to define the tables that it will use. Each table can have different purposes, for example, categories, provinces, contacts etc etc.

Here we have defined a contact table/collection. It has a primary key called id and the display value is fullname. A display value is used for the Delete Confirm Dialog.

One can add one or more tables within an app and these can be linked via the UI code to be generated. We can also give our table one or more properties, for example height, width etc.

 

[Mashiane]

Step 3: Define your table/collection fields

In our address book, we will store some information for our contacts. This could be the information that we can store.

• Full Name
• Mobile
• Telephone
• Email Address
• Category
• Street Address 1
• Street Address 2
• City
• State
• Province
• Postal Code

So what we need to do is to define each field/column that will store information for our contacts, just like in Excel, see this example.

We want our app to be able to store this information easily for our Web Application, so for the contact table, we need to define each field and then give it some properties to make it work for us. In the image below, we have translated our fields to a structure that above and beyond defining our table schema, it also defines how our UI will look like.

Each field in a database needs to have a data-type. In the above grid we define the data type and also define the input component that it will use for entry in our UI and also its placement in the UI screens. We will use a modal dialog to Add/Edit each of our contacts.

The Row/Column defines the grid location of our input component.

One is also able to define one or more columns for their table/collection.

 

[Mashiane]

Step 4: Automated UI Creation & Adjustment

SithasoDaisy5 LowCode is able to generate a preview of how your UI will look like. Based on the above example, we are able to view that our UI will be like this. All of this depends on how we define each of the fields we will use and their titles and data-types.

From the screen above, most of the inputs are required. We can control which fields are required or not by updating our field definitions.

As noted above, the components have a gray border around them.

This is useful in case you want to have some elevation on the components, however in most cases you might not need it and can be removed.

To remove the border, one can ensure that these properties are unchecked and blank.

Having added code to automate the border removal. The modal dialog to Add/Edit a contact is now looking better without borders per input component.

 

[Mashiane]

Step 5: Let's add some selects/drop downs

1. We want both the category and province to be from a dropdown.

So we change the component type for both of these to be selectGroup. That will enable them to have prepend/append icons. The aim is to be able to add a category/province if it does not exist on the select.

This way we can also add two additional tables/collections to the project. One for provinces and one for categories.

This new design when updated will now look like this...

 

[Mashiane]

Step 6: Foreign Tables


For our app, we have 2 foreign tables to create, one for categories and one for provinces. This will help us ensure that the data we have is unique and has intergrity.

Both these tables (categories & provinces) will just have 2 fields, id and name.

Linking Contact Categories & Province fields to Foreign Tables

 

[Mashiane]

Step 7: Low Code Generation

After you have specified all your settings for your app, tables, fields and form design, you can generate the code which will be used in your app.

In a click of a button, you have code that you can copy and paste in your code module and then do a little updates and generate a working app.

 

[Mashiane]

The first post has been updated with a complete video tutorial..