Bottom bar buttons not responding

How-to Discussions
1

So, I borrowed this bottom bar from another example and modified it to fit my app. The problem is, the four buttons on the bar don’t actually work, and I am not sure why. I would guess because Components don’t actually run the javascript code that I have put in. What other options do I have?

Here is the Component

<JavaScript>
	var Observable = require("FuseJS/Observable");
	var Backend = require("Modules/Backend");

	var profile = Backend.profile.value;
	var profileRole = Observable(profile.role);

	function bottomProfile() {
		var profilePage = Observable(profileRole.value + "Profile")
		router.push(profilePage.value);
	}

	function bottomSearch() {
		console.log("Search Pressed");
		router.push("search");
	}

	function bottomNotifications() {
		router.push("notifications");
	}

	function bottomNews() {
		router.push("news");
	}

	module.exports = {
		bottomProfile: bottomProfile,
		bottomSearch: bottomSearch,
		bottomNotifications: bottomNotifications,
		bottomNews: bottomNews,
	}
</JavaScript>

<Rectangle ux:Class="Divider" Width="1" Color="#fff7" Margin="0,12" />

<Container ux:Class="IconAndLabel" Subtree="iconContainer">
	<string ux:Property="Text" />
	
	<DockPanel ux:Binding="Children" Height="56" Padding="0,7">
		<Panel ux:Name="iconContainer" Alignment="Center" />
		<BaseText Dock="Bottom" Color="#aaa" Alignment="HorizontalCenter" FontSize="8" Value="{ReadProperty Text}" />

		<WhilePressed>
			<Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
		</WhilePressed>
	</DockPanel>
</Container>

<IconAndLabel Text="PROFILE" Clicked="{bottomProfile}">
	<ProfileIcon />
</IconAndLabel>

<Divider />

<IconAndLabel Text="NOTIFICATIONS" Clicked="{bottomNotifications}" >
	<NotificationsIcon />
</IconAndLabel>

<Divider />

<IconAndLabel Text="SEARCH" Clicked="{bottomSearch}">
	<SearchIcon />
</IconAndLabel>

<Divider />

<IconAndLabel Text="NEWS" Clicked="{bottomNews}">
	<NewsIcon />
</IconAndLabel>

<Rectangle Layer="Background" Color="#003366" />

And here is an example of it being used in the app.

<Page ux:Class="PlayerProfile">
<Router ux:Dependency="router" />

<JavaScript File="PlayerProfile.js" />

<DockPanel ClipToBounds="true">

	

	<ScrollView>

		<StackPanel Width="92%" Padding="20">

			<Text Alignment="HorizontalCenter" FontSize="40" Margin="0,10,0,30">Profile</Text>
		
			<Text Alignment="Center" Value="{name}" Margin="0,0,0,30"/>

			<Text Alignment="Center" Value="Membership Level: {membership}" Margin="0,0,0,30"/>

			<Text Alignment="Center" Value="{info}" Margin="0,0,0,0" TextWrapping="Wrap"/>

		</StackPanel>

	</ScrollView>

	<CBL.BottomBar Dock="Bottom" />
</DockPanel>

<Activated Handler="{viewLoaded}" />
2

I realized my problem, I was just missing

<Router ux:Dependency=“router” />

in my component, and assigning it on the pages I use it. Fixed.

1 Like