[Web][SithasoDaisy2]: Mashy Teaches TailwindCSS using b4x (with eBook)

Mashiane

Expert
Licensed User
Longtime User

SithasoDaisy - Drawer Item Management - Conditional Visibility

Ola The issue of drawer item visibility becomes interesting when you want to control which drawer items should be visible or not depending on user group permissions. As an example we want to hide and show some of these items on condition. We have defined our dawer & pages like this 'NB...
www.b4x.com
 

Mashiane

Expert
Licensed User
Longtime User
SDUITextBox - DatePicker


The date & time pickers are based on the flatpick js library.



The Date Time Format is the format of how the contents will be saved and the DP Alt Format is how content will be displayed to the end user.

When using the abstract designer, internally, the Date Format is hard coded to be 'YYYY-MM-DD' (input type=date-picker) for dates and 'YYYY-MM-DD HH:mm' (input type date-time-picker) for time. This cannot be changed. However, you can change how you want the date to be displayed to end users by specifying the DP Alt Format, these formats are specified here. https://flatpickr.js.org/formatting/
 

Mashiane

Expert
Licensed User
Longtime User
SDUITable Column Sort (Asc / Desc) via HeaderClick

When one clicks a table header, SithasoDaisy is able to sort the colum contents in Asc/Desc order.



This is possible with this code...

B4X: 
Private Sub tblemployees_HeaderClick (HeaderName As String, Status As Boolean)
    'a column header has been clicked
    Select Case HeaderName
    Case "id","employeeid", "name","picture","uploadpicture","phone","email","address","city","state","zip","notes"
        'store the order on localstorage
        Dim sb As Map = CreateMap()
        sb.Put(HeaderName, Status)
        Dim sbs As String = banano.ToJson(sb)
        banano.SetLocalStorage2("employees_order", sbs)
        'Mount the records
        banano.Await(mounted)
    Case Else
        banano.SetLocalStorage2("employees_order", "")
        'Mount the records
        banano.Await(mounted)
    End Select
End Sub

We then tweak our mounted code to use this sort order by adding this code between CLEAR_WHERE and SELECT_ALL

B4X: 
'select all Employees
    dbemployees.CLEAR_WHERE
    '
    Dim sbs As String = banano.GetLocalStorage2("employees_order")
    sbs = SDUIShared.CStr(sbs)
    If sbs = "" Then
        dbemployees.ADD_ORDER_BY("name")
    Else
        Dim sb As Map = banano.FromJson(sbs)
        Dim fn As String = sb.GetKeyAt(0)
        Dim so As Boolean = SDUIShared.CBool(sb.GetValueAt(0))
        Select Case so
        Case True
            'asc
            dbemployees.ADD_ORDER_BY(fn)
        Case False
            'desc
            dbemployees.ADD_ORDER_BY_DESC(fn)
        End Select
    End If
    '
    banano.Await(dbemployees.SELECT_ALL)

Happy Coding..
 

Mashiane

Expert
Licensed User
Longtime User
SDUITable - Fixing Column Widths



We want to add columns that will have the same width on this table.

