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...
PLEASE DO NO ASK QUESTIONS.. USE

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
 
Please redownload 1.31 (updated now), which addresses the locales for the FullCalendar and some other bug fixes.

Thanks

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
 
Table Append Icons - Loading

TableAppendIcons.gif


Code: Copy 
Private Sub tb4_btnload (item As Map)
    'get the id of the record
    Dim sid As String = item.Get("id")
    'find the position of the record using the id
    Dim pos As Int = banano.Await(tb4.FindRowByColumn("id", sid))
    'get the caption of the button
    Dim btnCaption As String = banano.Await(tb4.GetRowColumn("btnload", pos))
    '
    Select Case btnCaption
    Case "Process"
        'change the caption to
        tb4.SetRowColumn("btnload", pos, "Loading")
        'set the append icon to loading
        tb4.SetRowColumnAppendLoading("country", pos, True)
    Case "Loading"
        'change the caption to
        tb4.SetRowColumn("btnload", pos, "Process")
        'set the append icon to not-loading
        tb4.SetRowColumnAppendLoading("country", pos, False)
    End Select
End Sub
 
Table Append Icons - Changing

TableAppendIcons1.gif


Code: Copy 
Private Sub tb4_btnicon (item As Map)
    'get the id of the record
    Dim sid As String = item.Get("id")
    'find the position of the record using the id
    Dim pos As Int = banano.Await(tb4.FindRowByColumn("id", sid))
    'get the caption of the button
    Dim btnCaption As String = banano.Await(tb4.GetRowColumn("btnicon", pos))
    '
    Select Case btnCaption
    Case "Flag"
        'change the caption to
        tb4.SetRowColumn("btnicon", pos, "Insta")
        'set the append icon to insta
        tb4.SetRowColumnAppendIcon("country", pos, "fa-brands fa-instagram")
    Case "Insta"
        'change the caption to
        tb4.SetRowColumn("btnicon", pos, "Flag")
        'set the append icon to flag
        tb4.SetRowColumnAppendIcon("country", pos, "fa-regular fa-flag")
    End Select
End Sub
 
Table Menus

Code: Copy 
tb2.AddColumnDropDown("menu", "Menu", "fa-solid fa-ellipsis-vertical", "#3f51b5", CreateMap("edit":"Edit","delete":"Delete","clone":"Clone","print":"Print"))

1684791794750.png


Code: Copy 
Private Sub tb2_MenuRow (Row As Int, Action As String, item As Map)
    Log(Row)
    Log(Action)
    Log(item)
End Sub

set menu item colors

Code: Copy 
tb2.SetMenuItemHoverColorIntensity("blue", "100")
    tb2.SetMenuItemFocusColorIntensity("blue", "100")
    tb2.SetMenuItemActiveColorIntensity("blue", "100")
 
Table ToolBar Menus

1685062643332.png



We add a toolbar menu button with 3 options..

Code: Copy 
Dim ddown As SDUIDropDown = SDUITable1.AddToolbarDropDownIcon("ddown", "fa-solid fa-bars", app.COLOR_ORANGE)
    ddown.AtEnd
    ddown.RoundedBox
    ddown.shadow("")
    ddown.ItemHoverColorIntensity("blue", "100")
    ddown.ItemFocusColorIntensity("blue", "100")
    ddown.ItemActiveColorIntensity("blue", "100")
    '
    ddown.AddItemIcon("export2pdf", "fa-regular fa-file-pdf", "Export to PDF")
    ddown.AddItemIcon("export2xls", "fa-regular fa-file-excel", "Export to XLS")
    ddown.AddItemIcon("export2csv", "fa-solid fa-file-csv", "Export to CSV")

We trap the events, in this case we want to export the table contents to csv file.

Code: Copy 
Private Sub SDUITable1_ddown_Click (item As String)
    Select Case item
    Case "export2pdf"
    Case "export2csv"
        Dim content As String = banano.Await(SDUITable1.ExportToCSV(True, ",", True))
        app.Download(content, "table2csv.csv")
    Case "export2xls"
    End Select
End Sub
 
Coming Updates to V1.34 SDUITable PropetyBag

1685649818874.png


Add Avatar with Online/Offline Status

Code: Copy 
SDUITable1.AddPropertyAvatar("online", "Avatar Online", "", "12", app.MASK_CIRCLE, "./assets/face11.jpg")
    SDUITable1.SetPropertyAvatarOnline("online", True, True)

Add Avatar with ring

Code: Copy 
    SDUITable1.AddPropertyAvatar("hasring", "Avatar ring", "", "12", app.MASK_CIRCLE, "./assets/face11.jpg")
    SDUITable1.SetPropertyAvatarRing("hasring", True, app.COLOR_PRIMARY)

