# Dynamic pages in Navigator

**URL:** <https://forums.fusetools.com/t/dynamic-pages-in-navigator/5973>\
**Category:** How-to Discussions\
**Created:** [June 19, 2017, 9:23am UTC](https://forums.fusetools.com/t/dynamic-pages-in-navigator/5973 "2017-06-19T09:23:48Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![prince](https://avatars.discourse-cdn.com/v4/letter/p/ba9def/32.png) [@prince](https://forums.fusetools.com/u/prince)\
**Post date:** [June 19, 2017, 9:23am UTC](https://forums.fusetools.com/t/dynamic-pages-in-navigator/5973/1 "2017-06-19T09:23:48Z")

</div>

Hi guys, i’m facing an issue while trying to have dynamic pages in my navigator.

```auto
        <Navigator Transition="Default" >
          <Each Items="{stepDtoList}">
            <Match Value="{typeEnum}">
              <Case String="FROM">
              <StepDTOListFrom ux:Template="StepDTOListFrom" router="router" checkStepListFrom="{checkStepList}"/>
              </Case>

              <Case String="TO">
                <StepDTOListTO ux:Template="StepDTOListTO" router="router" checkStepListTo="{checkStepList}"/>
              </Case>
            </Match>
          </Each>
        </Navigator>

```

both of my pages look pretty much the same,  
this is my StepDTOListTo page:

```auto
<DockPanel ux:Class="StepDTOListTO">
  <!-- <Rectangle Layer="Background" Color="White"/> -->
  <object ux:Property="checkStepListTo"/>
  <Router ux:Dependency="router" />
  <StackPanel Padding="0,315,0,0">
      <Panel Margin="20,0,0,0" Height="56">
        <ScrollView AllowedScrollDirections="Horizontal">
            <PageIndicator Navigation="PageControlRealiser">
                <StackLayout Orientation="Horizontal" />
                <DockPanel ux:Template="Dot" Margin="10,0,10,0" HitTestMode="LocalBounds">
                    <ActivatingAnimation>
                        <Change indicator.Opacity="1" />
                        <BringIntoView TargetNode="{Page Title}" />
                    </ActivatingAnimation>
                    <Rectangle ux:Name="indicator" Dock="Bottom" Height="3" CornerRadius="10" Color="#65B8FE" Opacity="0" />
                    <Tab Text="{Page Title}" />
                </DockPanel>
            </PageIndicator>
        </ScrollView>
    </Panel>

  <PageControl ux:Name="PageControlRealiser" Interaction="None" Margin="0,20,0,10" Padding="0,0,0,20" >
          <Each Items="{Property this.checkStepListTo}">
            <MyPage ux:Name="{type}" Title="{type}">
              <Match Value="{type}">
                  <Case String="IDENTITY">
                    <ValiderID/>
                  </Case>
                  <Case String="DISCLAIMER">
                    <Annexes/>
                  </Case>
                  <Case String="ORDER_OF_REPAIR">
                    <Travaux/>
                  </Case>
                  <Case String="RENTAL_CONTRACT">

                  </Case>
                  <Case String="DRIVER_EVALUATION">
                    <DriverEvalutaiton/>
                  </Case>
                  <Case String="DRIVING_LICENCE">
                    <ScanPermis/>
                  </Case>
                  <Case String="CHECK_LIST_CLIENT">
                    <CheckListClient/>
                  </Case>
                  <Case String="STATE_CAR">
                    <EtatDeslieux/>
                  </Case>
                  <Case String="INVOICE">
                    <Facture/>
                  </Case>
                  <Case String="Paiement">
                    <Paiement/>
                  </Case>
                  <Case String="CONCESSION_DOC_VALIDATION">

                  </Case>
                  <Case String="CUSTOMER_DOC_VALIDATION">

                  </Case>
                  <Case String="SIGNATURE">
                    <SignaturePad/>
                  </Case>
                </Match>
            </MyPage>
          </Each>
  </PageControl>
  </StackPanel>

</DockPanel>

```

and this is my StepDTOListFrom page.

```auto
<DockPanel ux:Class="StepDTOListFrom">
  <!-- <Rectangle Layer="Background" Color="White"/> -->
  <object ux:Property="checkStepListFrom"/>
  <Router ux:Dependency="router" />
  <StackPanel Padding="0,315,0,0">
      <Panel Margin="20,0,0,0" Height="56">
        <ScrollView AllowedScrollDirections="Horizontal">
            <PageIndicator Navigation="PageControlRealiser">
                <StackLayout Orientation="Horizontal" />
                <DockPanel ux:Template="Dot" Margin="10,0,10,0" HitTestMode="LocalBounds">
                    <ActivatingAnimation>
                        <Change indicator.Opacity="1" />
                        <BringIntoView TargetNode="{Page Title}" />
                    </ActivatingAnimation>
                    <Rectangle ux:Name="indicator" Dock="Bottom" Height="3" CornerRadius="10" Color="#65B8FE" Opacity="0" />
                    <Tab Text="{Page Title}" />
                </DockPanel>
            </PageIndicator>
        </ScrollView>
    </Panel>

  <PageControl ux:Name="PageControlRealiser" Interaction="None" Margin="0,20,0,10" Padding="0,0,0,20" >
          <Each Items="{Property this.checkStepListFrom}">
            <MyPage ux:Name="{type}" Title="{type}">
              <Match Value="{type}">
                  <Case String="IDENTITY">
                    <ValiderID/>
                  </Case>
                  <Case String="DISCLAIMER">
                    <Annexes/>
                  </Case>
                  <Case String="ORDER_OF_REPAIR">
                    <Travaux/>
                  </Case>
                  <Case String="RENTAL_CONTRACT">

                  </Case>
                  <Case String="DRIVER_EVALUATION">
                    <DriverEvalutaiton/>
                  </Case>
                  <Case String="DRIVING_LICENCE">
                    <ScanPermis/>
                  </Case>
                  <Case String="CHECK_LIST_CLIENT">
                    <CheckListClient/>
                  </Case>
                  <Case String="STATE_CAR">
                    <EtatDeslieux/>
                  </Case>
                  <Case String="INVOICE">
                    <Facture/>
                  </Case>
                  <Case String="Paiement">
                    <Paiement/>
                  </Case>
                  <Case String="CONCESSION_DOC_VALIDATION">

                  </Case>
                  <Case String="CUSTOMER_DOC_VALIDATION">

                  </Case>
                  <Case String="SIGNATURE">
                    <SignaturePad/>
                  </Case>
                </Match>
            </MyPage>
          </Each>
  </PageControl>
  </StackPanel>
</DockPanel>

```

the result is that both of my pages are available at the same time , and can be clicked both.

> **[Screenshot](https://prnt.sc/flhrxj)**
>
> Captured with Lightshot

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [June 22, 2017, 1:59pm UTC](https://forums.fusetools.com/t/dynamic-pages-in-navigator/5973/2 "2017-06-22T13:59:46Z")

</div>

Hi prince,

something like this usually happens when you mess up `Transitions`. In you case though, I think it’s the use of `Match` and `Case` - I suggest you look into using [MatchKey](https://www.fusetools.com/docs/fuse/reactive/each#example-1) instead.

Somewhat unrelated, but still - instead of trying to figure this out with the complex nested pages you have, have your tried making it work with simple `Panel`s first?