B4X: 
banano.LoadLayout(app.PageViewer, "employeeschedulelayout")
    'set the title of the table listing
    tblemployeeschedule.Title = "Employee Training Schedule"
    'tblemployeeschedule.AddColumn("employeeid", "Employee ID")
    tblemployeeschedule.AddColumn("name", "Full Name")
    tblemployeeschedule.AddColumn("d01", "1")
    tblemployeeschedule.AddColumn("d02", "2")
    tblemployeeschedule.AddColumn("d03", "3")
    tblemployeeschedule.AddColumn("d04", "4")
    tblemployeeschedule.AddColumn("d05", "5")
    tblemployeeschedule.AddColumn("d06", "6")
    tblemployeeschedule.AddColumn("d07", "7")
    tblemployeeschedule.AddColumn("d08", "8")
    tblemployeeschedule.AddColumn("d09", "9")
    tblemployeeschedule.AddColumn("d10", "10")
    tblemployeeschedule.AddColumn("d11", "11")
    tblemployeeschedule.AddColumn("d12", "12")
    tblemployeeschedule.AddColumn("d13", "13")
    tblemployeeschedule.AddColumn("d14", "14")
    tblemployeeschedule.AddColumn("d15", "15")
    tblemployeeschedule.AddColumn("d16", "16")
    tblemployeeschedule.AddColumn("d17", "17")
    tblemployeeschedule.AddColumn("d18", "18")
    tblemployeeschedule.AddColumn("d19", "19")
    tblemployeeschedule.AddColumn("d20", "20")
    tblemployeeschedule.AddColumn("d21", "21")
    tblemployeeschedule.AddColumn("d22", "22")
    tblemployeeschedule.AddColumn("d23", "23")
    tblemployeeschedule.AddColumn("d24", "24")
    tblemployeeschedule.AddColumn("d25", "25")
    tblemployeeschedule.AddColumn("d26", "26")
    tblemployeeschedule.AddColumn("d27", "27")
    tblemployeeschedule.AddColumn("d28", "28")
    tblemployeeschedule.AddColumn("d29", "29")
    tblemployeeschedule.AddColumn("d30", "30")
    tblemployeeschedule.AddColumn("d31", "31")
    '
    tblemployeeschedule.RemoveSearch
    tblemployeeschedule.RemoveColumnChooser
    tblemployeeschedule.RemoveFooterPagination
    '
    tblemployeeschedule.AddHeaderClass("name", "w-[200px] max-w-[200px] min-w-[200px]")
    Dim ist As Int = 0
    For ist = 1 To 31
        Dim xcol As String = SDUIShared.PadRight(ist, 2, "0")
        tblemployeeschedule.AddHeaderClass($"d${xcol}"$, "w-[40px] max-w-[40px] min-w-[40px]")
    Next

To do that we add classes to the headings to set the width, min-width and max width for each column.

Enjoy!
 

Mashiane

Expert
Licensed User
Longtime User
Loading a json file to a Table

Assuming you have a json file, whether from the net / stored in your assets file, how do you load it in a table?

Here is a sample of the records... (see the employees.json file on the Assets folder of the Demo App)



The final output we need is this:



With a single call, we can achieve this.

B4X: 
banano.Await(tb4.LoadJSON("./assets/employees.json"))

To achieve this, lets first create a table, set up some properties for it and then load the data. We will not add any columns to the table as these will be added based on the 1st employee record. Assuming that all records have the same schema.

This is the final code...

B4X: 
tb4 = page.Cell(1, 1).AddTableCard("tb11")
    tb4.Title = "Employees"
    tb4.Search = True
    tb4.SearchSize = app.SIZE_XS
    tb4.ItemsPerPage = 10
    tb4.ToolbarActions = True
    tb4.ButtonsOutlined = False
    tb4.ButtonSize = app.SIZE_XS
    tb4.BadgesSize = app.SIZE_XS
    tb4.BadgesOutlined = False
    tb4.HasAddNew = True
    tb4.HasDeleteAll = True
    tb4.HasRefresh = True
    tb4.AddToolbarActionButtonIcon("active", "fa-solid fa-check", app.COLOR_INDIGO)
    tb4.Pagination = True
    tb4.Compact
    '
    banano.Await(tb4.LoadJSON("./assets/employees.json"))
 

Mashiane

Expert
Licensed User
Longtime User
Applying different colors to each row in a teble: This only applies to visible rows.

There is default "zebra" setting for the table which uses a light gray. If however you want to set different colors for each row, you can achieve so.



In the table above, each page is 10 records, so we need to apply the color schemes in 3 locations. We will create a method to apply a color per row.

B4X: 
Sub ApplyZebraRows
    'we have 10 items per page
    tb4.SetRowBackgroundColor(0, "#E9544E")
    tb4.SetRowTextColor(0, "#ffffff")
    tb4.SetRowBackgroundColor(1, "#F09D65")
    tb4.SetRowBackgroundColor(2, "#FFD364")
    tb4.SetRowBackgroundColor(3, "#2AA876")
    tb4.SetRowTextColor(3, "#ffffff")
    tb4.SetRowBackgroundColor(4, "#E7E7EA")
    tb4.SetRowBackgroundColor(5, "#F7ABB7")
    tb4.SetRowBackgroundColor(6, "#025B97")
    tb4.SetRowTextColor(6, "#ffffff")
    tb4.SetRowBackgroundColor(7, "#6496B0")
    tb4.SetRowTextColor(7, "#ffffff")
    tb4.SetRowBackgroundColor(8, "#651F3F")
    tb4.SetRowTextColor(8, "#ffffff")
    tb4.SetRowBackgroundColor(9, "#34A69C")
    tb4.SetRowTextColor(9, "#ffffff")
End Sub

1. When the items are set with SetItemsPaginate and

B4X: 
banano.Await(tb4.LoadJSON("./assets/employees.json"))
    'apply background colors
    ApplyZebraRows

2. On PrevPage click and

B4X: 
Private Sub tb11_PrevPage (e As BANanoEvent)
    e.PreventDefault
    ApplyZebraRows
End Sub


3. On NextPage click.

B4X: 
Private Sub tb11_NextPage (e As BANanoEvent)
    e.PreventDefault
    ApplyZebraRows
End Sub

You will note that the column looks "thinner". Its because we have applied the .Compact = True setting.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Shrinking Rows in a table

The difference between these two tables is the space between the rows. In the second table we have removed the Top and Bottom padding for each table cell.



B4X: 
''set the top, right, bottom and left padding of each cell in the table
    tb12.SetCellPadding("0px", "", "0px", "")
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Complete Table Styling...




B4X: 
'Static code module
#IgnoreWarnings:12
Sub Process_Globals
    'this is the name of the page
    Public name As String = "tables11"
    Public title As String = "Table Functionality"
    Public icon As String = "fa-solid fa-swatchbook"
    'this variable holds the page controller
    Public page As SDUIPage
    'this variable holds reference to the app
    'usually for constants and other things
    Public app As SDUIApp
    'the variable referencing banano lib
    Private banano As BANano        'ignore
    Private tb4 As SDUITable
    Private tblPos As Int
    Private tb12 As SDUITable
    Private srowcount As String
    private summary As Map
End Sub

'sub to show the page
Sub Show(duiapp As SDUIApp)            'ignore
    'initialize the page
    'this clears the 'pageview'
    page.AddPage(Me, name)
    page.Root.p(6)
    'get the reference to the app
    app = duiapp
    app.PagePause
    banano.Await(app.UsesFormToJSON)
    banano.Await(app.UsesTable)
    'build the page, via code or loadlayouts
    '
    
    BuildPage
    app.PageResume
End Sub


Sub getName As String
    Return name
End Sub

Sub getIcon As String
    Return icon
End Sub

Sub getTitle As String
    Return title
End Sub


'start building the page
private Sub BuildPage
    'set the page container to be in design mode
    'this shows the row/column grid lines
    page.Root.DesignMode(False)
    'center the page container
    page.Root.MXAuto
    'add 5 rows, each having 2 columns, each spanning 6
    page.Root.AddRows10.AddColumns12
    'build the grid
    page.Root.BuildGrid
    'start adding you components here
    Build_Table5
    Table5Code
End Sub

