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

Mashiane

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

B4X: 
Private themeName As String

*** UPDATE ***

In pgIndex > Initialize

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

*** to be

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

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

B4X: 
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!
 

Mashiane

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





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.

B4X: 
''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
 

Mashiane

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

B4X: 
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)
'





Will be available on next update.
 

Mashiane

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

Mashiane

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




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

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

B4X: 
Private Sub tbldevalues_cboYear_Change (item As String)
    'banano.Await(mounted)
    'banano.Await(LoadTrainings)
End Sub
 

Mashiane

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

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Full Calendar (Prev & Next Year Buttons)

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



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.



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



Retrieve the dates for the above events...





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

Mashiane

Expert
Licensed User
Longtime User
FullCalendar DateRangeChange Event




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

B4X: 
'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.



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




 
Last edited:

Mashiane

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

Similar Threads

  • Article
B4J Library [Web][SithasoIONIC7] Ionic7 Framework MobileKit Powered by B4x and BANano
Replies
16
Views
4K
Mashiane
  • Article
B4J Tutorial SithasoDaisy: PocketBase - Crud WebApp on Java Jetty WebServer with Pocketbase Back-End Hosted on PocketHost.IO
Replies
4
Views
3K
Mashiane
  • Article
B4J Tutorial SithasoDaisy TailwindCSS UI Toolkit: Q & A
19 20 21
Replies
405
Views
34K
Mashiane
  • Article
Share My Creation [Web] SithasoDaisy: TailwindCSS + DaisyUI Toolbox
3 4 5
Replies
84
Views
19K
Mashiane
  • Article
Share My Creation [BANanoVuetifyAD3] Project Management WebApp (Free Source Code)
Replies
0
Views
1K
Mashiane
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…