B4J Question ABMaterial ABMCombo Issue

walterf25

Expert
Licensed User
Hi All, me again, sorry if this is a stupid question, but I am seeing an issue while adding a few controls inside a ModalSheet dynamically.

Basically a modalsheet opens up and it allows the user to create a Database table, the user can continue to add more columns and select which column needs to be made the Primary key.

This all works beautiful up to 8 columns, but the issue i am seeing starts happening when I want to add more than 8 columns.

Each row on the modalsheet container consists of a ABMInput control, ABMCombo, ABMCheckBox and two ABMButtons.
If the user clicks on the Add button another row will be added to the container with the same controls described above.

As I mentioned this works just fine as long as I keep it under 8 rows, please watch the small video i created which shows the issue, basically after the 8th row, the 9th row gets created with the same controls but when i click on the ABMCombo control, it doesn't display the items added to it, the ABMCombo should contain the Column Type items, INTEGER, TEXT, BLOB and REAL, as you guys can see all the items created up to the 8th row display these items inside the ABMCombo controls just fine, but after the 9th one, the ABMCombo doesn't show the drop down list of items, I've noticed that If I create a 10th row and then i go back to the 9th row then i can make the ABMCombo display the list of items, but When I select any of them it doesn't show it as the item selected either way.

I was wondering if this is a limitation of ABMaterial, or if and most likely i 'am doing something wrong, here's also the relevant code that creates the ModalSheet with the initial controls and the code that adds the rest of the rows upon clicking the Add button.
CreateModalSheet:
Sub BuildModalSheet() As ABMModalSheet
    Dim myModal As ABMModalSheet
    myModal.Initialize(page, "myModal", False, ABM.MODALSHEET_TYPE_NORMAL, "mymodal")
    myModal.Content.UseTheme("mymodal")
    myModal.Footer.UseTheme("mymodal")
    myModal.Size = ABM.MODALSHEET_SIZE_NORMAL
    myModal.IsDismissible = False
    
    fieldlist.Initialize
    fieldindex = fieldindex + 1
    
    ' create the grid for the content
    myModal.Content.AddRows(1,True, "").AddCells12(5,"centre")
    '''myModal.Content.AddRows(5,True, "").AddCellsOS(4,0,0,0,3,3,4,"centre")
    myModal.Content.AddRows(10,True, "").AddCellsOSMPV(4,-1,0,0,4,3,3,0,0,0,0,ABM.VISIBILITY_ALL, "centre")
    '''myModal.Content.AddRows(5,True, "").AddCells12(1,"")
    myModal.Content.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    ' add paragraph
    myModal.Content.Cell(1,1).AddComponent(ABMShared.BuildParagraph3(page,"par1","Enter Field Name and Field Type to Create Database Table"))
    Dim googleInp As ABMInput
    googleInp.Initialize(page, "tablename", ABM.INPUT_TEXT, "Enter Table Name", False, "input")
    googleInp.AutoCompleteType = ABM.AUTOCOMPLETE_GOOGLE
    myModal.Content.Cell(1,1).AddComponent(googleInp)
    
    ' create the input fields for the content
    Dim inp1 As ABMInput
    inp1.Initialize(page, "inp1", ABM.INPUT_TEXT, "FieldName", False, "input")
    inp1.Tag = fieldindex&",1"
    inp1.PlaceHolderText = "FieldName"
    myModal.Content.Cell(2,1).AddComponent(inp1)
    
    Dim fieldType As ABMCombo
    fieldType.Initialize(page, "ftype1", "FieldType", 350, "combo")
    fieldType.Tag = fieldindex&",2"
    fieldType.AddItem("0", "TEXT",BuildSimpleItem("0", "", "TEXT"))
    fieldType.AddItem("1", "INTEGER", BuildSimpleItem("1", "", "INTEGER"))
    fieldType.AddItem("2", "BLOB", BuildSimpleItem("2", "", "BLOB"))
    fieldType.AddItem("3", "REAL", BuildSimpleItem("3", "", "REAL"))
    myModal.Content.Cell(2,2).AddComponent(fieldType)
    
    Dim primarykey As ABMCheckbox
    primarykey.Initialize(page, "chkbox1"&fieldindex, "Make Primary Key", False, "")
    primarykey.Tag = fieldindex&",3"
    myModal.Content.Cell(2,3).MarginTop = "30px"
    myModal.Content.Cell(2,3).AddComponent(primarykey)
    
    Dim btnfieldadd As ABMButton
    btnfieldadd.InitializeFloating(page, "btnfieldadd", "mdi-content-add", "right")
    btnfieldadd.Size = ABM.BUTTONSIZE_NORMAL
    btnfieldadd.Tag = "2,4"
    myModal.Content.cell(2,4).UseTheme("right")
    myModal.Content.Cell(2,4).AddComponent(btnfieldadd)
    Log("adding btnfieldadd at: " & fieldindex&",4")
    ' create the grid for the footer
    ' we add a row without the default 20px padding so we need to use AddRowsM().  If we do not use this method, a scrollbar will appear to the sheet.
    myModal.Footer.AddRowsM(1,True,0,0, "").AddCellsOS(1,2,6,6,3,3,3,"modalsheet").AddCellsOS(1,4,0,0,3,3,3, "modalsheet")
    myModal.Footer.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    
    ' create the buttons for the footer
    Dim msbtn1 As ABMButton
    msbtn1.InitializeFlat(page, "msbtn1", "", "", "CREATE", "transparent")
    myModal.Footer.Cell(1,1).AddComponent(msbtn1)
    
    Dim msbtn2 As ABMButton
    msbtn2.InitializeFlat(page, "msbtn2", "", "", "CANCEL", "transparent")
    myModal.Footer.Cell(1,2).AddComponent(msbtn2)
    
    fieldindex = fieldindex + 1
    Return myModal
