Polymer - Routing between screens

I’m not very familiar with Polymer, hence this question. I’m trying to navigate from a page with list items to a page that shows details of that item but I’m not sure how to do the routing. It should be as part of the on-tap event. Can someone please help or provide some pointers? I would prefer to do this in JavaScript than declaratively (unless that’s a bad practice in Polymer)


Hi Jayesh,

Currently, on screens generated by STUDIO we use data-binding to conditionally switch between list/edit view e.g.

<template is="dom-if" if="[[!editedEntity]]">
   display list

However you can use different approach e.g. app-route component in conjunction with iron-pages see this blog post for more info: https://www.polymer-project.org/1.0/toolbox/routing .

We plan to improve routing in the next release, see PL-8707

Thanks, but does it have to be declarative using ? Can I not do it in JavaScript in the on-tap? I don’t need to open an edit screen, just a detailed view of some entity B on page B ( so pass some params ) after tapping on a List Item of entity A on Page A.

Hi Jayesh,

Ok let’s try to take a more in-depth look at the topic.
Usually Polymer applications are single page applications. So basically all transitions between screens is just hiding/displaying (or re-stamping) the corresponding elements.

A common approach is to use an iron-pages element in conjunction with data-binding, consider the following example: https://www.polymer-project.org/1.0/start/toolbox/create-a-page

Also you can bind an iron-pages to the URL using app-location and app-route. Then it will be possible to use regular links to navigate between pages (example).

If you just need to switch between two states it’s possible to show/hide them using dom-if helper. I’ve made a simple example for you:

From the practical point of view - in your CUBA polymer client just rename -edit screen to -view and use it to display data.

Let me know if you have any questions.

:ticket: See the following issue in our bug tracker: