B4J Tutorial SithasoDaisy TailwindCSS UI Toolkit: Q & A

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 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 www.b4x.com
 
Last edited:
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
giannimaione said:
how to use Search into SDUITable ?

here search from SDUITable:
View attachment 152039
search with phpadmin (mysql) is correct
View attachment 152040
Click to expand...
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.
 
Last edited:
giannimaione

giannimaione

Well-Known Member
Licensed User
Longtime User

SithasoDaisy,​

slow compilation
maybe there are too many libraries?
lib.PNG

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!
----------------------------------------------------
Click to expand...
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
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
Click to expand...
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.
 
Last edited:
giannimaione

giannimaione

Well-Known Member
Licensed User
Longtime User
Mashiane said:
It seems you are running the demo
Click to expand...
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

Mashiane

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

1711457557123.png


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

giannimaione

Well-Known Member
Licensed User
Longtime User
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

Mashiane

Expert
Licensed User
Longtime User
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)
'
'
Click to expand...
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 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 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 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 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 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 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 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 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 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 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 www.b4x.com
 
giannimaione

giannimaione

Well-Known Member
Licensed User
Longtime User
hi family,

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

Mashiane

Expert
Licensed User
Longtime User
giannimaione said:
hi family,

how to add SDUITable into SDUIModal (via code or AD visual designer) ?
Click to expand...
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

giannimaione

Well-Known Member
Licensed User
Longtime User
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

Enrico Fuoti

Active Member
Licensed User
Longtime User
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

Mashiane

Expert
Licensed User
Longtime User
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, ....)?
Click to expand...
Let me think... will revert soon.
 
Enrico Fuoti

Enrico Fuoti

Active Member
Licensed User
Longtime User
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

Mashiane

Expert
Licensed User
Longtime User
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 ?
Click to expand...
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

Enrico Fuoti

Active Member
Licensed User
Longtime User
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."


Screenshot 2024-07-02 alle 21.53.17.png
 
Mashiane

Mashiane

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

stackoverflow.com

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 stackoverflow.com
 
Enrico Fuoti

Enrico Fuoti

Active Member
Licensed User
Longtime User
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

Enrico Fuoti

Active Member
Licensed User
Longtime User
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..
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
B4J Tutorial [Web][SithasoDaisy] Mastering the TailwindCSS Grid
Replies
0
Views
260
Mashiane
Mashiane
MichalK73
  • Article
B4J Tutorial SithasoDaisy TailwindCSS - Multilanguage
Replies
2
Views
778
MichalK73
MichalK73
Mashiane
SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)
4 5 6
Replies
110
Views
21K
Mashiane
Mashiane
Mashiane
  • Article
B4J Library [Web] SithasoDaisy: TailwindCss WebApps powered by B4x & BANano
3 4 5
Replies
86
Views
15K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [Web] SithasoDaisy: TailwindCSS + DaisyUI Toolbox
3 4 5
Replies
84
Views
18K
Mashiane
Mashiane
Top