Sub Table5Code
'    Dim c5 As SDUIMockupCode = page.Cell(2, 1).AddMockUpCode("c5", "vb")
'    c5.AddCode($"Sub Build_Table5"$)
'    c5.AddCode($"tb4 = page.Cell(1, 1).AddTableListView("tb4")"$)
'    c5.AddCode($"tb4.AddColumnAvatarTitleSubTitle("avatar", "Employee", "4rem", "name", "country", app.MASK_HEXAGON)"$)
'    c5.AddCode($"tb4.AddColumnToggle("on", "On/Off", "success", False)"$)
'    c5.AddCode($"'"$)
'    c5.AddCode($"banano.Await(tb4.SetItems(Items))  'or SetItemsPaginate"$)
'    c5.AddCode($"End Sub"$)
'    c5.AddCode($"'"$)
'    c5.AddCode($"Private Sub tb4_ChangeRow (Row As Int, Value As Object, Column As String, item As Map)"$)
'    c5.AddCode($"Log(Row)"$)
'    c5.AddCode($"Log(Value)"$)
'    c5.AddCode($"Log(Column)"$)
'    c5.AddCode($"Log(item)"$)
'    c5.AddCode($"End Sub"$)
'    c5.AddCode($"'"$)
'    c5.AddCode($"Private Sub tb4_RowClick (Row As Int, item As Map)"$)
'    c5.AddCode($"Dim sid As String = item.Get("id")"$)
'    c5.AddCode($"app.ShowSwal(sid)"$)
'    c5.AddCode($"End Sub"$)
'    c5.Refresh
End Sub

Sub Build_Table5
    tb4 = page.Cell(1, 1).AddTableCard("tb11")
    tb4.Title = "Employees"
    tb4.Search = True
    tb4.SearchSize = app.SIZE_XS
    tb4.ItemsPerPage = 10
    tb4.ToolbarActions = True
    tb4.ButtonsOutlined = False
    tb4.ButtonSize = app.SIZE_XS
    tb4.BadgesSize = app.SIZE_XS
    tb4.BadgesOutlined = False
    tb4.HasAddNew = True
    tb4.HasDeleteAll = True
    tb4.HasRefresh = True
    tb4.AddToolbarActionButtonIcon("active", "fa-solid fa-check", app.COLOR_INDIGO)
    tb4.Pagination = True
    tb4.Compact
    '
    banano.Await(tb4.LoadJSON("./assets/employees.json"))
    'apply background colors
    ApplyZebraRows
    '
    tb12 = page.Cell(3, 1).AddTableCard("tb12")
    tb12.Title = "Employees"
    tb12.Search = True
    tb12.SearchSize = app.SIZE_XS
    tb12.ItemsPerPage = 10
    tb12.ToolbarActions = True
    tb12.ButtonsOutlined = False
    tb12.ButtonSize = app.SIZE_XS
    tb12.BadgesSize = app.SIZE_XS
    tb12.BadgesOutlined = False
    tb12.HasAddNew = True
    tb12.HasDeleteAll = True
    tb12.HasRefresh = True
    tb12.Pagination = True
    tb12.Compact
    'show borders around cells
    tb12.GridLines = True
    'set the header background color
    tb12.SetHeaderBackgroundColor("#E9544E")
    'set the header text color
    tb12.SetHeaderTextColor("#ffffff")
    'set the footer background color
    tb12.SetFooterBackgroundColor("#651F3F")
    'set the color of the footer
    tb12.SetFooterTextColor("#ffffff")
    '
    banano.Await(tb12.LoadJSON("./assets/employees.json"))
    'tb12.BodyFontFamily = "Verdana, Geneva, Tahoma, sans-serif"
    tb12.HeaderFontSize = "12px"
    tb12.BodyFontSize = "10px"
    tb12.FooterFontSize = "12px"
    'merge the footer columns to the first column
    tb12.SetFooterColumnsMerge(Array("first_name","last_name","email","phone","gender","age","job_title"))
    'add totals to table
    summary = tb12.SetFooterTotalSumCountColumns(Array("years_of_experience", "salary"))
    srowcount = summary.Get("rowcount")
    srowcount = SDUIShared.Thousands(srowcount)
    ApplyTableStyling
End Sub



