Android Code Snippet B4XTable Tricks

Recently I started to use B4XTable and required some modification. I searched the Forum and found quite a few solutions.
However there were still some things I needed change. I found them tricky and I thought I would share my experience.

'Customize tricky elements of B4XTable1: Dim B4XTable1 as B4XTable
Sleep(0)    'To allow B4XTable1 to be ready
  
'1) Find navigation panel and switch positions with search filed 
Dim pnlNav As B4XView = B4XTable1.lblNumber.Parent
pnlNav.Left = 80%x
pnlNav.Top = -5
B4XTable1.SearchField.mBase.left = 0

'2) Add click event to page number, the pageButton event will open a dialog    to specify a target page
'       (you need to add a B4XDialog and set B4XTable1.CurrentPage = InputTemplate.Text)
Dim pageButton As Button
pageButton.Initialize("pageButton")
pageButton.Color = xui.Color_Transparent    'Transparent button fits exactly over Number label
pnlNav.AddView(pageButton, B4XTable1.lblNumber.Left, B4XTable1.lblNumber.Top, _
                B4XTable1.lblNumber.Width, B4XTable1.lblNumber.Height)

Edit: B4XTable V1.18 released - lblSort (sort arrow) is now public.
'3) Change color of sort direction icon which is not added to the panel until
'   panel is clicked - this is a workaround and there might be better ways
'Go to internal libraries, unzip B4XTable, extract B4XTable.bas and B4XTable.bal (in Files)
'Copy B4XTable.bal to project Files and B4XTable.bas to project root folder
'Disable the B4XTable library reference, add existing module B4XTable.bas to project
'Change Private lblSort to Public lblSort to expose this label in order to set its colors
B4XTable1.lblSort.TextColor = xui.Color_Black

'4) Light theme for search field
B4XTable1.SearchField.mBase.Color = xui.Color_White
B4XTable1.SearchField.TextField.TextColor = xui.Color_Black
B4XTable1.SearchField.TextField.TextSize = 20 
B4XTable1.SearchField.lblClear.TextColor = xui.Color_Black
B4XTable1.SearchField.lblV.TextColor = xui.Color_Black

 

[Erel]

B4XTable V1.18 released - lblSort (sort arrow) is now public.

 

[William Lancee]

Somehow I knew that would happen

 

[Mahares]

Erel added this to the B4XTable in ver. 1.18:

B4XTable1.lblSort.textColor= XUI.Color_Green

It would stand out more if you can change the color based on the sort direction:

B4XTable1.lblSort.ASC.textColor= XUI.Color_Green
B4XTable1.lblSort.DESC.textColor= XUI.Color_Red

Nevertheless, it is a nice feature irrespective of its code syntax..

 

[Mahares]

B4XTable V1.18 released - lblSort (sort arrow) is now public.

How To Change the Sort Direction Arrow Color Based on its Direction:
Here is a workaround that works but Erel is going to frown about it big time, unless he decides to implement it in the next B4XTable update.
I changed the B4XTable.bas class module in the B4X4Table.b4xlib so SortColumn is public with:

Public SortColumn as string

and then I updated the lib, and then put this code in my project

Sub B4XTable1_HeaderClicked (ColumnId As String)
    If B4XTable1.SortColumn.Contains("DESC")  Then
        B4XTable1.lblSort.textColor= XUI.Color_Red
    Else
        B4XTable1.lblSort.textColor= XUI.Color_Green
    End If   
End Sub

Of course it will be overridden once Erel updates the lib, unless he shows his usual benevolent side by implementing it, I know he will make it look easier than my implementation.

 

[Erel]

No need to modify B4XTable for this. You can do it like this:

Sub B4XTable1_HeaderClicked (ColumnId As String)
    If B4XTable1.lblSort.Text = Chr(0xF0DE) Then
        B4XTable1.lblSort.textColor= xui.Color_Red
    Else
        B4XTable1.lblSort.textColor= xui.Color_Green
    End If
End Sub

 

[Mahares]

No need to modify B4XTable for this. You can do it like this:

