B4J Library [Web] SithasoDaisy2: TailwindCss WebApps powered by B4x & BANano

PLEASE DO NOT ASK QUESTION ON THIS THREAD​

Hi there

It's will pleasure to release the SithasoDaisy b4xlib for your TailwindCSS based Web Apps. This uses BANano

Get it now for $15 here

Demo on Vercel
Skim the eBook
Free Computer Books

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

Cove1.jpg


Check our flipbook here

online.fliphtml5.com

SithasoDaisy

Flipbook (undefined description)
online.fliphtml5.com online.fliphtml5.com

This library has both Abstract Designer support and full code development.

Check our Netlify Demo here.

sithasodaisyui.netlify.app

SithasoDaisy: TailwindCSS Websites using B4X.

SithasoDaisy: TailwindCSS Websites using B4X.
sithasodaisyui.netlify.app sithasodaisyui.netlify.app

Check it on Share My Creations (where you can get a copy)

[Web] SithasoDaisy: TailwindCSS + DaisyUI Toolbox

LAUNCHED!!!! Check our FlipBook Order your copy now at $15. Includes... Lifetime support on your SithasoDaisy projects eBook on how to get started Source code for die hard coders (see current Netlify Demo) Abstract designer based examples for the no code / less code kind Support subsciption...
www.b4x.com www.b4x.com

Happy coding..

SithasoDaisy TailwindCSS WebApps​


Subscribe to SithasoDaisy TailwindCSS WebApps and get a WebApp each month of the year.

Visit https://sithasoholdings.gumroad.com/l/vwaqj to activate your subscription.

PLEASE FOLLOW THIS LINK TO ASK QUESTIONS

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 https://t.me/sithasodaisy Check $5 WebApps...
www.b4x.com www.b4x.com

Thank you so much.
 
Last edited:
Click to expand...
IMPORTANT ANNOUNCEMENT

The following b4xtemplates have been updated -

  • SithasoCanvas
  • SithasoDrawer
  • SithasoDaisyPocketBase
This is due to fixing bugs that existed in them.

BREAKING CHANGE: For any SithasoDaisyPocketBase b4xtemplate using project.

***ADD***

In pgIndex > Process_Globals

Code: 
Private themeName As String

*** UPDATE ***

In pgIndex > Initialize

Code: 
BANano.LoadLayoutAppend(app.Here, "baselayout")

*** to be

Code: 
BANano.LoadLayoutAppend(app.Here, "baselayout")
    'set theme
    themeName = $"${Main.AppName}_theme"$
    Dim ctheme As String = BANano.GetLocalStorage2(themeName)
    ctheme = SDUIShared.CStr(ctheme)
    Select Case ctheme
    Case "", app.THEME_LIGHT
        app.Theme = app.THEME_LIGHT
        swapTheme.Checked = False
    Case app.THEME_DARK
        swapTheme.Checked = True
        app.Theme = app.THEME_DARK
    End Select

*** ADD ***

In pgIndex

Code: 
Private Sub swapTheme_Change (Checked As Boolean)
    Select Case Checked
    Case True
        'make dark
        app.Theme = app.THEME_DARK
        BANano.SetLocalStorage2(themeName, app.THEME_DARK)
    Case False
        'make light
        app.Theme = app.THEME_LIGHT
        BANano.SetLocalStorage2(themeName, app.THEME_LIGHT)
    End Select
End Sub


*** REMOVE ***

In pgIndex

Code: 
Private Sub swapTheme_On_Click (e As BANanoEvent)
    e.PreventDefault
    app.Theme = app.THEME_DARK
    BANano.SetLocalStorage2("pmu-theme", app.THEME_DARK)
End Sub

Private Sub swapTheme_Off_Click (e As BANanoEvent)
    e.PreventDefault
    app.Theme = app.THEME_LIGHT
    BANano.SetLocalStorage2("pmu-theme", app.THEME_LIGHT)
End Sub

Thank you so much!
 
Version 2: Power to Choose Edition

SithasoDaisy has been split into smaller b4xlibs, there is the core library and other "plugins" that you can use. The demo app uses all the b4xlibs.

1690741446820.png


1690741574952.png


You can load the css and js files by calling the "Uses..." calls, each of the b4xlibs here contain the css & js files & code modules to use for that plugin.

Code: 
''uncomment unused
'BANano.Await(app.UsesJQuery)
'Banano.Await(app.UsesPDF)
'Banano.Await(app.UsesExcel)
'Banano.Await(app.UsesCSV)
'Banano.Await(app.UsesEnjoyHint)
'Banano.Await(app.UsesFlatPickDateTime)
'Banano.Await(app.UsesRollDate)
'Banano.Await(app.UsesTable)
''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.UsesSignaturePad)
''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.UsesDropZone)
''Banano.Await(app.UsesCollectJS)