Add Avatar Group

Code: Copy 
    SDUITable1.AddPropertyAvatarGroup("agroup", "Avatar Group", "", "12", app.MASK_CIRCLE, Array("./assets/1.jpg","./assets/2.jpg","./assets/3.jpg","./assets/4.jpg", "./assets/Angela.jpg"))

Change/Update Avatar Group Images

Code: Copy 
SDUITable1.SetPropertyAvatarGroupItems("agroup", "12", app.MASK_SQUIRCLE, Array("./assets/Anna.jpg","./assets/daisywoman3.png","./assets/face25.jpg","./assets/sponge.png"))

1685650860409.png
 
Last edited:
SDUITable AvatarGroup

1685717904848.png


Code: Copy 
tb4.AddColumnAvatarGroup("agroup", "Resources", "2rem", app.MASK_CIRCLE)
tb4.SetColumnComputeValue("agroup", "Computeagroup")

Code: Copy 
Sub Computeagroup(item As String) As String
    Return $"./assets/Angela.jpg;./assets/Anna.jpg;./assets/daisywoman3.png;./assets/daisywoman1.jpg;./assets/face13.jpg;./assets/profile12.jpg"$
End Sub

Changing the row column avatar group

Code: Copy 
tb4.SetRowColumn("agroup", 2, $"./assets/team-1.jpg;./assets/team-2.jpg;./assets/team-3.jpg;./assets/team-4.jpg;./assets/team-5.jpg"$)


1685718377310.png
 
SDUITable Avatar Placeholder

1685722056075.png


Add the column

Code: Copy 
tb4.AddColumnAvatarPlaceholder("hours", "Hours", "3rem", app.MASK_CIRCLE, "primary")

Change the value of the row column avatar placeholder

Code: Copy 
tb4.SetRowColumn("hours", 1, "99+")

SDUITable Badge Variants & Tags

1686130540225.png


Code: Copy 
tb4.AddColumnBadgeAvatarTitle("avatar", "Resource", "10", "name", "")
tb4.AddColumnBadgeGroup("tags", "Tags", "10")
banano.Await(tb4.SetItemsPaginate(Items))  'or SetItemsPaginate
tb4.SetRowColumn("tags", 1, $"a:success; n:warning; e:primary; l:neutral; e:error"$)
End Sub
 
Last edited:
SDUITable Totals

This sums up column values and set them on foote

totals.png


Code: Copy 
''start building the page
Private Sub BuildPage
    banano.LoadLayout(app.PageViewer, "summaryperimpactlayout")
    'Set property bag for input
    banano.Await(pbsummaryperimpact.LoadPropertyBagFromJSON("./assets/summaryperimpact.json"))
    'tblsummaryperimpact.AddColumn("id", "#")
    tblsummaryperimpact.AddColumn("balanceimpact", "Impact")
    tblsummaryperimpact.AddColumnMoney("gross", "Gross")
    tblsummaryperimpact.AddColumnMoney("fee", "Fee")
    tblsummaryperimpact.AddColumnMoney("net", "Net")
    'Add edit/delete etc columns
    'tblsummaryperimpact.AddDesignerColums
    tblsummaryperimpact.AddColumnAction("view", "View", "fa-solid fa-eye", "#797EF6")
    'Mount the records
    banano.Await(mounted)
    'total sum of columns on footer
    Dim summary As Map = banano.Await(tblsummaryperimpact.SetFooterTotalSumCountColumns(Array("gross","fee","net")))
    'get the rowcount
    Dim srowcount As String = summary.Get("rowcount")
    'set the footer column to reflect total
    tblsummaryperimpact.SetFooterColumn("balanceimpact", $"Total (${srowcount})"$)
End Sub
 
Last edited:
SDUITable RadioGroup

1686034853271.png


Code: Copy 
tb4.AddColumnRadioGroup("gender", "Gender", False, app.COLOR_PRIMARY, CreateMap("male":"Male","female":"Female"))

trap row change event

Code: Copy 
Private Sub tb4_ChangeRow (Row As Int, Value As Object, Column As String, item As Map)
    Dim x As Map = CreateMap()
    x.Put("row", Row)
    x.Put("column", Column)
    x.Put("value", Value)
    Dim s As String = banano.ToJson(x)
    app.ShowSwal(s)
End Sub
 
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
138K
Mashiane
Mashiane
Mashiane
[Web][SithasoDaisy2]: Mashy Teaches TailwindCSS using b4x (with eBook)
4 5 6
Replies
119
Views
75K
Mashiane
Mashiane
Mashiane
  • Article Article
Share My Creation [Web] SithasoDaisy: TailwindCSS + DaisyUI Toolbox
3 4 5
Replies
85
Views
46K
Mashiane
Mashiane
Back
Top