Without changing the class or lib, you cannot change the shape of the arrows like you can do in this below code. You are stuck with either: Chr(0xF0DD) or Chr(0xF0DE) : The below code allows you to change the direction shape to any form you want along with its color.

Sub B4XTable1_HeaderClicked (ColumnId As String)
  If B4XTable1.SortColumn.Contains("DESC")  Then
        B4XTable1.lblSort.Text=Chr(0xF175)
        B4XTable1.lblSort.textColor= XUI.Color_Red
    Else
        B4XTable1.lblSort.Text = Chr(0xF176)
        B4XTable1.lblSort.textColor= XUI.Color_Green
    End If
End Sub

 

[Erel]

This code will not work perfectly as the sort icon can be updated again after the HeaderClicked event in some cases.

You can use this code to change the sort icon text and color:

Sub B4XTable1_HeaderClicked (ColumnId As String)
    Dim up As Boolean = B4XTable1.lblSort.Text = Chr(0xF0DE)
    B4XTable1.lblSort.Text = ""
    Sleep(50)
    If Not(up) Then
        B4XTable1.lblSort.Text = "D"
        B4XTable1.lblSort.textColor= xui.Color_Red
    Else
        B4XTable1.lblSort.Text = "U"
        B4XTable1.lblSort.textColor= xui.Color_Green
    End If
End Sub

 

[William Lancee]

Here is another trick for padding the text in a cell, the solutions offered before don't always work.
Note my B4XTable1 is called defaultTable (I spawn other tables from one "defaultTable" defined in designer).

Edit: on further testing, the when a search is started, the alignments are ignored (at least in B4J)
However they come back when the search is reset.

Sub defaultTable_DataUpdated
    For i = 0 To defaultTable.VisibleRowIds.Size - 1
        Dim RowId As Long = defaultTable.VisibleRowIds.Get(i)
        For j = 0 To defaultTable.Columns.size - 1
            Dim c As B4XTableColumn = defaultTable.Columns.Get(j)
            Dim pnl As B4XView = c.CellsLayouts.Get(i + 1)
            If RowId > 0 Then
                Dim lbl As Label = pnl.GetView(0)
                If lbl.Alignment = "CENTER_LEFT" Then
                    lbl.left = 10dip
                Else If lbl.Alignment = "CENTER_RIGHT" Then
                    lbl.left = -10dip
                End If
            End If
        Next
    Next
End Sub

 

[William Lancee]

After another look into the source code for B4XTable, I found that in order to highlight the search string in B4J, a TextFlow is used.
The following adjusts for that in B4J.

    For i = 0 To defaultTable.VisibleRowIds.Size - 1
        Dim RowId As Long = defaultTable.VisibleRowIds.Get(i)
        For j = 0 To defaultTable.Columns.size - 1
            Dim c As B4XTableColumn = defaultTable.Columns.Get(j)
            Dim pnl As B4XView = c.CellsLayouts.Get(i + 1)
            If RowId > 0 Then
                Dim lbl As Label = pnl.GetView(0)
                If lbl.Alignment = "CENTER_LEFT" Then
                    If (pnl.NumberOfViews=2) Then
                        Dim TextPanex As Pane = pnl.getView(1)
                        TextPanex.Style = "-fx-text-alignment: left;"
                    End If
                    lbl.left = 10dip
                Else If lbl.Alignment = "CENTER_RIGHT" Then
                    If (pnl.NumberOfViews=2) Then
                        Dim TextPanex As Pane = pnl.getView(1)
                        TextPanex.Style = "-fx-text-alignment: right;"
                    End If
                    lbl.left = -10dip
                End If
            End If
        Next
    Next

 

[William Lancee]

If you want to reset the order of the table after a sort, make at least one of columns .Sortable = False
After adding the following code, a click on the non-sortable column will reset the table to the original order.

'My Table is called defaultTable rather than B4XTable1

Sub defaultTable_HeaderClicked (ColumnId As String)
    Sleep(25)
    If defaultTable.GetColumn(ColumnId).Sortable = False  Then
        For Each c As B4XTableColumn In defaultTable.Columns
            c.InternalSortMode = ""
        Next
        defaultTable.FirstRowIndex = 0
        defaultTable.Refresh
        Return
    End If
End Sub