Change Polymer 3 route to a different html page

Question

I am creating a sample Polymer 3 app with a login and dashboard page. My backend is a simple JX-RS REST API. Once I get a response from the web service, I want to go to a new HTML file (lets says dashboard.html) rather than route to a different element within the same page. When I go through the official website, I could not really understand how to proceed as I am a beginner in JS itself.

In my index.html, I have <my-login>, after the response, handlePositiveResponse is called. This is the place where I am changing the route. Please find the method below.

Following is my code: login.js

class MyLogin extends PolymerElement {
static get template() {
    return html`
    <h1>Hello World..!!</h1>
    <iron-form id="loginUserForm"  on-iron-form-response="handlePositiveResponse" on-iron-form-error="handleNegativeResponse">
            <form id="innerLoginUserForm" content-type="application/json" method="post">
                <paper-input id="email" name="email"  label="E-Mail Address"></paper-input>
                <paper-input id="password" name="password" label="Password" type="password"></paper-input>
                <paper-button disabled="{{activeRequest}}" raised id="loginButton" on-tap="submitLogin">Sign In</paper-button>
            </form>
    </iron-form>
    `;
}

static get properties() {
    return {
        page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged'
        },
        routeData: Object,
        subroute: Object
    };
}

static get observers() {
    return [
        '_routePageChanged(routeData.page)'
    ];
}

_routePageChanged(page) {
    // Show the corresponding page according to the route.
    //
    // If no page was found in the route data, page will be an empty string.
    // Show 'view1' in that case. And if the page doesn't exist, show 'view404'.
    if (!page) {
        this.page = 'login';
    } else if (['view1', 'view2', 'view3', 'my-dashboard'].indexOf(page) !== -1) {
        this.page = page;
    } else {
        this.page = 'view404';
    }

    // Close a non-persistent drawer when the page & route are changed.
    // if (!this.$.drawer.persistent) {
    //   this.$.drawer.close();
    // }
}

_pageChanged(page) {
    // Import the page component on demand.
    //
    // Note: `polymer build` doesn't like string concatenation in the import
    // statement, so break it up.
    switch (page) {
        case 'view1':
            import('./my-view1.js');
            break;
        case 'view2':
            import('./my-view2.js');
            break;
        case 'view3':
            import('./my-view3.js');
            break;
        case 'my-dashboard':
            import('./my-dashboard.js');
            break;
        case 'view404':
            import('./my-view404.js');
            break;
    }
}

submitLogin(e) {
    var form = this.shadowRoot.querySelector('#loginUserForm');
    this.shadowRoot.querySelector('#innerLoginUserForm').action = 'http://localhost:8080/PolymerJavaBackend/rest/login'
    form.submit();
}

handlePositiveResponse(response) {
    this._routePageChanged(null);
    this._routePageChanged('my-dashboard');
    console.log(response);
}

handleNegativeResponse(error) {
    console.log(error);
}

Would appreciate, if you could advise, how to route to a new html page.

Answer 1

Is that your top-level element? Is in your top-level element, where you should have the iron-pages element with all the pages you have in your app, and where you must add the new page.

There you should have the _routePageChanged to check the route data changes. And _pageChanged to import the page.

If you want to navigate to your new page, not from menu, but when you'd get response from the server, in handlePositiveResponse(response), you can use the two-way databinding or this.set to update the route value: this.set('route.path', '/my-dashboard');