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


Check $5 WebApps

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Hi,
in a Table i have add the DatePicker1
1:
SDUITableEdit.AddColumnDatePicker1("myenddatum","Bis", False, "d-m-Y", "d-m-Y", False, False, False,"de")

So, after i use "setitems" the Datefield is clear. That is ok, i have not Date set.

How i can change or better, how i can update the Date (Field) with code?

The Field is blank...
When do you want to update / change the date?

There are methods to update content in the "visible" rows of your table after SetItems/ SetItemsPerPage. These start from 1 to n. n being the ItemsPerPage value.

1722524001030.png


To find your row, you can call FindRowByColumn, the value being a unique value for each row in the table, e.g. id field.

This is done automatically by .SetRowColumnBy (update a particular column in a row) and SetRowBy (update the whole row)

PS: Your date field, myenddatum should contain the date in YYYY-MM-DD format for example, if the list of rows passed with SetItems contain content, this should display.

Ta!
 

sdleidel

Active Member
Licensed User
Longtime User
I
When do you want to update / change the date?

There are methods to update content in the "visible" rows of your table after SetItems/ SetItemsPerPage. These start from 1 to n. n being the ItemsPerPage value.

View attachment 155835

To find your row, you can call FindRowByColumn, the value being a unique value for each row in the table, e.g. id field.

This is done automatically by .SetRowColumnBy (update a particular column in a row) and SetRowBy (update the whole row)

PS: Your date field, myenddatum should contain the date in YYYY-MM-DD format for example, if the list of rows passed with SetItems contain content, this should display.

Ta!
I have test it with set
When do you want to update / change the date?

There are methods to update content in the "visible" rows of your table after SetItems/ SetItemsPerPage. These start from 1 to n. n being the ItemsPerPage value.

View attachment 155835

To find your row, you can call FindRowByColumn, the value being a unique value for each row in the table, e.g. id field.

This is done automatically by .SetRowColumnBy (update a particular column in a row) and SetRowBy (update the whole row)

PS: Your date field, myenddatum should contain the date in YYYY-MM-DD format for example, if the list of rows passed with SetItems contain content, this should display.

Ta!
Hi,

I have the row from the change event.
I tried updaterow and setitem, etc.

When I look at the item map in the Change Event, it is also changed. But the field remains empty...

Can you give an example?
 

Mashiane

Expert
Licensed User
Longtime User

sdleidel

Active Member
Licensed User
Longtime User
I will have to get a simple test project from you to reproduce the issue. Please attach it here. Did you check the demo app on how to add a working date picker on the table?

As a reference, this here is the code structure of inline editing.

Thread '[Web] SithasoDaisy SDUITable Inline Editing - Calculations' https://www.b4x.com/android/forum/t...sduitable-inline-editing-calculations.162035/
I put together a quick “demo”...
You have to click the button
I would like to change one of the date pickers in the SDUITableHolidayEdit_ChangeRow.
But no matter what I do the field remains empty...
 

Attachments

  • testapp.zip
    47.9 KB · Views: 57

sdleidel

Active Member
Licensed User
Longtime User
I put together a quick “demo”...
You have to click the button
I would like to change one of the date pickers in the SDUITableHolidayEdit_ChangeRow.
But no matter what I do the field remains empty...
When i add the Sub

SDUITableHolidayEdit_Change (Value As Object, Column As String, item As Map)

and the Sub

SDUITableHolidayEdit_Changerow (Row As Int, Value As Object, Column As String, item As Map)


then the code in SDUITableHolidayEdit_Changerow is no longer executed... Why?
 

Mashiane

Expert
Licensed User
Longtime User
cI put together a quick “demo”...
You have to click the button
I would like to change one of the date pickers in the SDUITableHolidayEdit_ChangeRow.
But no matter what I do the field remains empty...
You are propably just tired. You have added 3 columns to your table.