Sub ApplyTableStyling    
    tb12.SetFooterColumn("first_name", $"Total (${srowcount})"$)
    tb12.SetFooterColumn("salary", SDUIShared.NiceMoney(summary.Get("salary")))
    tb12.SetFooterColumn("years_of_experience", SDUIShared.Thousands(summary.Get("years_of_experience")))
    'change the font-size of the first row
    tb12.SetRowStyle(0, CreateMap("font-size": "14px"))
    tb12.SetRowStyle(1, CreateMap("font-style": "italic"))
    tb12.SetRowStyle(2, CreateMap("font-weight": "bold"))
    
    'right align columns
    tb12.SetColumnAlign("years_of_experience", "r")
    tb12.SetColumnAlign("salary", "r")
    tb12.SetColumnAlign("gender", "c")
    'decrease cell padding
    tb12.SetCellPadding("0px", "", "0px", "")
    tb12.SetRowColumnStyle("first_name", 5, CreateMap("font-size": "8px"))
    tb12.SetRowColumnStyle("last_name", 6, CreateMap("font-family": "Verdana, Geneva, Tahoma, sans-serif"))
    tb12.SetColumnStyle("age", CreateMap("background-color":"green"))
End Sub

Private Sub tb12_PrevPage (e As BANanoEvent)
    e.PreventDefault
    ApplyTableStyling
End Sub

Private Sub tb12_NextPage (e As BANanoEvent)
    e.PreventDefault
    ApplyTableStyling
End Sub

Private Sub tb11_RowClick (Row As Int, item As Map)
    Dim sid As String = item.Get("id")
    app.ShowSwal(sid)
End Sub

Private Sub tb11_PrevPage (e As BANanoEvent)
    e.PreventDefault
    ApplyZebraRows
End Sub

Private Sub tb11_NextPage (e As BANanoEvent)
    e.PreventDefault
    ApplyZebraRows
End Sub

Sub ApplyZebraRows
    'we have 10 items per page
    tb4.SetRowBackgroundColor(0, "#E9544E")
    tb4.SetRowTextColor(0, "#ffffff")
    tb4.SetRowBackgroundColor(1, "#F09D65")
    tb4.SetRowBackgroundColor(2, "#FFD364")
    tb4.SetRowBackgroundColor(3, "#2AA876")
    tb4.SetRowTextColor(3, "#ffffff")
    tb4.SetRowBackgroundColor(4, "#E7E7EA")
    tb4.SetRowBackgroundColor(5, "#F7ABB7")
    tb4.SetRowBackgroundColor(6, "#025B97")
    tb4.SetRowTextColor(6, "#ffffff")
    tb4.SetRowBackgroundColor(7, "#6496B0")
    tb4.SetRowTextColor(7, "#ffffff")
    tb4.SetRowBackgroundColor(8, "#651F3F")
    tb4.SetRowTextColor(8, "#ffffff")
    tb4.SetRowBackgroundColor(9, "#34A69C")
    tb4.SetRowTextColor(9, "#ffffff")
End Sub
 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
SithasoDaisy V2.16
Creating Cards Using the Abstract Designer: Part 1

We will create cards by using different custom views.

By the end of this you will have this output:



This is based on the HTML tree structure... Note how the elements are places one inside another..



We will use the abstract designer to create this outline.



With the creation of the cards this way, we can use the BANano.LoadLayout Array and design our cards anyway we want.

See the demo code modules and the respective layouts on how this has been done.
  • pgBasicCards
Creating Cards : Part 2 (Compact Card)
  • pgbasiccards2





Creating Cards : Part 3

  • pgbasiccard3




Creating Cards : Part 4

  • pgbasiccards4




Creating Cards : Part 5

  • pgbasiccards5




Creating Cards : Part 6

  • pgbasiccards6



 
You must log in or register to reply here.

Similar Threads

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
7 8 9
Replies
163
Views
75K
Mashiane
Games [eBook] Game Programming Patterns
Replies
0
Views
4K
wonder
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…