B4J Question [BANano] [SOLVED] How to GetHTML of the complete structure when using LoadLayoutArray

[Mashiane]

Ola

I need help with my layout. I am attemption to load multiple layouts with loadlayoutarray which I will later customize. I intend to place each button in a nav bar. I however need to .GetHTML of the complete structure loaded in the placeholder.

This is the complete structure below. I am loading everything to a placeholder..

This is the code I am using...

Sub AddButton(Module As Object, parentID As String, btnID As String, btnLabel As String, btnRaised As Boolean, btnIcon As String, iconColor As String, btnTooltip As String, btnBadge As String, badgeColor As String) As VBtn
    parentID = parentID.tolowercase
    btnID = btnID.tolowercase
    '
    'get the parent
    Dim Ret As Long
    Dim AllViews As Map
   
    'load button icon and clear the placeholder
    Ret = BANano.LoadLayoutArray("#placeholder", "buttonicon", True)
    ' ret returns a unique number you can use to get all views
    AllViews = BANano.GetAllViewsFromLayoutArray(Module, "buttonicon", Ret)
    'get the tooltip title
    Dim buttontooltiptitle As VDiv = AllViews.Get("buttontooltiptitle")
    buttontooltiptitle.SetCaption(btnTooltip)
    'get the badge
    Dim buttonbadge As VBadge = AllViews.Get("buttonbadge")
    buttonbadge.SetContent(btnBadge)
    buttonbadge.SetColor(badgeColor)
    'get the button
    Dim button As VBtn = AllViews.get("button")
    If btnRaised = False Then button.SetText(True)
    button.SetOnClickE(btnID)
    button.SetOnClick
    'get the button label
    Dim buttontitle As VDiv = AllViews.Get("buttontitle")
    buttontitle.SetCaption(btnLabel)
    'get the icon
    Dim buttonicon As VIcon = AllViews.get("buttonicon")
    buttonicon.SetCaption(btnIcon)
    buttonicon.SetColor(iconColor)
    '
    Dim strx As String = MyApp.BANanoGetHTML("#placeholder")
    Log(strx)
   
    MyApp.BANanoEmpty("#placeholder")
   
    'MyApp.BANanoGetHTML1("#placeholder", parentID)
    'return the button
    Return button
End Sub

This is what be being returned which is the outermost element.

<v-tooltip id="buttontooltip_1"><template id="tooltiptemplate_1" v-slot:activator="{ on, attrs }"></template></v-tooltip>

I have attached my sample project.

Thank you.

 

[alwaysbusy]

It has to do with how Vue works. It uses document-fragments (which are nodes, not elements), and nodes do not have an innerHTML.
So when it comes to asking the innerHTML of <template>, the result is empty.

I suppose Vue was never meant to be used like this to get the end result HTML by design.
My guess is they use this to protect you from an XSS attack with innerHTML: malicious code would get injected into your site and then execute. This is possible because innerHTML renders complete markup and not just text.

Alwaysbusy

 

[Mashiane]

Thanks, I used the SKRow to design the same layout and everything was returned complete. I will have to find a way to bypass using the <template> tag for my purposes.

I also found this, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template. It seems its a javascript element and not only a Vue only.

Ta!

 

[alwaysbusy]

Idd, this is a general mechanism, just wanted to point out that vue uses this. something we have to be aware of that this does exist