B4J Library [Web] SithasoDaisy: 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


Cove1.jpg


Check our flipbook here


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

Check our Netlify Demo here.


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


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


Thank you so much.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
SithasoDaisy 2.16 Now Avaialable.

What's New

NB: Please note that SithasoDaisy V1 is no longer being maintained. It is recommended that users shift to V2. The only thing that has changed is just how the b4xlibs are structured.

Breaking Changes
  • UsesJQuery
  • UsesSignaturePad
  • UsesTable
  • UsesFormToJSON

Update

B4X:
app.AddApp(Me, Main.AppName)

To

B4X:
BANano.Await(app.AddApp(Me, Main.AppName))

These are no longer necessary on your client app as they are done internally by SithasoDaisy, you can safely comment them out/remove them.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Version 2.16 Update


1. We have made the UI fullscreen and hamburger always visible and drawer hidden.

1.1. Added NonMobile after AddAppDrawer

B4X:
drawer = app.AddAppDrawer("80", False)
    drawer.NonMobile

1.2 Commented out

B4X:
'navbar.Hamburger.ShowOnSmallOnly

2. Full Calendar Time Slot Management

2.1 Set Start Time & End Time on Views
2.2 Scroll to a particular time slot.


3. Updated the Bottom Navigation Bar.

4. Added 2 Methods to Modals

It is always better to add modals to the "body" element of the app and not page.Root.PageViewer

5. Creating Custom ListViews

We use the abstract designer to create Custom ListView using BANano.LoadLayoutArray methods.


6. WebApps - SQLite 3 File Browser. Browse Actual SQLite 3 File in browser. We use the Chinook SQLite file here.

 

Mashiane

Expert
Licensed User
Longtime User
Hi Fam

Demo on Vercel

SithasoDaisy 2.18 is out.

What's New

1. AutoComplete - textbox with select functionality. You need to check the AutoComplete & AutoCompleteList props on the abstract designer.

1704914976016.png


You can clear items with .AutoCompleteClear.
You can add items with .AutoCompleteAddItem

Items can be added from a Map / List, with .AutoCompleteFromList (recommended) and .AutoCompleteFromMap

2. Menus


The Horizontal Menu Example is in the Additional Demos folder
The menu by default is set to be Vertical in the abstract designer, turning this off, will make your menu horizontal.
Fixed some few bugs

3. NavBar
Fixed some few bugs

Get from same location...

Thanks again for reporting bugs and your involvement in this project.

Regards

Mashy
 

Mashiane

Expert
Licensed User
Longtime User
Version 2.22 is now out, get it from same download link

What's new?

  • SDUIFormComponent - drag n drop a couple of form componts, set up their properties, have yourself a form. This works like VField in BVAD3.
  • SDUITableColumn - drag n drop a table column on a table, set its properties, have yourself a table with columns. This is for those who dont want to define table columns via code.
  • SDUITableProperty - drag n drop a table property on a table, set its properties, have yourself a property bag / preference dialog. This is for those who dont want to define property bag settings via code.
  • SDUIPocketBase is now part of the internal lib, no need to add it as a library anymore.
  • SDUIEnjoyHint is now part of the internal lib, no need to add it as a library anymore. This is in support of SDUIFormComponent, SDUITableColumn, SDUITableProperty.
  • SDUIButton now supports images which can be styled. eg. svg icons etc.
  • Bug fixes
BREAKING CHANGE

To initialize the SDUIEnjoy hint, 2 parameters are now required, the CallBack name and eventname

B4X:
Dim help As SDUIEnjoyHint
    help.Initialize(Me, "help")
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Row Menu Items with Icons

1710261213701.png


B4X:
SDUITable1.AddColumnDropDownIcon("menux", "Menu Icon", "fa-solid fa-bars", "#ff3399", CreateMap("edit":"Edit","delete":"Delete","clone":"Clone","print":"Print"), CreateMap("edit":"fa-solid fa-pen-to-square","delete":"fa-solid fa-trash","clone":"fa-solid fa-clone","print":"fa-solid fa-print"))

A new method, AddColumnDropDownIcon, this method enables one to add horizontal menu per row with icons.

This is an extension of this method call

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

Reminder: To trap the menu item click events one uses.

