Hi everyone!
I am trying to use the px-app-nav component but when I click on each button, I don't see any change in page.. this is the code I am using:
<px-app-route
route="{{route}}"
update-nav-route
nav-route="{{navRoute}}">
</px-app-route>
<px-app-nav id="nav"
items="{{navItems}}"
selected-route="{{navRoute}}">
</px-app-nav>
<script>
(function(document) {
'use strict';
window.addEventListener('WebComponentsReady', function() {
console.log("Web Components Ready!");
var nav = document.getElementById('nav');
var navItems = [
{ "id" : "base", "label" : "Base","icon" : "px-fea:home", path: '/base' },
{ "id" : "adjustment_input", "label" : "Home","icon" : "px-fea:alerts", path: '/adjustment_input' },
{ "id" : "explore", "label" : "Explore","icon" : "px-fea:alerts" , path: '/explore' }
];
nav.items = navItems;
nav.selected = navItems[0];
});
})(document);
</script>
Am I missing some components?? px-view or what else should I be adding?? I don't see any errors in either cf -logs nor looking through the developer tool in chrome. I've also tried using the px-sample-app configuration and I just had a blank page but no errors.
thank you! I implemented your suggestions, however, when I upload the corrected app to predix, it doesnt load correctly (attached picture). I tried seeing if the new code would work on codepen (only the labels were different from what you suggested) and it did! so I dont know why its not working correctly on predix platform :s the only thing that is missing is the different nav items..
Also, the corrected code is as follows:
<script>
(function(document) {
'use strict';
window.addEventListener('load', function() {
console.log("Web Components Ready!");
var app = document.getElementById('app');
app.navItems = [
{ "id" : "base", "label" : "Base","icon" : "px-fea:home", path: '/base' },
{ "id" : "adjustment_input", "label" : "AdjustmentInput","icon" : "px-fea:alerts", path: '/adjustment_input' },
{ "id" : "trial", "label" : "Trial","icon" : "px-fea:alerts" , path: '/trial' }
];
app.selectedNavItem = app.navItems[0];
});
})(document);
</script>
</head>
<body>
<dom-bind id="app">
<template>
<px-branding-bar
application-title="IEC adjustments">
</px-branding-bar>
<px-app-route
route="{{route}}"
update-nav-route
nav-route="{{navRoute}}">
</px-app-route>
<px-app-nav id="nav"
items="{{navItems}}"
selected-route="{{navRoute}}"
selected="{{selectedNavItem}}">
</px-app-nav>
<iron-pages selected="[[selectedNavItem.label]]" attr-for-selected="name">
<!--<base-view route="{{route}}" name="base"></base-view>
<trial-view name="trial"></trial-view>
<adjustmentInput-view name="adjustmentInput"></adjustmentInput-view>-->
<div name="Base">Base page stuff here...</div>
<div name="AdjustmentInput">Home page stuff here...</div>
<div name="Trial">Explore page stuff here...</div>
</iron-pages>
</template>
</dom-bind>
@grecia.rodriguez@ge.com It's hard to debug looking at just a piece like this. There are a number of things that could be wrong:
You shouldn't use a dom-bind, that's for demo purposes to show you how data-binding works. Why not start from the predix-webapp-starter? Or the Polymer starter kit? Those will give you the outline of an app you can start editing to your preference.
I don't see your imports here. Perhaps you just didn't copy them over? You need to bower install and import all of the following: px-app-route, px-app-nav, iron-pages
I'm not sure which version of Polymer you're using. If you're using Polymer 1.x this should be OK, as long as you ensure you have all your imports, but if you're using Polymer 2.x you may need to explicitly import the dom-bind and other utilities. Again, predix-webapp-starter or Polymer starter kit would have boilerplate that does this for you and shows you how to extend.
window.addEventListener('load', ...) is probably not the right event to hook into. You probably want to wait for at least DOMContentLoaded in browsers that don't require the webcomponents polyfills, and WebComponentsReady for browsers that do.
You've got things working for the most part. But you need a few things...
To get data-binding to work, e.g. the selected-route="{{navRoute}}" attribute on px-app-nav, this code needs to be used inside of a Polymer template. Right now it appears to be used in a plain HTML document, unless you didn't copy/paste some code over that wraps around it.
This code is responsible for keeping the px-app-nav selected route and the URL in sync. Changes to the URL will update the item that is visibly selected in the nav, and clicking a nav item will update the URL. (Once this code is in a template.) You'll need to do something with the selected route, or the selected item, to show/hide things on the page. px-view is one way to do that. iron-pages is another.
I've made a quick CodePen to show how you could take this code and extend it a bit to use iron-pages for showing/hiding content. I've also wrapped everything in a dom-bind to ensure data-binding works. This isn't how I would do things in production — I'd put the code into a Polymer component that serves as the base for my app. You should probably start building using the predix-webapp-starter to get things ready for production: https://github.com/PredixDev/predix-webapp-starter
CodePen link: https://codepen.io/davidleonard/pen/RQwYRe
Code:
<dom-bind id="app">
<template>
<px-app-route
route="{{route}}"
update-nav-route
nav-route="{{navRoute}}">
</px-app-route>
<px-app-nav id="nav"
items="{{navItems}}"
selected-route="{{navRoute}}"
selected="{{selectedNavItem}}">
</px-app-nav>
<iron-pages selected="[[selectedNavItem.label]]" attr-for-selected="name">
<div name="Base">Base page stuff here...</div>
<div name="Home">Home page stuff here...</div>
<div name="Explore">Explore page stuff here...</div>
</iron-pages>
</template>
</dom-bind>
<script>
(function(document) {
'use strict';
window.addEventListener('WebComponentsReady', function() {
console.log("Web Components Ready!");
var app = document.getElementById('app');
app.navItems = [
{ "id" : "base", "label" : "Base","icon" : "px-fea:home", path: '/base' },
{ "id" : "adjustment_input", "label" : "Home","icon" : "px-fea:alerts", path: '/adjustment_input' },
{ "id" : "explore", "label" : "Explore","icon" : "px-fea:alerts" , path: '/explore' }
];
app.selectedNavItem = app.navItems[0];
});
})(document);
</script>