B4X:
SDUITableHolidayEdit.AddColumnDatePicker("mystartdatum","Von", False, "d-m-Y", "d-m-Y", False, False, False)',"de")
    SDUITableHolidayEdit.AddColumnDatePicker1("myenddatum","Bis", False, "d-m-Y", "d-m-Y", False, False, False,"de")
    SDUITableHolidayEdit.AddColumnRadioGroup("urlaubkrankcheck", "Urlaub/Krank", False, app.COLOR_PRIMARY, CreateMap("urlaub":"Urlaub","krank":"Krank"))

And then you add a row with just 1 column specified.

B4X:
Dim items As List
    items.Initialize
    items.Add(CreateMap("urlaubkrankcheck":"urlaub"))
    banano.await(SDUITableHolidayEdit.SetItemsPaginate(items))

Off course the date will be blank. There is NO column named "mystartdatum" on the row you added. Even if its initially a blank date when you start, for the table to work, each row (aka a map) should have the respective keys matching to the columns. It just doesnt work like this.

Please note that the internal date format should be YYYY-MM-DD, irrespective of the display format.
 

Mashiane

Expert
Licensed User
Longtime User
@sdleidel , i have updated your example.

I assume this is what you are looking for? That when there is a change in the row, the date pickers are updated?

DatePickers.gif


For date pickers, there is a hidden date picker that gets created by flatpickr component for each date picker that is created. I usually just reload records from the database to refresh my table listing. In this case, the hidden flatpickr component was not being "updated", I then needed to adjust the code to take care of this.

Please unzip the SDUITable.zip file and include this SDUITable component class in your project (NOT IN THE B4XLIB) and see if it fixes the issue.

Ta!

Thanks...
 

Attachments

  • testapp.zip
    47.9 KB · Views: 44
  • SDUITable.zip
    61.1 KB · Views: 51
Last edited:

sdleidel

Active Member
Licensed User
Longtime User
@sdleidel , i have updated your example.

I assume this is what you are looking for? That when there is a change in the row, the date pickers are updated?

View attachment 155888

For date pickers, there is a hidden date picker that gets created by flatpickr component for each date picker that is created. I usually just reload records from the database to refresh my table listing. In this case, the hidden flatpickr component was not being "updated", I then needed to adjust the code to take care of this.

Please unzip the SDUITable.zip file and include this SDUITable component class in your project (NOT IN THE B4XLIB) and see if it fixes the issue.

Ta!

Thanks...
I’m on then road.
I Test it.

yes I think that is the Solution.
Many thanks… ?
 

giannimaione

Well-Known Member
Licensed User
Longtime User
hello boys,
how to save a "string" on a folder of web site?

in demo, please, see "pgHome" module
B4X:
Dim pdf As SDUIJSPDF
pdf.Save
'here save on local pc user
but how to save on folder "./assets" of web site
B4X:
Dim SuperString As String = pdf.getOutput(pdf.OUTPUT_DATA_URI_STRING)
    Log(SuperString)
'how to save on folder of web site ???
 

Attachments

  • demopdf.zip
    320.8 KB · Views: 42

Mashiane

Expert
Licensed User
Longtime User
hello boys,
how to save a "string" on a folder of web site?

in demo, please, see "pgHome" module
B4X:
Dim pdf As SDUIJSPDF
pdf.Save
'here save on local pc user
but how to save on folder "./assets" of web site
B4X:
Dim SuperString As String = pdf.getOutput(pdf.OUTPUT_DATA_URI_STRING)
    Log(SuperString)
'how to save on folder of web site ???
Option 1. Use php. There is a php class I published here some time ago with file handling functions.

Option 2. Use pocketbase, you can save the file contents in a field as a base64 string. It's also possible to create a record with the file, this uploads the file to pocketbase and gives you a url for it.
 
Last edited:

giannimaione

Well-Known Member
Licensed User
Longtime User
Option 1. Use php. There is a php class I published here some time ago with file handling functions.
with this code
B4X:
Dim a1 As String = pdf.getOutput(pdf.OUTPUT_BLOB)
SDUIShared.DownloadBlob(a1, "blob.pdf") 'it is OK
'a file blob.pdf is saved on local PC
'
'
now i want use your "BANanoPHP" to upload on assets folder
B4X:
Dim blobPDF As String = pdf.getOutput(pdf.OUTPUT_BLOB)
'fileO as Map
'limit as Long
'how to save a string blobPDF into a file "example.pdf"
'your example
bPhp.FileUploadWait(fileO, limit, "./assets")
'how to fileO.Put(????, ??????)
 

Mashiane

Expert
Licensed User
Longtime User
with this code
B4X:
Dim a1 As String = pdf.getOutput(pdf.OUTPUT_BLOB)
SDUIShared.DownloadBlob(a1, "blob.pdf") 'it is OK
'a file blob.pdf is saved on local PC
'
'
now i want use your "BANanoPHP" to upload on assets folder
B4X:
Dim blobPDF As String = pdf.getOutput(pdf.OUTPUT_BLOB)
'fileO as Map
'limit as Long
'how to save a string blobPDF into a file "example.pdf"
'your example
bPhp.FileUploadWait(fileO, limit, "./assets")
'how to fileO.Put(????, ??????)
This is NOT a SithasoDaisy related question but rather a BANano + Php Question.

To help you, I have searched the forum, it seems I had asked a similar question before, here.


Based on your example code, try this

B4X:
Dim result As BANanoObject = banano.Await(pdf.blob)
      Dim f As BANanoObject
    f.Initialize2("File",Array(Array(result), "testpdf.pdf", CreateMap("type": result.getfield("type"))))
    banano.Await(SDUIShared.UploadFileOptionsWait(f, "../assets", "n"))

For file management functions using BANanoPHP, check this post


or


 

Attachments

  • demopdf.zip
    323.2 KB · Views: 48
Last edited:

Mashiane

Expert
Licensed User
Longtime User
I would like to use banano PWA and your wrapper with ESP32 Could you show how to build a simple site (wifi manager) like the one shown in the link? https://www.instructables.com/WiFiTimeManager-Arduino-IDE-ESP32-Time-Library/
Hi, if you know how to use the abstract designer, you are halfway there.

Check this out as a start.


Also there is a free wireframing tool that you can use to plan your UI. This also comes with a guide on how to create the UI using the abstract designer. This tool is here.


The same approach you would use to drag n drop components inside the abstract designer is what is followed here too.

Is there anything else.
 

luki_c

Member
Is there anything else.
Yes :) I just wanted to say that I am impressed by the quality of the material I have obtained after purchasing your library. Thank you for this work.
PS. The entry from the second link I didn't know before, I still have a lot to learn.
 

giannimaione

Well-Known Member
Licensed User
Longtime User
hello,
in my project there are several pages;
now i am on the page named "customers";
B4X:
private Sub BuildPage
banano.LoadLayout(app.PageViewer, "CustomerLayout")
'....SDUITableCustomer
'....
is it possible to run the page named "detail" where i show:
B4X:
private Sub BuildPage
banano.LoadLayout(app.PageViewer, "DetailLayout")
'....SDUITableDetail
'....
and then close the "detail" page and go back to the "customers" page?
 

Mashiane

Expert
Licensed User
Longtime User
hello,
in my project there are several pages;
now i am on the page named "customers";
B4X:
private Sub BuildPage
banano.LoadLayout(app.PageViewer, "CustomerLayout")
'....SDUITableCustomer
'....
is it possible to run the page named "detail" where i show:
B4X:
private Sub BuildPage
banano.LoadLayout(app.PageViewer, "DetailLayout")
'....SDUITableDetail
'....
and then close the "detail" page and go back to the "customers" page?
Page navigation is as simple as executing customers.Show(App) and detail.show(app)
 
Top