Dynamic Page Generation

Is there a way to dynamically create pages for a Router or PageControl? I tried the following but didn’t work:

JS

let tabs = [
    {
        "id": "0",
	    "title": "Agenda",
        "page_name":"page1"
    },
    {
        "id": "1",
	    "image_local": "person.png",
        "page_name":"page2"
    },
    {
        "id": "2",
	    "image_local": "user_icon.png",
        "page_name":"page3"
    }
]

module.exports = {
    tabs: tabs
}

UX

    <PageControl ux:Name="pageControl">
        <Each Items="{tabs}">
            <Panel ux:Name="{page_name}">
            </Panel>
        </Each>
    </PageControl>

Hey.

This code should work. Do you see some error message? Try to put some content in page, so you could see result.

Oops. You’re right Arturs, that does work. Looks like the triggering elements aren’t actually working. The below doesn’t change the pages:

UX

    <Panel>
        <Image ux:Name="icon" File="../Assets/Graphics/dv_icon.png" Width="60" Height="60" Margin="10" Alignment="Top"/>
        <ScrollView Margin="0,60,0,0">
             <StackPanel>
                  <Each Items="{tabs}">
                      <TabItem pageControl="pageControl"/>
                  </Each>
              </StackPanel>
         </ScrollView>
    </Panel>

Convenience class

    <DockPanel ux:Class="TabItem" Height="60" Margin="10">
        <PageControl ux:Dependency="pageControl"/>
        <Text Value="{title}" TextAlignment="Center" Alignment="Center" />
        <Image File="Assets/Graphics/{image_local}" Height="30" Width="30" Alignment="Left" Margin="10,0,0,0"/>
        <Clicked>
            <Set pageControl.Active = "{id}"/>
        </Clicked>
    </DockPanel>

Well, I’ve made a lot of attempts at this, but as far as I can tell, a Navigator or PageControl created dynamically based on data can’t be triggered to have any of these pages pushed.

So something like this:

    // js
    let tabs = [
        {"page_name":"page1"}, {"page_name":"page2"}
    ]
    module.exports = { tabs }
    // ux
    <Router ux:Name="router" />
    <PageControl>
        <Each Items="{tabs}">
            <Panel ux:Name="{page_name}">
            </Panel>
        </Each>
    </PageControl>

Doesn’t respond to calls like:

    // js
    module.exports = {
        gotoPage: function() {router.push("page1")}
    }   
    // ux
    <Button Text="Test" Clicked="{gotoPage}"/>

Hey,

In your Each change ux:Name="{page_name}" to Name="{page_name}".

Thanks! That worked. Not sure I understand the difference between the two identifiers, but same question was asked at Triggers "BringToview/Scroll To" not works correctly with dynamic name target.

@Jalakoo see my reply about Name and ux:Name differences :wink: