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

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.



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



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.



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


 

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




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



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

 

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"



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




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



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.





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"



Then set the chip properties.



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.



SDUICollapsePanels / Accordion



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