Navigate from Sidebar

[Kannan]

Hi,

How to navigate from sperate Sidebar.ux

thanks.

[Bjorn-Olav_Strand]

You need to use Observables for now like this:

TabBarNavigation.ux:

<App Background="#333">
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var active_page = Observable('page1');
        function set_page_1 () {
            debug_log("setpage1");
            active_page.value = 'page1';
        }
        function set_page_2 () {
            debug_log("setpage2");
            active_page.value = 'page2';
        }
        function set_page_3 () {
            debug_log("setpage3");
            active_page.value = 'page3';
        }
        function set_page_4 () {
            debug_log("setpage4");
            active_page.value = 'page4';
        }

        module.exports = {
            active_page: active_page,
            set_page_1: set_page_1,
            set_page_2: set_page_2,
            set_page_3: set_page_3,
            set_page_4: set_page_4,
        }
    </JavaScript>
    <DockPanel>
        <iOS.StatusBarConfig Style="Light" />
        <StatusBarBackground Dock="Top"/>
        <BottomBarBackground Dock="Bottom"/>
        <PageControl ux:Name="pages" Active="{active_page}">
            <Page ux:Name="page1" Background="#34495e">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
            </Page>
            <Page ux:Name="page2" Background="#3498db">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
            </Page>
            <Page ux:Name="page3" Background="#aa3377">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
            </Page>
            <Page ux:Name="page4" Background="#88cc22">
                <Image File="Assets/fuse-logo.png" StretchDirection="DownOnly" />
            </Page>
        </PageControl>
    <NavGrid Dock="Bottom"/>

    </DockPanel>
</App>

NavGrid.ux:

        <Grid ColumnData="1,1,1,1" Height="45">
            <Style>
                <Image Padding="7" />
            </Style>
            <Panel Background="#34495e">
                <Image ux:Name="tabBarImage1" File="Assets/icon-hexagon.png" />
                <Clicked>
                    <Callback Handler="{set_page_1}" />
                </Clicked>
            </Panel>
            <Panel Background="#3498db">
                <Image ux:Name="tabBarImage2" File="Assets/icon-star.png" />
                <Clicked>
                    <Callback Handler="{set_page_2}" />
                </Clicked>
            </Panel>
            <Panel Background="#aa3377">
                <Image ux:Name="tabBarImage3" File="Assets/icon-square.png" />
                <Clicked>
                    <Callback Handler="{set_page_3}" />
                </Clicked>
            </Panel>
            <Panel Background="#88cc22">
                <Image ux:Name="tabBarImage4" File="Assets/icon-triangle.png" />
                <Clicked>
                    <Callback Handler="{set_page_4}" />
                </Clicked>
            </Panel>
        </Grid>

[Kannan]

Hi,

https://drive.google.com/open?id=0B1U0ByQZk0fjalNBM2RnNXNhdlU

The Above link is my project…

When You click in logout button from sidebar, you need to go login page…

How can i do for that?

[Bjorn-Olav_Strand]

diff --git a/MainView.js b/MainView.js
index c1e6c17..972ff1a 100644
--- a/MainView.js
+++ b/MainView.js
@@ -1,8 +1,14 @@
 var Observable = require('FuseJS/Observable');
-
     function Login(){
         console.log("Clicked");
+        active_nav.value = "Dashboard";
     }
+    function Logout() {
+        active_nav.value="Login";
+    }
+    var active_nav = Observable('Login')
 module.exports = {
-
+    Login: Login,
+    Logout: Logout,
+    active_nav: active_nav
 };
\ No newline at end of file
diff --git a/MainView.ux b/MainView.ux
index d8749af..40d1f94 100644
--- a/MainView.ux
+++ b/MainView.ux
@@ -38,7 +38,7 @@
                 </Button>
             </Style>


       &lt;HierarchicalNavigation ux:Name=&quot;nav&quot; Duration=&quot;0.5&quot; Easing=&quot;CubicInOut&quot; /&gt;





       &lt;HierarchicalNavigation ux:Name=&quot;nav&quot; Duration=&quot;0.5&quot; Easing=&quot;CubicInOut&quot; Active=&quot;{active_nav}&quot; /&gt;

       &lt;!-- Login Page --&gt;
       &lt;Page ux:Name=&quot;Login&quot; Width=&quot;100%&quot; Margin=&quot;30,0,30,0&quot; Alignment=&quot;Center&quot;&gt;



@@ -48,11 +48,7 @@

<TextInput ux:Name="Username" Value=""></TextInput>

<Text Value="Password" />

<TextInput ux:Name="Password" IsPassword="true" />


               &lt;Button Text=&quot;Login&quot; Alignment=&quot;Center&quot;&gt;



                   &lt;Clicked&gt;



                       &lt;NavigateTo Context=&quot;nav&quot; Target=&quot;Dashboard&quot; /&gt;



                   &lt;/Clicked&gt;



               &lt;/Button&gt;





               &lt;Button Text=&quot;Login&quot; Alignment=&quot;Center&quot; Clicked=&quot;{Login}&quot; /&gt;
           &lt;/StackPanel&gt;
       &lt;/Page&gt;



diff --git a/Sidebar.ux b/Sidebar.ux

index f7b5dd4…70dbd95 100644

— a/Sidebar.ux

+++ b/Sidebar.ux

@@ -66,11 +66,7 @@

</Grid>

<StackPanel Margin="0,50,0,0">

<StackPanel ux:Name="logout">


       &lt;Button Text=&quot;Logout&quot; Alignment=&quot;Center&quot;&gt;



           &lt;Clicked&gt;



               &lt;!--NavigateTo Context=&quot;nav&quot; Target=&quot;Login&quot; /--&gt;



           &lt;/Clicked&gt;



       &lt;/Button&gt;





       &lt;Button Text=&quot;Logout&quot; Alignment=&quot;Center&quot; Clicked=&quot;{Logout}&quot; /&gt;
   &lt;/StackPanel&gt;

</StackPanel>

</StackPanel>

[Kannan]

Thanks Dude.

[team]

Thanks a lot.