# horizontal scrollable page indicator

**URL:** <https://forums.fusetools.com/t/horizontal-scrollable-page-indicator/4047>\
**Category:** How-to Discussions\
**Created:** [May 30, 2017, 10:29am UTC](https://forums.fusetools.com/t/horizontal-scrollable-page-indicator/4047 "2017-05-30T10:29:45Z")\
**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:** [May 30, 2017, 10:29am UTC](https://forums.fusetools.com/t/horizontal-scrollable-page-indicator/4047/1 "2017-05-30T10:29:45Z")

</div>

Hi guys, i’m struggling with building a horizontal scrollable page indicator, i dont get how can i specify a layoutMaster if my pages are observables and how can i make my horizontal scrollview scroll while i’m navigating.

```auto
<App>
	<ClientPanel Color="#64b5f6">
		<JavaScript>
		var Observable = require("FuseJS/Observable");
		var pages = Observable({"name":"page1", "title":"Annexes", "highlight":"#34495e"}, {"name":"page2", "title":"Travaux", "highlight":"#32595e"}, {"name":"page3", "title":"Rating", "highlight":"#37775f"}, {"name":"page4", "title":"CheckList", "highlight":"#34d6ee"}, {"name":"page5", "title":"CheckListBis", "highlight":"#34495e"}, {"name":"page6", "title":"CheckListBis", "highlight":"#39995e"}, {"name":"page7", "title":"CheckListBis", "highlight":"#34495e"})

	module.exports = {
		pages: pages,
		pageCount: pages.length
	}
		</JavaScript>

		<Page ux:Class="MyPage">
				<ResourceFloat4 Key="Highlight" Value="{highlight}" />
				<Rectangle Color="{highlight}" />
		</Page>

		<Grid Rows="1*,10*">
			<Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4">
				<string ux:Property="Text" />
				<Text Value="{ReadProperty Text}" Color="#FFF" Font="Bold" Alignment="Center" />
			</Panel>

			<!-- <Rectangle ux:Name="indicator" LayoutMaster="{ReadProperty }" Alignment="Bottom" Height="4" Color="#6c7a89">
				<LayoutAnimation>
						<Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
				</LayoutAnimation>
		</Rectangle> -->

<Panel>
	<ScrollView AllowedScrollDirections="Horizontal">
		<StackPanel Orientation="Horizontal" Margin="30,0,0,0" ItemSpacing="40">
			<Each Items="{pages}">
				<Panel ux:Name="{name}">
					<Tab Text="{name}"/>
				</Panel>
			</Each>
		</StackPanel>
	</ScrollView>
</Panel>

			<PageControl ux:Name="pages">
				<Each Items="{pages}">
					<MyPage/>
				</Each>
		</PageControl>
		</Grid>
	</ClientPanel>
</App>

```

---

<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:** [May 30, 2017, 4:14pm UTC](https://forums.fusetools.com/t/horizontal-scrollable-page-indicator/4047/2 "2017-05-30T16:14:40Z")

</div>

Hi prince,

you should make use of the [PageIndicator](https://www.fusetools.com/docs/fuse/controls/pageindicator) class, which is specifically made for this purpose. The docs are pretty clear and several examples on Fuse website use it, too.

Here’s your snippet, cleaned up and refactored to do what you asked for (in one particular way at least):

```auto
<App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");
    var pages = Observable({"name":"page1", "title":"Annexes", "highlight":"#34495e"}, {"name":"page2", "title":"Travaux", "highlight":"#32595e"}, {"name":"page3", "title":"Rating", "highlight":"#37775f"}, {"name":"page4", "title":"CheckList", "highlight":"#34d6ee"}, {"name":"page5", "title":"CheckListBis", "highlight":"#34495e"}, {"name":"page6", "title":"CheckListBis", "highlight":"#39995e"}, {"name":"page7", "title":"CheckListBis", "highlight":"#34495e"})

    module.exports = {
        pages: pages,
        pageCount: pages.length
    }
    </JavaScript>

    <Page ux:Class="MyPage">
        <ResourceFloat4 Key="Highlight" Value="{highlight}" />
        <string ux:Property="Title" />
        <Rectangle Color="{highlight}" />
    </Page>

    <Panel ux:Class="Tab">
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#FFF" Font="Bold" Alignment="Center" />
    </Panel>

    <ClientPanel Color="#64b5f6">

        <Panel Dock="Top" Height="56">
            <ScrollView AllowedScrollDirections="Horizontal">
                <PageIndicator Navigation="pages">
                    <StackLayout Orientation="Horizontal" />
                    <DockPanel ux:Template="Dot" Width="80" HitTestMode="LocalBounds">
                        <ActivatingAnimation>
                            <Change indicator.Opacity="1" />
                        </ActivatingAnimation>
                        <Rectangle ux:Name="indicator" Dock="Bottom" Height="4" Color="#6c7a89" Opacity="0" />
                        <Tab Text="{Page Title}" />
                        <Clicked>
                            <NavigateTo Target="{Page Visual}" />
                        </Clicked>
                    </DockPanel>
                </PageIndicator>
            </ScrollView>
        </Panel>

        <PageControl ux:Name="pages">
            <Each Items="{pages}">
                <MyPage Title="{name}" />
            </Each>
        </PageControl>

    </ClientPanel>
</App>

```