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

Mashiane · Oct 16, 2023

Upcoming Updates: DropZone

Mashiane · Oct 16, 2023

SithasoDaisy 2.16 Now Avaialable.

What's New

Basic Cards (Tutorial Below)
Updated b4xTemplates
Swiper
FullCalendar DateRangeChange event (toolbar button clicks)
Color Wheel
Drop Zone

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

Code:

app.AddApp(Me, Main.AppName)

To

Code:

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.

Mashiane · Oct 17, 2023

What's new in V2.16

Mashiane · Oct 20, 2023

Version 2.16 Update

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

1.1. Added NonMobile after AddAppDrawer

Code:

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

1.2 Commented out

Code:

'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 · Jan 10, 2024

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 · Feb 25, 2024

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

Code:

Dim help As SDUIEnjoyHint
    help.Initialize(Me, "help")

Mashiane · Mar 12, 2024

Upcoming Updates: Row Menu Items with Icons

Code:

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

Code:

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.

Code:

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 · Mar 12, 2024

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.

Code:

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.

Code:

Items.Initialize
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":1, "rate":2, "email":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "name":"Anele Mbanga", "job":"Software Engineer", "color":"Primary", "avatar":"./assets/mashy.jpg","country":"South Africa","clicklink":100, "sm": "fa-brands fa-whatsapp"))

Mashiane · Mar 12, 2024

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.

Code:

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

Mashiane · Mar 12, 2024

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.

Code:

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.

Code:

Items.Initialize
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":1, "rate":2, "email":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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 · Mar 12, 2024

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.

Code:

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

Code:

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 · Mar 12, 2024

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.

Code:

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 · Mar 12, 2024

Upcoming Updates: Icon Title Column

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

Code:

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"

Code:

Items.Initialize
    Items.Add(CreateMap("hours":4, "status":"online", "on":True, "id":1, "rate":2, "email":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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":"[email protected]", "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 · Mar 12, 2024

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.

Code:

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.

Code:

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 · Mar 15, 2024

Upcoming Updates: SithasoDaisy Multi User Footer b4xtemplate.

With this template, one is able to create apps with sticky footers. In b4j IDE click File > New > SithasoDaisy MultiUser Footer

Mashiane · Mar 15, 2024

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.

Code:

Public color As String = "#0000cc"

2. Add the getColor sub routine.

Code:

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.

Code:

appdrawer.AddItemPage(pgHome)

Color Picker

Mashiane · Mar 15, 2024

Upcoming Updates : SithasoDaisy MultiUser Bottom Nav Bar b4xTemplate

In the b4j IDE, click File > New > SithasoDaisy MultiUser BottomNav

Mashiane · Mar 27, 2024

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.

Code:

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

Via code

Code:

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

Mashiane · May 11, 2024

Upcoming Updates...

1. When adding "indicator buttons", one can now specify where the indicator should be.

top-start

top-end (default)

bottom-start

bottom-end

Mashiane · May 12, 2024

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.

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

SithasoDaisy TailwindCSS WebApps​

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Similar Threads

SithasoDaisy TailwindCSS WebApps