B4J Tutorial 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

SithasoDaisy

TailwindCSS WebApps using b4x

t.me

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

 

[Mashiane]

SDUITable1.AddColumn("codice", "Codice")

The row content for the "codice" column will be shown as a label.

 

[Mashiane]

SDUITable1.SetColumnComputeValue("qta", "subqta") 'ok event "subqta"

When ever you are adding a row on the table, first "compute the value" of the "qta" column by calling the "subqta" sub routine.

The "subqta" subroutine should receive an item, which is a map object of the current row. This changes the value shown on the column.

tbl.SetColumnComputeValue("agroup", "ComputeAgroupValue")

Sub ComputeAgroupValue(item As Map) As String
'get the amount for this row
dim samount As String = item.get("amount")
dim sqta as String = item.get("qta")
'convert to double & compute
Dim totalx As Double = SDUIShared.CDbl(samount) * SDUIShared.CInt(sqta)
totalx = SDUIShared.CDbl(totalx)
return totalx
End Sub

 

[Mashiane]

SDUITable1.SetColumnClass ("qta", "subqta") 'no event "subqta"

When ever you are adding a row on a table, first "compute the class" of the "qta" column by calling the "subqta" sub routine.

The "subqta" subroutine should receive an item (map). This adds a class to that column. For example, if you wanted to change the text color to red depending on a value of another column.

tbl.SetColumnComputeClass("agroup", "ComputeAgroupClass")

Sub ComputeAgroupClass(item As Map) As String
'get the amount for this row
dim samount As String = item.get("amount")
'convert to double
dim iamount As Int = sduishared.CDbl(samount)
if iamount < 0 then
the text color should be red if amount < 0
return "text-red"
else
the text color should be green if amount > 0
return "text-green"
end if
End Sub

 

[Mashiane]

how to intercept event at change value on "qta ColumnTextBox" (only one rows)

Use the changerow / change event of the table. These are mutually exclusive. Former is recommended!

 

[giannimaione]

next month i will subscript SITHASO HOLDINGS (PTY) LTD

 

[giannimaione]

Use the changerow

yes, there is (Row As Int ...)

 

[giannimaione]

i learn pocketbase and sithaso ?

 

[giannimaione]

another question

visual designer
SDUITextBox1
custom properties:
"Input Type default"
"Max Length 3" -> it is ok user can type only 3 char

but into SDUITable

    SDUITable1.AddColumnTextBox("qta", "Quantità", False) 'edit on table
    SDUITable1.SetPropertyType("qta", "default")
    SDUITable1.SetPropertyMaxLength("qta", "3") 'max 3 char, but NOT OK

I made a mistake

 

[sdleidel]

FullCalendar
Can you add 2 more events if you move an entry and if you virtually make a new one with the mouse? When pulling down with the mouse.

And /or an event when you click on an empty area so that you can enter a new appointment?

How do I find out what I have marked?

 

[giannimaione]

into visual designer:

SDUITextBox : input = date-picker
not align top (see text3 and text4 -> SDUITextBox)

and how to set 20-06-2023 ? (I made several attempts dd-mm-yyyy)
in MAIN module

DateTime.DateFormat="dd/MM/yyyy"

but i have no success

 

[Mashiane]

into visual designer:

SDUITextBox : input = date-picker
not align top (see text3 and text4 -> SDUITextBox)
View attachment 143077
and how to set 20-06-2023 ? (I made several attempts dd-mm-yyyy)
in MAIN module

DateTime.DateFormat="dd/MM/yyyy"

but i have no success

You have not attached your layout for me to see how your design is made. I can't really advise with not enough information.

You set the date format in the control itself and not via code. Check the properties.

 

[Mashiane]

FullCalendar
Can you add 2 more events if you move an entry and if you virtually make a new one with the mouse? When pulling down with the mouse.

And /or an event when you click on an empty area so that you can enter a new appointment?

How do I find out what I have marked?

I will look into it.

 

[giannimaione]

You have not attached your layout

see homelayout zip

You set the date format in the control itself and not via code. Check the properties.

solved here

 

[Mashiane]

another question

visual designer
SDUITextBox1
custom properties:
"Input Type default"
"Max Length 3" -> it is ok user can type only 3 char

but into SDUITable

    SDUITable1.AddColumnTextBox("qta", "Quantità", False) 'edit on table
    SDUITable1.SetPropertyType("qta", "default")
    SDUITable1.SetPropertyMaxLength("qta", "3") 'max 3 char, but NOT OK

I made a mistake

I am sure it is. Are you experiencing any problems when setting this on the abstract designer?

in code.

SDUITextBox1.MaxLength = 3

 

[Mashiane]

SDUITextBox - Date Picker

Please see this post.

SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

https://www.b4x.com/android/forum/threads/sithasodaisy-drawer-item-management-conditional-visibility.148436/

www.b4x.com

 

[Mashiane]

into visual designer:

SDUITextBox : input = date-picker
not align top (see text3 and text4 -> SDUITextBox)
View attachment 143077
and how to set 20-06-2023 ? (I made several attempts dd-mm-yyyy)
in MAIN module

DateTime.DateFormat="dd/MM/yyyy"

but i have no success

I have made some adjustments to your layout, when placing components inside others, please follow this kind of approach and not put components on top of others.
Its better to have some spaces between the components e.g edges.

For the textboxes to be inline with the date-picker, the textboxes should be type 'input-group' and not 'default'.

 

[giannimaione]

I am sure it is. Are you experiencing any problems when setting this on the abstract designer?

my code

    'rigo is SDUITable define on visual designer
    rigo.ClearPropertyBag
    rigo.AddColumnTextBox("qta", "Quantità", False) 'edit on table (OK!)
    rigo.AddColumn("codice", "Codice")
    rigo.AddColumn("descrizione", "Descrizione")
    rigo.SetPropertyMaxLength("qta", "3") ' not ok *************************************************
    rigo.SetColumnAlign("qta", "r") ' right alignment (OK!)
    rigo.AddDesignerColums

 

[Mashiane]

rigo.SetPropertyMaxLength("qta", "3") ' not ok *************************************************

I see, you want to set the maxlength of a column in a table. Calling .SetPropertyMaxLength only works when the table is set to property bag mode.

At the moment there is no functionality to set this at column level. I will add it for the next release.

The method will be:

tb.SetColumnMaxLength("qta", 3)

 

[sdleidel]

Bug in SDUIListView ?
For example, I've tried executing the following commands:

lv.ImageVisible=False
lv.RightIconVisible=False
lv.LeftIconVisible=False
lv.SetItemRightIconVisible("p1",False)

But the listview doesn't change.
Is there a trick or is it a bug?

 

[sdleidel]

SDUIListView II

Why does the images slide over the navbar ?