B4J Tutorial SithasoDaisy TailwindCSS UI Toolkit: Q & A

Mashiane · Nov 19, 2022

Hi there

NB: Where possible, please include a simple project that demonstrates your use case.

Do you have any questions about SithasoDaisy UI Toolkit?

You can shoot it here and we will oblige.

Thanks in advance?

Join on Telegram

SithasoDaisy

TailwindCSS WebApps using b4x

t.me

Check $5 WebApps

SithasoDaisy WebApps @ $5 Each

Hi there Disclaimer: These WebApps are hosted on Netlify and the back-end hosted on PocketHost (just for demonstration purposes). You will have to set up the SQLite Webserver on your own machine for a better experience. PocketHost is not recommended for production purposes as its slow compared...

www.b4x.com

Mashiane · Mar 22, 2024

giannimaione said:
how to use Search into SDUITable ?

here search from SDUITable:
View attachment 152039
search with phpadmin (mysql) is correct
View attachment 152040

SithasoDaisy uses a fuzzy search (https://www.fusejs.io/). You will have to DM me a dump of your records so that I can reproduce this and see what could be happening.
This searches on all the columns in the table per record and detects matches from there and not just one column.

You can Log(BANano.ToJSON(.results)) and then DM me the result.

giannimaione · Mar 26, 2024

SithasoDaisy,

slow compilation
maybe there are too many libraries?

and into pgIndex:

B4X:

Sub AddUses
    BANano.Await(app.UsesPDF)
    'BANano.Await(app.UsesExcel)
    BANano.Await(app.UsesCSV)
    'BANano.Await(app.UsesDropZone)
    BANano.Await(app.UsesFlatPickDateTime)
    BANano.Await(app.UsesRollDate)
    BANano.Await(app.UsesPocketBase)
    BANano.Await(app.UsesFlipPage)
    BANano.Await(app.UsesTimeLine)
    BANano.Await(app.UsesGridNav)
    BANano.Await(app.UsesChartKick)
    'BANano.Await(app.UsesQRCode)
    'BANano.Await(app.UsesBarCodeReader)
    'BANano.Await(app.UsesWebCam)
    BANano.Await(app.UsesAxios)
    BANano.Await(app.UsesLottiePlayer)
    BANano.Await(app.UsesDocxTemplator)
    BANano.Await(app.UsesHTMLParser)
    BANano.Await(app.UsesLZCompressString)
    BANano.Await(app.UsesFullCalendar)
    BANano.Await(app.UsesDevice)
    'BANano.Await(app.UsesKanBan)
    BANano.Await(app.UsesAES)
    'BANano.Await(app.UsesGMaps)
    'BANano.Await(app.UsesAES4PHP)
    BANano.Await(app.UsesToastChart)
    'BANano.Await(app.UsesMockupCode)
    'BANano.Await(app.UsesFireBase)
    'BANano.Await(app.UsesSupaBase)
    BANano.Await(app.UsesRelax)
    BANano.Await(app.UsesGijgo)
    BANano.Await(app.UsesJustGage)
    BANano.Await(app.UsesFluidMeter)
    BANano.Await(app.UsesFrappeGantt)
    BANano.Await(app.UsesEvoCalendar)
    BANano.Await(app.UsesCollectJS)
    BANano.Await(app.UsesSwiper)
    'BANano.Await(app.UsesStories)
    BANano.Await(app.UsesEnjoyHint)
End Sub

wait 40 50 seconds

Processing b4xlib: sithasodaisyrelax
Processing b4xlib: sithasodaisyrolldate
Processing b4xlib: sithasodaisysqlitee
Processing b4xlib: sithasodaisysupabase
Processing b4xlib: sithasodaisytoastchart
Processing b4xlib: sithasodaisy
Processing b4xlib: sithasodaisyalasqle
Processing b4xlib: sithasodaisyaxios
Processing b4xlib: sithasodaisycollectjs
Processing b4xlib: sithasodaisycsv
Adding Layout articolilayout used by articoli
Adding Layout pagamelayout used by pagame
Adding Layout homelayout used by pghome
Adding Layout baselayout used by pgindex
Adding Layout adsigninlayout used by pgsignin
Adding Layout adsignuplayout used by pgsignup
Adding Layout prova used by prova
Adding Layout varmov used by varmov
Adding Layout varordini used by varordini
Adding Layout adblanklayout used by blanklayout
Adding Layout categorielayout used by categorie
Adding Layout clientslayout used by clients
Adding Layout disponibile used by disponibile
Adding Layout insmov used by insmov
Adding Layout movord used by movord
Adding Layout ordini used by ordini

'**** there is a wait of 40 50 seconds ****

OPTIMISATION: 4504 method(s) appear to be unused. You should set RemoveDeadCode=True to speed up the WebApp considerably!
OPTIMISATION: 77 class(es) appear to be unused. You should set RemoveDeadCode=True to speed up the WebApp considerably!
Copying CSS files to WebApp assets...
Copying Javascript files to WebApp assets...
Building C:\pocketbase\pb_public\pastafactory\index.html
OPTMIZATION TIPS
----------------------
You are using A LOT of seperate CSS and JS files! This demands a lot of server roundtrips which can slow down your website/webapp considerably
This results in fewer page views, a decreased customer satisfaction and ultimately a loss in sales conversions
----------------------------------------------------------------------------------------
BANano detected over 1360.6KB of UNUSED TRANSPILED CODE in the WebApp!
Activate the RemoveDeadCode in TranspilerOptions to speed up the WebApp considerably.
----------------------------------------------------
BANano v8.19: conversion finished!
----------------------------------------------------

Mashiane · Mar 26, 2024

giannimaione said:

SithasoDaisy,

slow compilation
maybe there are too many libraries?
View attachment 152162
and into pgIndex:

B4X:

Sub AddUses
    BANano.Await(app.UsesPDF)
    'BANano.Await(app.UsesExcel)
    BANano.Await(app.UsesCSV)
    'BANano.Await(app.UsesDropZone)
    BANano.Await(app.UsesFlatPickDateTime)
    BANano.Await(app.UsesRollDate)
    BANano.Await(app.UsesPocketBase)
    BANano.Await(app.UsesFlipPage)
    BANano.Await(app.UsesTimeLine)
    BANano.Await(app.UsesGridNav)
    BANano.Await(app.UsesChartKick)
    'BANano.Await(app.UsesQRCode)
    'BANano.Await(app.UsesBarCodeReader)
    'BANano.Await(app.UsesWebCam)
    BANano.Await(app.UsesAxios)
    BANano.Await(app.UsesLottiePlayer)
    BANano.Await(app.UsesDocxTemplator)
    BANano.Await(app.UsesHTMLParser)
    BANano.Await(app.UsesLZCompressString)
    BANano.Await(app.UsesFullCalendar)
    BANano.Await(app.UsesDevice)
    'BANano.Await(app.UsesKanBan)
    BANano.Await(app.UsesAES)
    'BANano.Await(app.UsesGMaps)
    'BANano.Await(app.UsesAES4PHP)
    BANano.Await(app.UsesToastChart)
    'BANano.Await(app.UsesMockupCode)
    'BANano.Await(app.UsesFireBase)
    'BANano.Await(app.UsesSupaBase)
    BANano.Await(app.UsesRelax)
    BANano.Await(app.UsesGijgo)
    BANano.Await(app.UsesJustGage)
    BANano.Await(app.UsesFluidMeter)
    BANano.Await(app.UsesFrappeGantt)
    BANano.Await(app.UsesEvoCalendar)
    BANano.Await(app.UsesCollectJS)
    BANano.Await(app.UsesSwiper)
    'BANano.Await(app.UsesStories)
    BANano.Await(app.UsesEnjoyHint)
End Sub

wait 40 50 seconds

It seems you are running the demo and yes it's a huge app and thus will take time to compile.

Also on the demo, the removal of dead code has not been activated. I have not tried using this as yet.

Please note that which each new version of Banano, the compilation time increases due to new features. For example the compilation time between 7 and 8 is 'feelable', so I have grown more patience. This is due to what Banano does internally about your project. The bigger the project is the more time it will take.

The demo app is about everything on the b4xlib showcase too. With other projects that don't use all features of the b4xlib the compilation process might be a little quick.

giannimaione · Mar 26, 2024

Mashiane said:
It seems you are running the demo

no, it is a new project
yes, i have copy e paste from your demo!

in my project features important are: pocketbase, sduitable, sduitext (with date-picker), sduistats, label, buttons;
maybe I will have to generate pdf or csv later

which libraries can I exclude?
and which BANano.Await(app. .......) can i exclude?

Mashiane · Mar 26, 2024

I see, the easiest way to create a new project with SithasoDaisy is just use the provided templates and then add the b4xlibs you need as and when.

In most of my examples I just use the MultiUser template and then tweak other things from there.

Depending on which date picker you need, you can select FlatPick / RollDate.

The splitting of the b4xlibs was done so that one can choose which libs to use and not and not bundle your apps with libs you wont use as explained in this post.

SithasoDaisy 2 - The Power to Choose Edition Now Available

Hi there Demo on Vercel NB: Merging of CSS & JS SHOULD BE FALSE BANano.TranspilerOptions.MergeAllCSSFiles = False BANano.TranspilerOptions.MergeAllJavascriptFiles = False It is with pleasure to announce The Power to Choose Edition of SithasoDaisy. Basically this collection of b4xlibs gives...

www.b4x.com

Please also note PocketBase is now internal to SD, so dont include it, as much as you will still need to call UsesPocketBase. You can exclude most of the b4xlibs and most of the uses calls. Rather start small and then add as you go along.

giannimaione · Mar 27, 2024

how access to db SQLite (pocketbase)

this is fantastic:

B4X:

Private myPocketBase As SDUIPocketBase
'
'
'
    banano.Await(myPocketBase.SELECT_WHERE1)
    Dim lstResult As List = myPocketBase.result
'
'
'

but, can access to db sqlite in addition to SDUIPocketBase?

example:

B4X:

dim accessDB as ......
accessDB.Select (query) 
'
'

Mashiane · Mar 27, 2024

giannimaione said:
how access to db SQLite (pocketbase)

this is fantastic:

B4X:

Private myPocketBase As SDUIPocketBase ' ' ' banano.Await(myPocketBase.SELECT_WHERE1) Dim lstResult As List = myPocketBase.result ' ' '

but, can access to db sqlite in addition to SDUIPocketBase?

example:

B4X:

dim accessDB as ...... accessDB.Select (query) ' '

There are a variety of projects that I have posted in the forum that use PocketBase. Above that, the demo application has an example of crud functionality included in it.

From searching in the forum, you can find...

[BANano] Using PocketBase (Firebase Alternative) for your Apps.

Hi there. Update: This class is based on the JavaScript SDK available here, https://github.com/pocketbase/js-sdk REST API calls are dont internal to the library, if you want to use pure REST API, use BANanoFetch, the documentation should be easy to follow. I got to test the "Open Source...

www.b4x.com

SithasoDaisy: PocketBase - Mini CRM WebApp Source Code @ $5.00

Hi there NB: Download and run PocketBase and set up an admin account there first. Here is the link Demo hosted on Vercel. Disclaimer: The back-end (PocketBase) for this demo is hosted on PocketHost.IO (SAAS Company), which is not optimal for production usage. Ceveat: WebApp Slow in accessing...

www.b4x.com

SithasoDaisy: PocketBase - Chatroom using Server Side Events (SSE)

Hi Using Pocketbase subscriptions, we create a chatroom, trapping the SSE.

www.b4x.com

[SithasoDaisy] - PocketBase - How to create a Web Push Notification Server with PocketBase SSE

Hi there By the end of this, you should be able to have your own Web Push Notification Server running. Below is an example of a notification coming from a cloud deployed PocketBase server. Related Topics...

www.b4x.com

SithasoDaisy: PocketBase - Crud WebApp on Java Jetty WebServer with Pocketbase Back-End Hosted on PocketHost.IO

Hi there I am playing around with BANanoServer. So far so good. Ceveat: PocketHost.IO is slow compared to hosting PocketBase yourself. Watch this space.

www.b4x.com

SithasoDaisy: PocketBase - Vehicle Expense Tracking WebApp Source Code $5.00

Ola Disclaimer: This webpp is hosted on Netlify and the back-end hosted on PocketHost (just for demonstration purposes). You will have to set up the SQLite Webserver on your own machine for a better experience. PocketHost is not recommended for production purposes as its slow compared to local...

www.b4x.com

SithasoDaisy: PocketBase - Employee Training Manager/Scheduler Source Code @ $20

Hi there Get it now using PayPal SithasoDaisy ETM: A WebApp to keep track of Employee Training Schedules. This features Employee Trainings Employees Locations Training Types Employee Calendar Beautiful Product Tour Export to Excel Export to PDF Export to CSV Import from Excel Developed using...

www.b4x.com

SithasoDaisy: PocketBase - Paypal Insights WebApp @ $5.00

Hi I have been using PayPal since 2016 and was wondering about an analytical tool that I could use on the transactions, so I worked on this tool. This uses Pocketbase as a back-end. The summaries that it produces are: Get it https://sithasoholdings.gumroad.com/l/fdmzg Summary per Year...

www.b4x.com

SithasoDaisy: PocketBase - Social Media Manager for $5.00

Hi The Social Media Manager is an app that helps you post to your social media accounts. You can post to Twitter, Facebook, LinkedIn, and YouTube. The post below was posted to FB from the app. Buy with Paypal Post Listing.. We can add and update posts and then send them. The...

www.b4x.com

SithasoDaisy: PocketBase - Project Management Unit Source Code @ $5.00

Hi there Netlify Demo Disclaimer: This webpp is hosted on Netlify and the back-end hosted on PocketHost (just for demonstration purposes). On the download you will get the source code and a running version (inside PocketBase) which is activated by double clicking a file. No installation...

www.b4x.com

This is B4J Compatible (Outside BANano)

Pocketbase CRUD REST API & SSE with PostMan and then HttpUtils

Hi CRUD Examples Attached PocketBase is an open source backend consisting of embedded database (SQLite) with realtime subscriptions, built-in users management, convenient dashboard UI and simple REST-ish API. It runs on Linux, Windows and Mac, You can get it here, https://pocketbase.io/ We...

www.b4x.com

giannimaione · Apr 3, 2024

hi family,

how to add SDUITable into SDUIModal (via code or AD visual designer) ?

Mashiane · Apr 3, 2024

giannimaione said:
hi family,

how to add SDUITable into SDUIModal (via code or AD visual designer) ?

Have you taken a look at the SithasoDaisy PDF eBook?

Page 124 of the PDF download that comes with SithasoDaisy, shows you how to add components to the dialog via code and as you continue you will see how to do same via the abstract designer. This includes adding a grid and then adding components to the grid etc.

Page 162 one adds a table to a grid in a page. You can use the same methodology to add a table on a modal using code.

Here is a quick shortcut to it, TailwindCSS WebApps using B4X.pdf

giannimaione · Apr 3, 2024

Mashiane said:
Have you taken a look at the SithasoDaisy PDF eBook?

your answers are always helpful

giannimaione · Apr 4, 2024

looking for suggestions

what approach or suggestion for a sithasodaisy web application to make usable too for smartphone devices?
This application uses sduitables and data entry crud
What are the parameters to check (font, size, margins, paddings, ....)?

Enrico Fuoti · Apr 14, 2024

Hello Mashiane,
You recently introduced a new SDUIFormComponent.
I have not clear how this can be used in a form linked to a table_editrow event.
can you give me an hint ?

Mashiane · Apr 15, 2024

giannimaione said:
looking for suggestions

what approach or suggestion for a sithasodaisy web application to make usable too for smartphone devices?
This application uses sduitables and data entry crud
What are the parameters to check (font, size, margins, paddings, ....)?

Let me think... will revert soon.

Mashiane · Apr 15, 2024

Enrico Fuoti said:
Hello Mashiane,
You recently introduced a new SDUIFormComponent.
I have not clear how this can be used in a form linked to a table_editrow event.
can you give me an hint ?

Let me revert back with some examples.

Enrico Fuoti · Jul 2, 2024

Hi Mashiane,
I have a problem on table textarea fields and word wrap. The words get broken when they go to the next row.
I tried to use table.SetColumnClass("fieldname", "break-words"), but it looks to have no effect,
Can you help ?

Mashiane · Jul 2, 2024

Enrico Fuoti said:
Hi Mashiane,
I have a problem on table textarea fields and word wrap. The words get broken when they go to the next row.
I tried to use table.SetColumnClass("fieldname", "break-words"), but it looks to have no effect,
Can you help ?

Can you post a screen shot of what you mean so that I can understand please?
Also if possible just indicate the expected behavior.

Enrico Fuoti · Jul 2, 2024

The word in green "TESSUTO" is a single word.
As other words That do not fit in the row, it gets cut in the middle.
If it doesn't fit it should go on next row,
for example:

"POLTRONA GIREVOLE IN
TESSUTO CON RUOTE E
BRACCIOLI"
or use hyphenation
"POLTRONA GIREVOLE IN TESSU-
TO CON RUOTE E BRACCIOLI."

Mashiane · Jul 2, 2024

Thanks for the clarity.

The class "break-words" actually break the words, I think you need to use "text-wrap"

Because SetColumnClass applies to the TD element, (parent) of the text-area, try and use the ComputedClass method.

I have not tested this.

tbl.SetColumnComputeClass("fieldname", "ComputeTheClass")

B4X:

Sub ComputeTheClass(item As Map) As String
return "text-wrap"
End Sub

Each row will be included the text-wrap class in the text-area.

I hope it works.

Some reading..

Most elegant way to force a TEXTAREA element to line-wrap, regardless of whitespace

Html Textarea elements only wrap when they reach a space or tab character. This is fine, until the user types a looooooooooooooooooooooong enough word. I'm looking for a way to strictly enforce line

stackoverflow.com

Enrico Fuoti · Jul 3, 2024

Thank you Mashiane,
unfortunately it didn't work either,, text displayed is exactly the same as the one in picture i posted earlier :-(

Enrico Fuoti · Jul 6, 2024

Solved:

your tbl.SetColumnComputeClass("fieldname", "ComputeTheClass") worked!
only difference is that the class to be returned has to be "break-normal"

B4X:

Sub ComputeTheClass(item As Map) As String
return "break-normal"
End Sub

thank you for your help..

B4J Tutorial SithasoDaisy TailwindCSS UI Toolkit: Q & A

Expert

Well-Known Member

SithasoDaisy,​

Expert

SithasoDaisy,​

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Active Member

Expert

Expert

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency

SithasoDaisy,

SithasoDaisy,