B4X:
Private Sub SDUITable1_MenuItemRow (Row As Int, Action As String, item As Map)
    Log(Row)
    Log(Action)
    Log(item)
End Sub

Where the action will be edit, delete, clone, print at that row.
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Row Avatar Online Indicator

When you have avatars in your table, you can set the online / offline indicator status. You add the column and then set an online / offline status field. The status field should have a value off online / offline.

In this example, we have added a status field in each row and this has online / offline. This then displays the appropriate status indicator for the online indicator.

1710262267242.png


B4X:
SDUITable1.AddColumnAvatarTitle("avatar", "Employee", "4rem", "name", app.MASK_CIRCLE)
    SDUITable1.SetColumnAvatarOnline("avatar", "status")

We have added an avatar column. The SetColumnAvatarOnline says for each row, read the status field and depending on whether that value is offline/online, show an indicator.

B4X:
Items.Initialize
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":1, "rate":2, "email":"user1@gmail.com", "link":"https://tailwindcomponents.com/", "progress":10, "active":False, "name":"Cy Ganderton", "job":"Quality Control Specialist", "color":"Error", "avatar":"./assets/face1.jpg", "country":"USA", "clicklink":56, "sm": "fa-brands fa-twitter"))
    Items.Add(CreateMap("hours": 5, "status":"offline", "on":False, "id":2, "rate":4, "progress":20, "active":True, "link":"https://daisyui.com/", "email":"user1@gmail.com", "name":"Hart Hagerty", "job":"Desktop Support Technician", "color":"Secondary", "avatar":"./assets/face17.jpg", "country":"Nigeria","clicklink":90, "sm": "fa-brands fa-facebook"))
    Items.Add(CreateMap("hours": 8, "status":"offline", "on":True, "id":3, "rate":3, "progress":90, "active":True, "link":"https://github.com/Mashiane", "email":"user1@gmail.com", "name":"Anele Mbanga", "job":"Software Engineer", "color":"Primary", "avatar":"./assets/mashy.jpg","country":"South Africa","clicklink":100, "sm": "fa-brands fa-whatsapp"))
    '
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":4, "rate":2, "email":"user1@gmail.com", "link":"https://tailwindcomponents.com/", "progress":10, "active":False, "name":"Cy Ganderton", "job":"Quality Control Specialist", "color":"Error", "avatar":"./assets/face1.jpg", "country":"USA", "clicklink":56, "sm": "fa-brands fa-twitter"))
    Items.Add(CreateMap("hours": 5, "status":"offline", "on":False, "id":5, "rate":4, "progress":20, "active":True, "link":"https://daisyui.com/", "email":"user1@gmail.com", "name":"Hart Hagerty", "job":"Desktop Support Technician", "color":"Secondary", "avatar":"./assets/face17.jpg", "country":"Nigeria","clicklink":90, "sm": "fa-brands fa-facebook"))
    Items.Add(CreateMap("hours": 8, "status":"online", "on":True, "id":6, "rate":3, "progress":90, "active":True, "link":"https://github.com/Mashiane", "email":"user1@gmail.com", "name":"Anele Mbanga", "job":"Software Engineer", "color":"Primary", "avatar":"./assets/mashy.jpg","country":"South Africa","clicklink":100, "sm": "fa-brands fa-whatsapp"))
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Row Avatar Rings 01

When you have avatars in your table, you can set the ring and its color for all the avatars.

In this example, the avatars must have a ring and its color must be primary.

B4X:
SDUITable1.AddColumnAvatarTitle("avatar", "Employee", "4rem", "name", app.MASK_CIRCLE)
    SDUITable1.SetColumnAvatarRing("avatar", True, "primary")


1710263878617.png
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Row Avatar Rings 02

When you have avatars in your table, you can set the ring and color of the ring depending on another color value in your records

In this example, the avatars must have a ring and its color is derived from another row field named "color", thus the use of "item.color" in this call.

B4X:
SDUITable1.AddColumnAvatarTitle("avatar", "Employee", "4rem", "name", app.MASK_CIRCLE)
    SDUITable1.SetColumnAvatarRing("avatar", True, "item.color")


1710264905587.png


Each color for each avatar ring is derived from the "color" field in each row.

B4X:
Items.Initialize
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":1, "rate":2, "email":"user1@gmail.com", "link":"https://tailwindcomponents.com/", "progress":10, "active":False, "name":"Cy Ganderton", "job":"Quality Control Specialist", "color":"Error", "avatar":"./assets/face1.jpg", "country":"USA", "clicklink":56, "sm": "fa-brands fa-twitter"))
    Items.Add(CreateMap("hours": 5, "status":"offline", "on":False, "id":2, "rate":4, "progress":20, "active":True, "link":"https://daisyui.com/", "email":"user1@gmail.com", "name":"Hart Hagerty", "job":"Desktop Support Technician", "color":"Secondary", "avatar":"./assets/face17.jpg", "country":"Nigeria","clicklink":90, "sm": "fa-brands fa-facebook"))
    Items.Add(CreateMap("hours": 8, "status":"offline", "on":True, "id":3, "rate":3, "progress":90, "active":True, "link":"https://github.com/Mashiane", "email":"user1@gmail.com", "name":"Anele Mbanga", "job":"Software Engineer", "color":"Primary", "avatar":"./assets/mashy.jpg","country":"South Africa","clicklink":100, "sm": "fa-brands fa-whatsapp"))
    '
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":4, "rate":2, "email":"user1@gmail.com", "link":"https://tailwindcomponents.com/", "progress":10, "active":False, "name":"Cy Ganderton", "job":"Quality Control Specialist", "color":"Error", "avatar":"./assets/face1.jpg", "country":"USA", "clicklink":56, "sm": "fa-brands fa-twitter"))
    Items.Add(CreateMap("hours": 5, "status":"offline", "on":False, "id":5, "rate":4, "progress":20, "active":True, "link":"https://daisyui.com/", "email":"user1@gmail.com", "name":"Hart Hagerty", "job":"Desktop Support Technician", "color":"Secondary", "avatar":"./assets/face17.jpg", "country":"Nigeria","clicklink":90, "sm": "fa-brands fa-facebook"))
    Items.Add(CreateMap("hours": 8, "status":"online", "on":True, "id":6, "rate":3, "progress":90, "active":True, "link":"https://github.com/Mashiane", "email":"user1@gmail.com", "name":"Anele Mbanga", "job":"Software Engineer", "color":"Primary", "avatar":"./assets/mashy.jpg","country":"South Africa","clicklink":100, "sm": "fa-brands fa-whatsapp"))
    '
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":7, "rate":2, "email":"user1@gmail.com", "link":"https://tailwindcomponents.com/", "progress":10, "active":False, "name":"Cy Ganderton", "job":"Quality Control Specialist", "color":"Error", "avatar":"./assets/face1.jpg", "country":"USA", "clicklink":56, "sm": "fa-brands fa-twitter"))
    Items.Add(CreateMap("hours": 5, "status":"offline", "on":False, "id":8, "rate":4, "progress":20, "active":True, "link":"https://daisyui.com/", "email":"user1@gmail.com", "name":"Hart Hagerty", "job":"Desktop Support Technician", "color":"Secondary", "avatar":"./assets/face17.jpg", "country":"Nigeria","clicklink":90, "sm": "fa-brands fa-facebook"))
    Items.Add(CreateMap("hours": 8, "status":"online", "on":True, "id":9, "rate":3, "progress":90, "active":True, "link":"https://github.com/Mashiane", "email":"user1@gmail.com", "name":"Anele Mbanga", "job":"Software Engineer", "color":"Primary", "avatar":"./assets/mashy.jpg","country":"South Africa","clicklink":100, "sm": "fa-brands fa-whatsapp"))
    
    banano.Await(SDUITable1.SetItemsPaginate(Items))
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Row Avatar Rings 03 (Computed Rings)

In this example, we want to determine whether an avatar should have a ring or not depending on some computation. For this example, we will read the value of the "on" field in each row, if the value is true, the avatar will have a ring and if false, the avatar will not have a ring. We do this by setting the SetColumnComputeRing callback.

B4X:
SDUITable1.AddColumnAvatarTitle("avatar", "Employee", "4rem", "name", app.MASK_CIRCLE)
    SDUITable1.SetColumnComputeRing("avatar", "ComputeAvatarRing")

We then define the callback. The callback should return True/False ONLY. We can however set the "ringcolor" to anything we want. In this case, we have set the "ringcolor" field to be primary. The field name for the color of the ring is hard coded as "ringcolor".