You can see the Demo for examples and also see this...

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
 
Update: Table Row Menu:

One can add a submenu to table rows, for example on the Tools menu. This menu has now been set to show horizontally on the row.

Code: 
tblcustomer.AddColumnDropDown("tools", "Tools", "fa-solid fa-ellipsis-vertical", "#3f51b5", _
    CreateMap("sendemail":"Send Email","sendreminder":"Add Reminder", "sendcommunication":"Add Communication", _
    "sendappointment":"Add Appointment", "sendtask":"Add Task"))
    tblcustomer.SetColumnTextColor("tools", app.COLOR_WHITE)
'


1691146034939.png



Will be available on next update.
 
Update 07 August 2023

1. The migration guide has been updated.
2. New b4xtemplates that work with version 2
3. Demo WebApp updated.
4. Minor bugs fixes and enhancements

Get from same google drive link.

PS: Thank you so much for your certificates of appreciation. They help in bringing you this best web b4x tailwindcss library.
 
Last edited:
What's Coming on V2

1. Vertical Table Headers

I wanted to show all columns in my table, thing is, they are a lot. It turns out I can just rotate them.

rotatecolumns.png



Code: 
tbldevalues.AddColumn("objectid", "Object ID")
    tbldevalues.AddColumn("roadlink", "Road Link")
    tbldevalues.AddColumn("surfacefailure", "Surface Failure")
    tbldevalues.AddColumn("surfacecracking", "Surface Cracking")
    tbldevalues.AddColumn("surfacepatching", "Surface Patching")
    tbldevalues.AddColumn("stonelossactive", "Stone Loss Active")
    tbldevalues.AddColumn("stoneloss", "Stone Loss")
    tbldevalues.AddColumn("dry", "Dry")
    tbldevalues.AddColumn("bleeding", "Bleeding")
    tbldevalues.AddColumn("blockcracks", "Block Cracks")
    tbldevalues.AddColumn("longitudinalcracks", "Longitudinal Cracks")
    tbldevalues.AddColumn("transversecracks", "Transverse Cracks")
    tbldevalues.AddColumn("crocodilecracks", "Crocodile Cracks")
    tbldevalues.AddColumn("pumping", "Pumping")
    tbldevalues.AddColumn("rutting", "Rutting")
    tbldevalues.AddColumn("shoving", "Shoving")
    tbldevalues.AddColumn("undulation", "Undulation")
    tbldevalues.AddColumn("patching", "Patching")
    tbldevalues.AddColumn("failures", "Failures")
    tbldevalues.AddColumn("edgebreaking", "Edge Breaking")
    tbldevalues.AddColumn("ridingquality", "Riding Quality")
    tbldevalues.AddColumn("skidresistance", "Skid Resistance")
    tbldevalues.AddColumn("surfacedrainage", "Surface Drainage")
    tbldevalues.AddColumn("shouldersunpaved", "Shoulders Unpaved")
    tbldevalues.AddColumn("shoulderspaved", "Shoulders Paved")
    'Add edit/delete etc columns
    'tbldevalues.AddDesignerColums
    tbldevalues.SetColumnHeaderVerticalRL(Array("surfacefailure", "surfacecracking","surfacepatching", "stonelossactive","stoneloss","dry"))
    tbldevalues.SetColumnHeaderVerticalRL(Array("bleeding", "blockcracks","longitudinalcracks", "transversecracks","crocodilecracks","pumping"))
    tbldevalues.SetColumnHeaderVerticalRL(Array("rutting", "shoving","undulation", "patching","failures","edgebreaking"))
    tbldevalues.SetColumnHeaderVerticalRL(Array("ridingquality", "skidresistance","surfacedrainage", "shouldersunpaved","shoulderspaved"))

2. Adding dropdown to table toolbar

Whislt you are able to add button icons to the toolbar, you are also able to add a select.

Code: 
cboYear = tbldevalues.AddToolbarSelectNormal("cboYear", CreateMap())
    cboYear.roundedFull
    cboYear.SetYears(5, 5)
    
    btnCalculate = tbldevalues.AddToolbarButtonTextColor("btnCalculate", "Calculate", "#013220", "white")
    btnCalculate.roundedFull
    btnCalculate.NormalCase = True
    btnCalculate.RemoveLeftIcon
    btnCalculate.RemoveRightIcon
    btnCalculate.RemoveBadge

select change event

