Dynamic Page Generation

How-to Discussions
1

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>
2

Hey.

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

3

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>
4

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}"/>
5

Hey,

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

6

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.

7

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