1710265466209.png


B4X:
Sub ComputeAvatarRing(item As Map) As Boolean
    'is this user online
    Dim bOn As Boolean = item.Get("on")
    'set ring color - compulsory
    item.put("ringcolor", "primary")
    'return if row has ring
    Return bOn
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Row Avatar Rings 04 (Computed Rings)

In this example, we compute the ring and use a color from another field in our rows.

B4X:
Sub ComputeAvatarRing(item As Map) As Boolean
    'is this user online
    Dim bOn As Boolean = item.Get("on")
    Dim rcolor As String = item.Get("color")
    'set ring color - compulsory
    item.put("ringcolor", rcolor)
    'return if row has ring
    Return bOn
End Sub

1710266234439.png
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Icon Title Column

This new column type enables one to add an icon title column type.

B4X:
SDUITable1.AddColumnIconTitle("sm", "Social Media", app.SIZE_LG, "name", "item.color")

On each row, source the icons from the "sm" field and source the title from the "name" field. The color of each icon will be on the "color" field"

1710272664981.png


B4X:
Items.Initialize
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":1, "rate":2, "email":"user1@gmail.com", "link":"https://tailwindcomponents.com/", "progress":10, "active":False, "name":"Cy Ganderton", "job":"Quality Control Specialist", "color":"Error", "avatar":"./assets/face1.jpg", "country":"USA", "clicklink":56, "sm": "fa-brands fa-twitter"))
    Items.Add(CreateMap("hours": 5, "status":"offline", "on":False, "id":2, "rate":4, "progress":20, "active":True, "link":"https://daisyui.com/", "email":"user1@gmail.com", "name":"Hart Hagerty", "job":"Desktop Support Technician", "color":"Secondary", "avatar":"./assets/face17.jpg", "country":"Nigeria","clicklink":90, "sm": "fa-brands fa-facebook"))
    Items.Add(CreateMap("hours": 8, "status":"offline", "on":True, "id":3, "rate":3, "progress":90, "active":True, "link":"https://github.com/Mashiane", "email":"user1@gmail.com", "name":"Anele Mbanga", "job":"Software Engineer", "color":"Primary", "avatar":"./assets/mashy.jpg","country":"South Africa","clicklink":100, "sm": "fa-brands fa-whatsapp"))
    '
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":4, "rate":2, "email":"user1@gmail.com", "link":"https://tailwindcomponents.com/", "progress":10, "active":False, "name":"Cy Ganderton", "job":"Quality Control Specialist", "color":"Error", "avatar":"./assets/face1.jpg", "country":"USA", "clicklink":56, "sm": "fa-brands fa-twitter"))
    Items.Add(CreateMap("hours": 5, "status":"offline", "on":False, "id":5, "rate":4, "progress":20, "active":True, "link":"https://daisyui.com/", "email":"user1@gmail.com", "name":"Hart Hagerty", "job":"Desktop Support Technician", "color":"Secondary", "avatar":"./assets/face17.jpg", "country":"Nigeria","clicklink":90, "sm": "fa-brands fa-facebook"))
    Items.Add(CreateMap("hours": 8, "status":"online", "on":True, "id":6, "rate":3, "progress":90, "active":True, "link":"https://github.com/Mashiane", "email":"user1@gmail.com", "name":"Anele Mbanga", "job":"Software Engineer", "color":"Primary", "avatar":"./assets/mashy.jpg","country":"South Africa","clicklink":100, "sm": "fa-brands fa-whatsapp"))
    '
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":7, "rate":2, "email":"user1@gmail.com", "link":"https://tailwindcomponents.com/", "progress":10, "active":False, "name":"Cy Ganderton", "job":"Quality Control Specialist", "color":"Error", "avatar":"./assets/face1.jpg", "country":"USA", "clicklink":56, "sm": "fa-brands fa-twitter"))
    Items.Add(CreateMap("hours": 5, "status":"offline", "on":False, "id":8, "rate":4, "progress":20, "active":True, "link":"https://daisyui.com/", "email":"user1@gmail.com", "name":"Hart Hagerty", "job":"Desktop Support Technician", "color":"Secondary", "avatar":"./assets/face17.jpg", "country":"Nigeria","clicklink":90, "sm": "fa-brands fa-facebook"))
    Items.Add(CreateMap("hours": 8, "status":"online", "on":True, "id":9, "rate":3, "progress":90, "active":True, "link":"https://github.com/Mashiane", "email":"user1@gmail.com", "name":"Anele Mbanga", "job":"Software Engineer", "color":"Primary", "avatar":"./assets/mashy.jpg","country":"South Africa","clicklink":100, "sm": "fa-brands fa-whatsapp"))
    
    banano.Await(SDUITable1.SetItemsPaginate(Items))
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Icon Title (computed Values)