End Sub
And here's the code that adds more rows with the same controls.
BtnAddfield:
Sub btnfieldadd_Clicked(Target As String)
    Dim myModal As ABMModalSheet = page.ModalSheet("myModal")
    Dim btn As ABMButton = myModal.Content.Component("btnfieldadd")
    Dim btn2 As ABMButton = myModal.Content.Component("btnfielddelete")
    Dim tag() As String = Regex.Split(",", btn.Tag)
    If fieldindex > 2 Then
    Dim tag2() As String = Regex.Split(",", btn2.Tag)
    End If
    Log("removing add button at: " & tag(0)&","&tag(1))
    myModal.Content.Cell(tag(0),tag(1)).RemoveComponent("btnfieldadd")
    If fieldindex > 2 Then
    '''If btn2.IsInitialized Then
    myModal.Content.Cell(tag2(0),tag2(1)).RemoveComponent("btnfielddelete")
    '''End If
    '''Log("removing button at cell: " & tag(0) & "," & tag(1))
    End If
    
    If fieldindex >= 5 Then
        '''Log("inserting row...")
        '''myModal.Content.AddRow(1, True, "", "").
        '''myModal.Content.AddRows(1,True, "").AddCellsOS(4,0,1,1,4,3,3,"centre")
        myModal.Content.AddRows(1,True, "").AddCellsOS(4,0,0,0,3,3,3,"centre")
        '''myModal.Content.AddRows(1,True, "").AddCellsOSMPV(4,-1,0,0,3,3,3,0,0,10,10,ABM.VISIBILITY_ALL, "centre")
        '''myModal.Content.AddRows(1,True, "").AddCellsOSMPV(4,-1,0,0,4,3,3,0,0,10,10,ABM.VISIBILITY_ALL, "centre")
        myModal.Content.BuildGrid
        myModal.Refresh
    End If
    
    ' create the input fields for the content
    '''fieldindex = fieldindex + 1
    fieldindex = fieldindex + 1
    
    Dim inp1 As ABMInput
    inp1.Initialize(page, "inp"&fieldindex, ABM.INPUT_TEXT, "FieldName", False, "input")
    Log("input field: " & "inp"&fieldindex)
    inp1.PlaceHolderText = "FieldName"
    myModal.Content.Cell(fieldindex,1).AddComponent(inp1)
    
    '''Log("adding fieldname at cell: " & fieldindex & "," & 1)
    
    Dim fieldType As ABMCombo
    fieldType.Initialize(page, "ftype"&fieldindex, "FieldType", 350, "combo")
    fieldType.AddItem("0", "TEXT",BuildSimpleItem("0", "", "TEXT"))
    fieldType.AddItem("1", "INTEGER", BuildSimpleItem("1", "", "INTEGER"))
    fieldType.AddItem("2", "BLOB", BuildSimpleItem("2", "", "BLOB"))
    fieldType.AddItem("3", "REAL", BuildSimpleItem("3", "", "REAL"))
    myModal.Content.Cell(fieldindex,2).AddComponent(fieldType)
    '''Log("adding ABMCombo at cell: " & fieldindex&","&2)
    
    Dim primarykey As ABMCheckbox
    primarykey.Initialize(page, "chkbox1"&fieldindex, "Make Primary Key", False, "")
    primarykey.Tag = fieldindex&",3"
    myModal.Content.Cell(fieldindex,3).MarginTop = "30px"
    myModal.Content.Cell(fieldindex,3).AddComponent(primarykey)
    Dim btnfieldadd As ABMButton
    btnfieldadd.InitializeFloating(page, "btnfieldadd", "mdi-content-add", "right")
    btnfieldadd.Size = ABM.BUTTONSIZE_NORMAL
    btnfieldadd.Tag = fieldindex&",4"
    myModal.Content.Cell(fieldindex,4).UseTheme("right")
    myModal.Content.Cell(fieldindex,4).AddComponent(btnfieldadd)
    Log("adding btnfieldadd at: " & fieldindex&",4")
    '''Log("adding ABMButton at cell: " & fieldindex&","&4)
    
    Dim btnfielddelete As ABMButton
    btnfielddelete.InitializeFloating(page, "btnfielddelete", "mdi-action-delete", "right")
    btnfielddelete.Size = ABM.BUTTONSIZE_NORMAL
    btnfielddelete.Tag = fieldindex&",4"
    myModal.Content.Cell(fieldindex,4).UseTheme("right")
    myModal.Content.Cell(fieldindex,4).AddComponent(btnfielddelete)
    Log("adding btnfielddelete at: " & fieldindex&",4")
    '''fieldindex = fieldindex + 1
    
    myModal.Refresh
End Sub
Here's a small video I created which shows the issue, you guys will notice that on the 9th and 10th row even though I continue to click on the ABMCombo control the list of items doesn't get displayed.

Hopefully someone can shed some light on this problem.

Walter
 

alwaysbusy

Expert
Licensed User
I can reproduce this, however can't find an explanation why this happens. The doesn't appear to be an error, it just doesn't open up.

My solution would be this: Using a container and AddArrayComponent. I've added comments to the code:
B4X:
Sub BuildModalSheet() As ABMModalSheet
    Dim myModal As ABMModalSheet
    myModal.Initialize(page, "myModal", False, ABM.MODALSHEET_TYPE_NORMAL, "mymodal")
    myModal.Content.UseTheme("mymodal")
    myModal.Footer.UseTheme("mymodal")
    myModal.Size = ABM.MODALSHEET_SIZE_NORMAL
    myModal.IsDismissible = False
    
    FieldList.Initialize
    FieldIndex = FieldIndex + 1
    
    ' create the grid for the content
    myModal.Content.AddRows(1,True, "").AddCells12(5,"centre")
    ' ALAIN: Add one row with one cell.  We will add all our Field containers in this cell
    ' this way, we do not have to add rows dynamically
    myModal.Content.AddRows(1,True, "").AddCellsOSMPV(1,0,0,0,12,12,12,0,0,0,0,ABM.VISIBILITY_ALL, "centre")    
    myModal.Content.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    
    ' add paragraph
    myModal.Content.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page,"par1","Enter Field Name and Field Type to Create Database Table"))
    
    Dim googleInp As ABMInput
    googleInp.Initialize(page, "tablename", ABM.INPUT_TEXT, "Enter Table Name", False, "input")
    googleInp.AutoCompleteType = ABM.AUTOCOMPLETE_GOOGLE
    myModal.Content.Cell(1,1).AddComponent(googleInp)
    
    ' ALAIN: we add our first field box. Note: we do not use AddArrayComponent here for the container
    myModal.Content.Cell(2,1).AddComponent(BuildFieldBox)
    
    ' create the grid for the footer
    ' we add a row without the default 20px padding so we need to use AddRowsM().  If we do not use this method, a scrollbar will appear to the sheet.
    myModal.Footer.AddRowsM(1,True,0,0, "").AddCellsOS(1,2,6,6,3,3,3,"modalsheet").AddCellsOS(1,4,0,0,3,3,3, "modalsheet")
    myModal.Footer.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    
    ' create the buttons for the footer
    Dim msbtn1 As ABMButton
    msbtn1.InitializeFlat(page, "msbtn1", "", "", "CREATE", "transparent")
    myModal.Footer.Cell(1,1).AddComponent(msbtn1)
    
    Dim msbtn2 As ABMButton
    msbtn2.InitializeFlat(page, "msbtn2", "", "", "CANCEL", "transparent")
    myModal.Footer.Cell(1,2).AddComponent(msbtn2)
    
    Return myModal
End Sub

' ALAIN: Building a Field box container
Sub BuildFieldBox() As ABMContainer
    Dim cont As ABMContainer
    cont.Initialize(page, "cont" & FieldIndex, "")    
    cont.AddRows(1,False, "").AddCellsOSMPV(4,-1,0,0,4,3,3,0,0,0,0,ABM.VISIBILITY_ALL, "centre")
    cont.BuildGrid
    
    ' create the input fields for the content
    ' ALAIN: For all the components in the Field box container, we add them using AddArrayCompoent.
    ' It is then easier to handle the events
    Dim inp1 As ABMInput
    inp1.Initialize(page, FieldIndex, ABM.INPUT_TEXT, "FieldName", False, "input") ' <------- Do NOT give it a name here, just an index
    inp1.Tag = FieldIndex&",1"
    inp1.PlaceHolderText = "FieldName"
    cont.Cell(1,1).AddArrayComponent(inp1, "inp") ' <------ Here we give it a name
    
    Dim fieldType As ABMCombo
    fieldType.Initialize(page, FieldIndex, "FieldType", 350, "combo")
    fieldType.Tag = FieldIndex&",2"
    fieldType.AddItem("0", "TEXT",BuildSimpleItem("0", "", "TEXT"))
    fieldType.AddItem("1", "INTEGER", BuildSimpleItem("1", "", "INTEGER"))
    fieldType.AddItem("2", "BLOB", BuildSimpleItem("2", "", "BLOB"))
    fieldType.AddItem("3", "REAL", BuildSimpleItem("3", "", "REAL"))
    cont.Cell(1,2).AddArrayComponent(fieldType, "ftype")
    
    Dim primarykey As ABMCheckbox
    primarykey.Initialize(page, FieldIndex, "Make Primary Key", False, "")
    primarykey.Tag = FieldIndex&",3"
    cont.Cell(1,3).MarginTop = "30px"
    cont.Cell(1,3).AddArrayComponent(primarykey, "chkbox")
    
    Dim btnfieldadd As ABMButton
    btnfieldadd.InitializeFloating(page, FieldIndex, "mdi-content-add", "right")
    btnfieldadd.Size = ABM.BUTTONSIZE_NORMAL
    btnfieldadd.Tag = "2,4"
    cont.cell(1,4).UseTheme("right")
    cont.Cell(1,4).AddArrayComponent(btnfieldadd, "btnfieldadd")
    
    ' ALAIN: if it is not the first one, add a Delete button
    If FieldIndex > 1 Then
        Dim btnfielddelete As ABMButton
        btnfielddelete.InitializeFloating(page, FieldIndex, "mdi-action-delete", "right")
        btnfielddelete.Size = ABM.BUTTONSIZE_NORMAL
        btnfielddelete.Tag = FieldIndex&",4"
        cont.Cell(1,4).UseTheme("right")
        cont.Cell(1,4).AddArrayComponent(btnfielddelete, "btnfielddelete")
    End If
    
    ' ALAIN: increment the FieldIndex
    FieldIndex = FieldIndex + 1
        
    Return cont
End Sub

' ALAIN:
Sub btnfieldadd_Clicked(Target As String)
    ' extract the index from the target (here target is e.g. cont1-btnfieldadd1 so we want to have 1)
    Dim index As Int = Target.IndexOf("add")
    index = Target.SubString(index + 3)
    
    Log(index)
    
    Dim myModal As ABMModalSheet = page.ModalSheet("myModal")
    
    ' remove buttons from the previous one
    Dim contPrev As ABMContainer = myModal.Content.Component("cont" & index)
    contPrev.Cell(1,4).RemoveAllComponents
    contPrev.Cell(1,4).Refresh
    
    ' add a new Field Box
    myModal.Content.Cell(2,1).AddComponent(BuildFieldBox)
    
    myModal.Refresh
End Sub
Alwaysbusy
 

walterf25

Expert
Licensed User
I can reproduce this, however can't find an explanation why this happens. The doesn't appear to be an error, it just doesn't open up.

My solution would be this: Using a container and AddArrayComponent. I've added comments to the code:
B4X:
Sub BuildModalSheet() As ABMModalSheet
    Dim myModal As ABMModalSheet
    myModal.Initialize(page, "myModal", False, ABM.MODALSHEET_TYPE_NORMAL, "mymodal")
    myModal.Content.UseTheme("mymodal")
    myModal.Footer.UseTheme("mymodal")
    myModal.Size = ABM.MODALSHEET_SIZE_NORMAL
    myModal.IsDismissible = False
   
    FieldList.Initialize
    FieldIndex = FieldIndex + 1
   
    ' create the grid for the content
    myModal.Content.AddRows(1,True, "").AddCells12(5,"centre")
    ' ALAIN: Add one row with one cell.  We will add all our Field containers in this cell
    ' this way, we do not have to add rows dynamically
    myModal.Content.AddRows(1,True, "").AddCellsOSMPV(1,0,0,0,12,12,12,0,0,0,0,ABM.VISIBILITY_ALL, "centre")   
    myModal.Content.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
   
    ' add paragraph
    myModal.Content.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page,"par1","Enter Field Name and Field Type to Create Database Table"))
   
    Dim googleInp As ABMInput
    googleInp.Initialize(page, "tablename", ABM.INPUT_TEXT, "Enter Table Name", False, "input")
    googleInp.AutoCompleteType = ABM.AUTOCOMPLETE_GOOGLE
    myModal.Content.Cell(1,1).AddComponent(googleInp)
   
    ' ALAIN: we add our first field box. Note: we do not use AddArrayComponent here for the container
    myModal.Content.Cell(2,1).AddComponent(BuildFieldBox)
   
    ' create the grid for the footer
    ' we add a row without the default 20px padding so we need to use AddRowsM().  If we do not use this method, a scrollbar will appear to the sheet.
    myModal.Footer.AddRowsM(1,True,0,0, "").AddCellsOS(1,2,6,6,3,3,3,"modalsheet").AddCellsOS(1,4,0,0,3,3,3, "modalsheet")
    myModal.Footer.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
   
    ' create the buttons for the footer
    Dim msbtn1 As ABMButton
    msbtn1.InitializeFlat(page, "msbtn1", "", "", "CREATE", "transparent")
    myModal.Footer.Cell(1,1).AddComponent(msbtn1)
   
    Dim msbtn2 As ABMButton
    msbtn2.InitializeFlat(page, "msbtn2", "", "", "CANCEL", "transparent")
    myModal.Footer.Cell(1,2).AddComponent(msbtn2)
   
    Return myModal
End Sub

' ALAIN: Building a Field box container
Sub BuildFieldBox() As ABMContainer
    Dim cont As ABMContainer
    cont.Initialize(page, "cont" & FieldIndex, "")   
    cont.AddRows(1,False, "").AddCellsOSMPV(4,-1,0,0,4,3,3,0,0,0,0,ABM.VISIBILITY_ALL, "centre")
    cont.BuildGrid
   
    ' create the input fields for the content
    ' ALAIN: For all the components in the Field box container, we add them using AddArrayCompoent.
    ' It is then easier to handle the events
    Dim inp1 As ABMInput
    inp1.Initialize(page, FieldIndex, ABM.INPUT_TEXT, "FieldName", False, "input") ' <------- Do NOT give it a name here, just an index
    inp1.Tag = FieldIndex&",1"
    inp1.PlaceHolderText = "FieldName"
    cont.Cell(1,1).AddArrayComponent(inp1, "inp") ' <------ Here we give it a name
   
    Dim fieldType As ABMCombo
    fieldType.Initialize(page, FieldIndex, "FieldType", 350, "combo")
    fieldType.Tag = FieldIndex&",2"
    fieldType.AddItem("0", "TEXT",BuildSimpleItem("0", "", "TEXT"))
    fieldType.AddItem("1", "INTEGER", BuildSimpleItem("1", "", "INTEGER"))
    fieldType.AddItem("2", "BLOB", BuildSimpleItem("2", "", "BLOB"))
    fieldType.AddItem("3", "REAL", BuildSimpleItem("3", "", "REAL"))
    cont.Cell(1,2).AddArrayComponent(fieldType, "ftype")
   
    Dim primarykey As ABMCheckbox
    primarykey.Initialize(page, FieldIndex, "Make Primary Key", False, "")
    primarykey.Tag = FieldIndex&",3"
    cont.Cell(1,3).MarginTop = "30px"
    cont.Cell(1,3).AddArrayComponent(primarykey, "chkbox")
   
    Dim btnfieldadd As ABMButton
    btnfieldadd.InitializeFloating(page, FieldIndex, "mdi-content-add", "right")
    btnfieldadd.Size = ABM.BUTTONSIZE_NORMAL
    btnfieldadd.Tag = "2,4"
    cont.cell(1,4).UseTheme("right")
    cont.Cell(1,4).AddArrayComponent(btnfieldadd, "btnfieldadd")
   
    ' ALAIN: if it is not the first one, add a Delete button
    If FieldIndex > 1 Then
        Dim btnfielddelete As ABMButton
        btnfielddelete.InitializeFloating(page, FieldIndex, "mdi-action-delete", "right")
        btnfielddelete.Size = ABM.BUTTONSIZE_NORMAL
        btnfielddelete.Tag = FieldIndex&",4"
        cont.Cell(1,4).UseTheme("right")
        cont.Cell(1,4).AddArrayComponent(btnfielddelete, "btnfielddelete")
    End If
   
    ' ALAIN: increment the FieldIndex
    FieldIndex = FieldIndex + 1
       
    Return cont
End Sub

' ALAIN:
Sub btnfieldadd_Clicked(Target As String)
    ' extract the index from the target (here target is e.g. cont1-btnfieldadd1 so we want to have 1)
    Dim index As Int = Target.IndexOf("add")
    index = Target.SubString(index + 3)
   
    Log(index)
   
    Dim myModal As ABMModalSheet = page.ModalSheet("myModal")
   
    ' remove buttons from the previous one
    Dim contPrev As ABMContainer = myModal.Content.Component("cont" & index)
    contPrev.Cell(1,4).RemoveAllComponents
    contPrev.Cell(1,4).Refresh
   
    ' add a new Field Box
    myModal.Content.Cell(2,1).AddComponent(BuildFieldBox)
   
    myModal.Refresh
End Sub
Alwaysbusy
I just tried your suggestion and it seems to work, i may need to change the way i am grabbing the way i am grabing each field's value to create the CREATE TABLE query but it is working great so far, Thanks man, you're the man.

Walter
 

walterf25

Expert
Licensed User
I can reproduce this, however can't find an explanation why this happens. The doesn't appear to be an error, it just doesn't open up.

My solution would be this: Using a container and AddArrayComponent. I've added comments to the code:
B4X:
Sub BuildModalSheet() As ABMModalSheet
    Dim myModal As ABMModalSheet
    myModal.Initialize(page, "myModal", False, ABM.MODALSHEET_TYPE_NORMAL, "mymodal")
    myModal.Content.UseTheme("mymodal")
    myModal.Footer.UseTheme("mymodal")
    myModal.Size = ABM.MODALSHEET_SIZE_NORMAL
    myModal.IsDismissible = False
   
    FieldList.Initialize
    FieldIndex = FieldIndex + 1
   
    ' create the grid for the content
    myModal.Content.AddRows(1,True, "").AddCells12(5,"centre")
    ' ALAIN: Add one row with one cell.  We will add all our Field containers in this cell
    ' this way, we do not have to add rows dynamically
    myModal.Content.AddRows(1,True, "").AddCellsOSMPV(1,0,0,0,12,12,12,0,0,0,0,ABM.VISIBILITY_ALL, "centre")   
    myModal.Content.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
   
    ' add paragraph
    myModal.Content.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page,"par1","Enter Field Name and Field Type to Create Database Table"))
   
    Dim googleInp As ABMInput
    googleInp.Initialize(page, "tablename", ABM.INPUT_TEXT, "Enter Table Name", False, "input")
    googleInp.AutoCompleteType = ABM.AUTOCOMPLETE_GOOGLE
    myModal.Content.Cell(1,1).AddComponent(googleInp)
   
    ' ALAIN: we add our first field box. Note: we do not use AddArrayComponent here for the container
    myModal.Content.Cell(2,1).AddComponent(BuildFieldBox)
   
    ' create the grid for the footer
    ' we add a row without the default 20px padding so we need to use AddRowsM().  If we do not use this method, a scrollbar will appear to the sheet.
    myModal.Footer.AddRowsM(1,True,0,0, "").AddCellsOS(1,2,6,6,3,3,3,"modalsheet").AddCellsOS(1,4,0,0,3,3,3, "modalsheet")
    myModal.Footer.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
   
    ' create the buttons for the footer
    Dim msbtn1 As ABMButton
    msbtn1.InitializeFlat(page, "msbtn1", "", "", "CREATE", "transparent")
    myModal.Footer.Cell(1,1).AddComponent(msbtn1)
   
    Dim msbtn2 As ABMButton
    msbtn2.InitializeFlat(page, "msbtn2", "", "", "CANCEL", "transparent")
    myModal.Footer.Cell(1,2).AddComponent(msbtn2)
   
    Return myModal
End Sub

' ALAIN: Building a Field box container
Sub BuildFieldBox() As ABMContainer
    Dim cont As ABMContainer
    cont.Initialize(page, "cont" & FieldIndex, "")   
    cont.AddRows(1,False, "").AddCellsOSMPV(4,-1,0,0,4,3,3,0,0,0,0,ABM.VISIBILITY_ALL, "centre")
    cont.BuildGrid
   
    ' create the input fields for the content
    ' ALAIN: For all the components in the Field box container, we add them using AddArrayCompoent.
    ' It is then easier to handle the events
    Dim inp1 As ABMInput
    inp1.Initialize(page, FieldIndex, ABM.INPUT_TEXT, "FieldName", False, "input") ' <------- Do NOT give it a name here, just an index
    inp1.Tag = FieldIndex&",1"
    inp1.PlaceHolderText = "FieldName"
    cont.Cell(1,1).AddArrayComponent(inp1, "inp") ' <------ Here we give it a name
   
    Dim fieldType As ABMCombo
    fieldType.Initialize(page, FieldIndex, "FieldType", 350, "combo")
    fieldType.Tag = FieldIndex&",2"
    fieldType.AddItem("0", "TEXT",BuildSimpleItem("0", "", "TEXT"))
    fieldType.AddItem("1", "INTEGER", BuildSimpleItem("1", "", "INTEGER"))
    fieldType.AddItem("2", "BLOB", BuildSimpleItem("2", "", "BLOB"))
    fieldType.AddItem("3", "REAL", BuildSimpleItem("3", "", "REAL"))
    cont.Cell(1,2).AddArrayComponent(fieldType, "ftype")
   
    Dim primarykey As ABMCheckbox
    primarykey.Initialize(page, FieldIndex, "Make Primary Key", False, "")
    primarykey.Tag = FieldIndex&",3"
    cont.Cell(1,3).MarginTop = "30px"
    cont.Cell(1,3).AddArrayComponent(primarykey, "chkbox")
   
    Dim btnfieldadd As ABMButton
    btnfieldadd.InitializeFloating(page, FieldIndex, "mdi-content-add", "right")
    btnfieldadd.Size = ABM.BUTTONSIZE_NORMAL
    btnfieldadd.Tag = "2,4"
    cont.cell(1,4).UseTheme("right")
    cont.Cell(1,4).AddArrayComponent(btnfieldadd, "btnfieldadd")
   
    ' ALAIN: if it is not the first one, add a Delete button
    If FieldIndex > 1 Then
        Dim btnfielddelete As ABMButton
        btnfielddelete.InitializeFloating(page, FieldIndex, "mdi-action-delete", "right")
        btnfielddelete.Size = ABM.BUTTONSIZE_NORMAL
        btnfielddelete.Tag = FieldIndex&",4"
        cont.Cell(1,4).UseTheme("right")
        cont.Cell(1,4).AddArrayComponent(btnfielddelete, "btnfielddelete")
    End If
   
    ' ALAIN: increment the FieldIndex
    FieldIndex = FieldIndex + 1
       
    Return cont
End Sub

' ALAIN:
Sub btnfieldadd_Clicked(Target As String)
    ' extract the index from the target (here target is e.g. cont1-btnfieldadd1 so we want to have 1)
    Dim index As Int = Target.IndexOf("add")
    index = Target.SubString(index + 3)
   
    Log(index)
   
    Dim myModal As ABMModalSheet = page.ModalSheet("myModal")
   
    ' remove buttons from the previous one
    Dim contPrev As ABMContainer = myModal.Content.Component("cont" & index)
    contPrev.Cell(1,4).RemoveAllComponents
    contPrev.Cell(1,4).Refresh
   
    ' add a new Field Box
    myModal.Content.Cell(2,1).AddComponent(BuildFieldBox)
   
    myModal.Refresh
End Sub
Alwaysbusy
Based on your changes to this code, how would i remove the previous row along with the components if I were to press on the Delete button to delete the previous row, this is how I was doing it before, but since things changed now, how would I go about doing the same based on the new code?
delete previous fields:
Sub btnfielddelete_Clicked(Target As String)
    Log("btnfielddelete target: " & Target)
    Dim myModal As ABMModalSheet = page.ModalSheet("myModal")
    Dim btn As ABMButton = myModal.Content.Component("btnfielddelete")
    '''Log("button delete tag: " & btn.Tag)
    Dim tag() As String = Regex.Split(",", btn.Tag)
    Dim tagrow As Int = tag(0)
    fieldindex = fieldindex - 1
