How to Redirection particular Page from PushNotification in worklight + angularJS

Question

I have developed push notification in android/ios environment with worklight + AngularJs and I'm getting successful notification in both the platform.

My application having multiple HTML pages. whenever i click my received notification from notification bar it's redirect to default index.html page, but I want it to redirect any another (HTML) internal page. I also follow some LINK related to this issue but it show if we have code in single html file. but in my case I have multiple HTML and i don't know how to implement this scenario.

I know many of you found this as a repeat question, but i think this scenario is some what different.

Given below is my Broadcast notification code in main.js

function wlCommonInit(){

angular.element(document).ready(function() {
    // Boot up
    angular.bootstrap(document, ["myMobile"]);
}); 
WL.Client.connect({onSuccess: connectSuccess, onFailure: connectFailure});
}
function connectSuccess() {
WL.Logger.debug ("Successfully connected to MobileFirst Server.");
}

function connectFailure() {
WL.Logger.debug ("Failed connecting to MobileFirst Server.");


//1st snippet
WL.SimpleDialog.show("Push Notifications", "Failed connecting to MobileFirst Server. Try again later.", 
        [{
            text : 'Reload',
            handler : WL.Client.reloadapp
        },
        {
            text: 'Close',
            handler : function() {}
        }]
    );
    }

 //2nd snippet. For the 3rd one copy the adapter
 //------------------------------- Handle received notification ---------------------------------------
 WL.Client.Push.onMessage = function (props, payload) {
 WL.SimpleDialog.show("Tag Notifications", "Provider notification data: " + JSON.stringify(props), [ {
    text : 'Close',
    handler : function() {
    WL.SimpleDialog.show("Brodcast Notifications", "Application notification data: " + JSON.stringify(payload), [ {
            text : 'Close',
            handler : function() {}
          }]);      
    }
}]);
};

Below code is my angularJS route.js:

angular.module('MyMobile').
config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when("/login", {
            templateUrl: "partials/login.html", 
            controller: "loginController"}
        ).
        when("/home/:activePanelId", {
            templateUrl: "partials/home.html", 
            controller: "homeController"}
        ).
        when("/activity", {
            templateUrl: "partials/home.html", 
            controller: "homeController",
            activetab: "activity"}
        ).
        when("/messages", {
            templateUrl: "partials/home.html", 
            controller: "homeController",
            activetab: "messages"}
        ).
        when("/membership", {
            templateUrl: "partials/membership.html", 
            controller: "membershipController"}
        ).
        when("/documentrequest", {
            templateUrl: "partials/documentRequest.html"/*, 
            controller: "documentRequestController"*/}
        ).
        when("/findprovider", {
            templateUrl: "partials/findProvider.html", 
            controller: "findProviderController"}
        ).
        when("/benefitsearch", {
            templateUrl: "partials/benefitSearch.html", 
            controller: "benefitController"}
        ).
        when("/benefitsearchresults", {
            templateUrl: "partials/benefitSearchResults.html", 
            controller: "benefitController"}
        ).
        when("/medicine", {
            templateUrl: "partials/medicine.html", 
            controller: "medicineController"}
        ).
        when("/ehr", {
            templateUrl: "partials/ehr.html", 
            controller: "ehrController"}
        ).
        when("/preauthorization", {
            templateUrl: "partials/preAuthorization.html", 
            controller: "preAuthorizationController"}
        ).
        otherwise({redirectTo: '/login'});
    }]);

Note: I want to redirect to "/messages", when i click Notification from notification bar.

score 0 · Answer 1 · answered Sep 09 '15 at 19:14

0

Why does this has to be done with AngularJS though? It can also be done with simple jQuery API use which is bundled in Worklight. There is nothing particular in this scenario that even requires AngularJS IMO.

Regardless of push notification, see in the following sample application how multi-page navigation is implemented. The same can be applied to when the push notification has been catched by the app: https://www.dropbox.com/s/edn71leo5197i80/multipageexecuteplugin.zip?dl=0

answered Sep 09 '15 at 19:14

Idan Adar

44,156
13
50
89

Actually my whole application is in Angular js. perhaps my push notification is written in javascript only. also i can't use your above solution( $('id').load("myPage.html") ) because my application is controlled by angularJS route and controller. – Priyank Sep 11 '15 at 07:20

Shmulik Bardosh · Accepted Answer · 2015-09-16T07:02:07.137

When clicking the notification from the notification bar it triggers the pushNotificationReceived method. This is the place to put your code that is dealing with the received notification. Then you need to "return" to the Angular scope. So use location.href to redirect to "#/"+ the requested page name (in our case "messages"). Note that if you want to use this notification in the #/messages page you will need to assign it to some global variable.

function pushNotificationReceived(props, payload) {
      ...
      location.href = window.location.pathname + "#/messages";
}

How to Redirection particular Page from PushNotification in worklight + angularJS

2 Answers2