In this example, we want to show a down red arrow if our values are less than 60 and an up green arrow if our values are greater than 60.

We add an icon title to the table and then set a computed value.

B4X:
SDUITable1.AddColumnIconTitle("sm", "KPI", app.SIZE_LG, "clicklink", "item.color")
    SDUITable1.SetColumnComputeValue("sm", "ComputeIcon")

1710275007034.png



In the computed value sub, we read a value from a field named "clicklink", if that value is less than 60, the icon is a down arrow with a red color else the icon is greep pointing upwards. The sub routine returns the icon name to use and then we also set a color in the sub.

B4X:
Sub ComputeIcon(item As Map) As String
    'get the value of clicklink
    Dim sclicklink As Int = item.Get("clicklink")
    sclicklink = SDUIShared.CInt(sclicklink)
    'define a new icon, down pointing arrow
    Dim nicon As String = "fa-solid fa-arrow-down"
    'define the color
    Dim ncolor As String = "#ff0000"
    If sclicklink >= 60 Then
        'make up arrow and green
        nicon = "fa-solid fa-arrow-up"
        ncolor = "#00ff00"
    End If
    item.Put("color", ncolor)
    Return nicon
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Color Coded Menu Items

1710492048482.png


Sometimes you want to color-code your page drawer items from the page definitions.

1. In Process_Globas of each of the pages, define the color variable.

B4X:
Public color As String = "#0000cc"

2. Add the getColor sub routine.

B4X:
Sub getColor As String
    Return color
End Sub

That's it.

This call to add the page link on the drawer will use the specified hex color of that page.

B4X:
appdrawer.AddItemPage(pgHome)


Color Picker
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Selectable Chip Groups.

SDUITextAreaChipGroup - a text area with chips that you can select.

This is an extension of the text area however with chip groups that are selectable. You will remember this as the column chooser in the SDUITable.

1711526662500.png


SDTextAreaChips.gif


One can add items in the Abstract Designer and also via code.
In the abstract designer, one sets the input type to be "chip-group"

1711526818888.png


Then set the chip properties.

1711526859219.png


This fires an event when a chip is selected.

B4X:
Private Sub txtChips_Selected (Chips As String)
    'app.ShowSwal(Chips)
    Log(txtChips.GetSelectedChips)
End Sub

Via code

B4X:
'start adding you components here
    Dim items As Map = CreateMap()
    items.Put("b4a", "Basic4Android")
    items.Put("b4i", "Basic4iOS")
    items.Put("b4j", "Basic4Java")
    items.Put("b4r", "Basic4Arduino")
    txtChips.SetItemsChips(items)
    txtChips.SetSelectedChips("b4i;b4r")
    '
    Log(txtChips.GetSelectedChips)

To clear the chips, one executes .ClearChips which will empty the textbox.

Selected Chips

.GetSelectedChips returns a multi-value delimited string with ; of the selected keys.

.SetSelectedChips("") will clear selection and allow one to re-select the chips.

Outside the TextArea, one can use the SDUIBadge to achieve the same effect.

PS: One can use use .Value to set / get selected chips. When setting pass an mv string like "b4i;b4r" etc.
 

Attachments

  • SDTextAreaChips.zip
    36.4 KB · Views: 77

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates...

SDUITabs
: Added functionality to the Custom View to be able to set Active BG Color, Active Text Color & Active Border color to SDUITabs. These activate when changing tabs to reflect the active tab.

1715548875085.png


SDUICollapsePanels / Accordion

1715548974477.png


Added functionality to the Custom View to be able to set Active BG Color, Active Text Color & Active Border color to SDUICollapsePanels/Accordion. These activate when changing panels to reflect the active panel.
 
Top