'''    myModal.Content.Cell(tag(0), tag(1)).RemoveComponent("btnfielddelete")
    myModal.Content.Row(tag(0)).RemoveAllComponents

    Dim btnfieldadd As ABMButton
    btnfieldadd.InitializeFloating(page, "btnfieldadd", "mdi-content-add", "right")
    btnfieldadd.Size = ABM.BUTTONSIZE_NORMAL
    btnfieldadd.Tag = fieldindex&",4"
    myModal.Content.Cell(fieldindex,4).UseTheme("right")
    myModal.Content.Cell(fieldindex,4).AddComponent(btnfieldadd)
    '''Log("adding ABMButton at cell: " & fieldindex&","&3)
    
    '''Log("fieldindex: " & fieldindex)
    If fieldindex > 2 Then
        Dim primarykey As ABMCheckbox
        primarykey.Initialize(page, "chkbox1"&fieldindex, "Make Primary Key", False, "")
        primarykey.Tag = fieldindex&",3"
        myModal.Content.Cell(fieldindex,3).MarginTop = "30px"
        myModal.Content.Cell(fieldindex,3).AddComponent(primarykey)
    Dim btnfielddelete As ABMButton
    btnfielddelete.InitializeFloating(page, "btnfielddelete", "mdi-action-delete", "right")
    btnfielddelete.Size = ABM.BUTTONSIZE_NORMAL
    btnfielddelete.Tag = fieldindex&",4"
    myModal.Content.Cell(fieldindex,4).UseTheme("right")
    myModal.Content.Cell(fieldindex,4).AddComponent(btnfielddelete)
    End If
    
    myModal.Refresh
    
End Sub
Walter
 
Top