B4J Question [WebApp] How to add dynamic <li> and <div> [Solved]

[Chris Guanzon]

Hello, how can I add a dynamic <li>inside <ul> and <div> inside another <div>? So far this is my code.

For Each colroot As String In root
    colroot = $"${colroot.SubString2(0, 1).ToUpperCase}${colroot.SubString2(1, colroot.Length)}"$

    ultelco.SetHtml( _
        $"<li class="nav-item">
            <a class="nav-link" href="#"${colroot}" data-toggle="tab" class="text-center">${colroot}</a>
        </li>"$)
Next

It display only 1 item.

 

[DonManfred]

It display only 1 item.

You are replacing the html on each iteration.

ultelco.SetHtml should be called ONCE after the loop. You need to build the html you want to add in the loop.

Tip: Learn HTML-Basics.

 

[Chris Guanzon]

Aou are replacing the html on each iteration.

ultelco.SetHtml should be called ONCE after the loop. You need to build the html you want to add in the loop.

Tip: Learn HTML-Basics.

I solved my own problem. I used a string variable and add everything in that string then set the HTML in my <ul> using setHTML.

Dim s As String
For Each colroot As String In root
    colroot = $"${colroot.SubString2(0, 1).ToUpperCase}${colroot.SubString2(1, colroot.Length)}"$

    s = s & $"<li class="nav-item">
        <a class="nav-link" href="#"${colroot} data-toggle="tab" class="text-center">${colroot}</a>
    </li>"$
Next

ultelco.SetHtml(s)

 

[udg]

Have a look at StringBuilder in order to progressively create your final string more efficiently.

 

[TILogistic]

This is just an example of how to create html templates.

Private Sub Button1_Click
    Dim mRoot As List = Array As String("1A", "2B", "3C", "4D", "5E")
    Dim sb As StringBuilder
    sb.Initialize

    For Each colroot As String In mRoot
        sb.Append(CreateListHtml(colroot))
    Next

    WebView1.LoadHtml(sb.ToString)
End Sub

Public Sub CreateListHtml (v As String) As String
    Dim Data As String = $"${v.SubString2(0, 1).ToUpperCase} (${v.SubString2(1, v.Length)})"$
    Return $"<li class="nav-item"><a class="nav-link" href="#"${Data} data-toggle="tab" class="text-center">${Data}</a></li>"$
End Sub