Code: 
Private Sub tbldevalues_cboYear_Change (item As String)
    'banano.Await(mounted)
    'banano.Await(LoadTrainings)
End Sub
 
Enrico Fuoti said:
hello Mashiane,
have you also updated sithasoDaisy2? if i'm not wrong. the files seems to be the same..
Click to expand...
It should be fixed, just fixed some bugs on the table functionality and some MIME TYPE related errors when working with PocketBase.

Please redownload and copy everything in on the "additional folder".

Thanks.
 
Upcoming Updates: Full Calendar (Prev & Next Year Buttons)

Now one can navigate to the previous & next year on the full calendar.

PrevNextYear.gif


One can control what appears in the toolbar from the abstract designer. Here we want the toolbar to be visible. You can also hide it.

1697064926006.png


Additional Functionality to Trap PrevMonth, NextMonth, PrevYear & NextYear click Events

1697071002907.png


Retrieve the dates for the above events...



1697071822770.png


Code: 
Private Sub calendar1_NextMonth (e As BANanoEvent)
    Log("calendar1_NextMonth")
    Log(calendar1.CurrentStartDate)
    Log(calendar1.CurrentEndDate)
End Sub

Private Sub calendar1_PrevMonth (e As BANanoEvent)
    Log("calendar1_PrevMonth")
    Log(calendar1.CurrentStartDate)
    Log(calendar1.CurrentEndDate)
End Sub

Private Sub calendar1_NextYear (e As BANanoEvent)
    Log("calendar1_NextYear")
    Log(calendar1.CurrentStartDate)
    Log(calendar1.CurrentEndDate)
End Sub

Private Sub calendar1_PrevYear (e As BANanoEvent)
    Log("calendar1_PrevYear")
    Log(calendar1.CurrentStartDate)
    Log(calendar1.CurrentEndDate)
End Sub
 
Last edited:
FullCalendar DateRangeChange Event

1697109280864.png



This event is fired anytime the PrevYear, PrevMonth, NextMonth, NextYear,Today, Month, Week, Day, List buttons are clicked in the Header ToolBar.

It will give you the start date in the calendar view and the end date + 1 e.g. 2023-08-27 and 2023-10-08 above. You can define the event with Generate Members. You can also get the currentDate (selected date), currentStartDate (month start) and currentEndDate (month end) also

Code: 
'DO NOT TRAP (NextMonth, PrevMonth, NextYear, PrevYear) if you call this event
Private Sub calendar1_DateRangeChange (startDate As String, endDate As String)
    Log("calendar1_DateRangeChange...")
    Log("Range Start: " & startDate)
    Log("Range End: " & endDate)
    Log("Current Start Date: " & calendar1.CurrentStartDate)
    Log("Current End Date: " & calendar1.CurrentEndDate)
    Log("Current Date: " & calendar1.CurrentDate)
End Sub

Control Visibility of ToolBar Buttons

The toolbar buttons are controlled in the abstract designer. You can remove each button from each section, e.g. if you dont want the prevYea and nextYear buttons not to show on the left part of the Header Toolbar, just remove prevYear; and nextYear below.

To remove the title just leave it blank. You can swap the buttons from left/right/center by using the button names below.

1697109690472.png


As an example, lets change the buttons and hide the title.

1697110963604.png



1697110920108.png
 
Last edited:
Upcoming Updates: Basic Cards

[Web][SithasoDaisy] Creating a Product Listing

Hi By the end of this tutorial, you will be able to create this output. 1. We use a grid with 3 columns so that we can have each product. Code Module is: pgBasicCardsMultiple on the SithasoDaisyDemo App. Add a SDUIPage in a layout and set these properties. Other properties should be...
www.b4x.com www.b4x.com
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article Article
Share My Creation [SithasoDaisy5] - TailwindCSS Grid Builder - Simplifying Layout Creation with Ease
Replies
0
Views
2K
Mashiane
Mashiane
EnriqueGonzalez
  • Article Article
B4J Tutorial HTMX + TailwindCSS + Freemarker
Replies
7
Views
6K
byz
byz
Mashiane
  • Article Article
B4J Tutorial SithasoDaisy TailwindCSS UI Toolkit: Q & A
19 20 21
Replies
419
Views
136K
Mashiane
Mashiane
Mashiane
[Web][SithasoDaisy2]: Mashy Teaches TailwindCSS using b4x (with eBook)
4 5 6
Replies
119
Views
74K
Mashiane
Mashiane
Mashiane
  • Article Article
Share My Creation [Web] SithasoDaisy: TailwindCSS + DaisyUI Toolbox
3 4 5
Replies
85
Views
46K
Mashiane
Mashiane
Back
Top