B4J Question [ABMaterial] [Solved]Push.js Notifications

Philip Chatzigeorgiadis

Active Member
Licensed User
Last edited:

Mashiane

Expert
Licensed User
You can either create a custom component for this though I think that would be an overkill. Use AddextrajavascriptFile and add the push.js file to the page. Add a button to the page on connectpage then on the button click event call page.ws.evaluate(''push('hello')).. this is just to give an idea I'm not on my laptop..
 
Upvote 0

Philip Chatzigeorgiadis

Active Member
Licensed User
You can either create a custom component for this though I think that would be an overkill. Use AddextrajavascriptFile and add the push.js file to the page. Add a button to the page on connectpage then on the button click event call page.ws.evaluate(''push('hello')).. this is just to give an idea I'm not on my laptop..
I have tried your suggestion with no result.
I tried both page.ws.eval and page.ws.runfunction
Note that you you must call "push.create('hello')" - I do not know if this changes the situation, as my javascript knowledge is next to nil.
 
Upvote 0

Mashiane

Expert
Licensed User
@Philip Chatzigeorgiadis , ohk, I've managed to get this to work. I think you can then try and get the rest of the options working. I think I understand now. It's kinda cool that the notifications shows 'outside' the browser window. i'm sure it can be set for other options to do more.

PushJS.gif


Reproduction:

In BuildPage...

B4X:
'push.js
    page.AddExtraJavaScriptFile("https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.js")

In ConnectPage, I created a button so that when clicked will raise the Push.

B4X:
Dim btn As ABMButton
    btn.InitializeRaised(page,"pushit","","","Push","")
    page.cell(2,1).AddComponent(btn)

The Button Click Event..

B4X:
Sub pushit_Clicked(Target As String)
    Dim title As String = "Mash Testing Push.js!"
    Dim body As String = "Let's hope this works perfectly!"
    Dim icon As String = "../images/32.png"
    Dim pausefor As String = "5000"
    Dim pushIT As String
    pushIT = $"Push.create("${title}", {
            body: "${body}",
            icon: "${icon}",
            timeout: ${pausefor},
            onClick: function() {
                console.log(this);
            }
        });"$
    page.ws.Eval(pushIT,Null)
    page.ws.Flush     
End Sub

This though it like now the current toasts work inside ABM. So you have it, good luck.
 
Upvote 0

Mashiane

Expert
Licensed User
PS: This first asks the user to confirm if they want to receive notifications. Whilst I'm not sure what you want to do with this (you can share your ideas if you want so that we can learn), from what has happened here, it does work and then you can tweak it for your like. I had to google this to find other examples of how this was being used and came across the cloudfare cdn.
 
Upvote 0

Philip Chatzigeorgiadis

Active Member
Licensed User
PS: ... Whilst I'm not sure what you want to do with this (you can share your ideas if you want so that we can learn), ....
The ToastMessages of ABM are only shown inside the browser window. I want my users to be notified of certain events (e.g. a new order added in the production schedule), even if their browser is minimized - i.e. the same concept of receiving notifications about new emails.
 
Upvote 0

Philip Chatzigeorgiadis

Active Member
Licensed User
@Philip Chatzigeorgiadis , ohk, I've managed to get this to work. I think you can then try and get the rest of the options working. I think I understand now. It's kinda cool that the notifications shows 'outside' the browser window. i'm sure it can be set for other options to do more.

View attachment 67068

Reproduction:

In BuildPage...

B4X:
'push.js
    page.AddExtraJavaScriptFile("https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.js")

In ConnectPage, I created a button so that when clicked will raise the Push.

B4X:
Dim btn As ABMButton
    btn.InitializeRaised(page,"pushit","","","Push","")
    page.cell(2,1).AddComponent(btn)

The Button Click Event..

B4X:
Sub pushit_Clicked(Target As String)
    Dim title As String = "Mash Testing Push.js!"
    Dim body As String = "Let's hope this works perfectly!"
    Dim icon As String = "../images/32.png"
    Dim pausefor As String = "5000"
    Dim pushIT As String
    pushIT = $"Push.create("${title}", {
            body: "${body}",
            icon: "${icon}",
            timeout: ${pausefor},
            onClick: function() {
                console.log(this);
            }
        });"$
    page.ws.Eval(pushIT,Null)
    page.ws.Flush    
End Sub

This though it like now the current toasts work inside ABM. So you have it, good luck.
Works great!
Thank you!
 
Upvote 0

Mashiane

Expert
Licensed User
Nice, I have created a method that one can also pass a tag to it. This raises two events, onClick and OnError..

B4X:
Sub PushIt(page As ABMPage, pTitle As String, pBody As String, pImage As String, pPause As String, pTag As String)
    If pPause = "" Then pPause = "5000"
    Dim sPush As String
    sPush = $"Push.create("${pTitle}", {
            body: "${pBody}",
            icon: "${pImage}",
            timeout: ${pPause},
            tag: "${pTag}",
            onClick: function() {
                b4j_raiseEvent('push_click', {'value':'${pTag}'});
            },
            onError: function() {
                b4j_raiseEvent('push_error', {'value':'${pTag}'});
            }
        });"$
    page.ws.Eval(sPush,Null)
    page.ws.Flush
End Sub

The events have to be push_error and push_onclick. The tag passed is returned from the map variable.

B4X:
Sub push_click(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub

Sub push_error(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub
 
Upvote 0

Philip Chatzigeorgiadis

Active Member
Licensed User
Nice, I have created a method that one can also pass a tag to it. This raises two events, onClick and OnError..

B4X:
Sub PushIt(page As ABMPage, pTitle As String, pBody As String, pImage As String, pPause As String, pTag As String)
    If pPause = "" Then pPause = "5000"
    Dim sPush As String
    sPush = $"Push.create("${pTitle}", {
            body: "${pBody}",
            icon: "${pImage}",
            timeout: ${pPause},
            tag: "${pTag}",
            onClick: function() {
                b4j_raiseEvent('push_click', {'value':'${pTag}'});
            },
            onError: function() {
                b4j_raiseEvent('push_error', {'value':'${pTag}'});
            }
        });"$
    page.ws.Eval(sPush,Null)
    page.ws.Flush
End Sub

The events have to be push_error and push_onclick. The tag passed is returned from the map variable.

B4X:
Sub push_click(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub

Sub push_error(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub
I think that you do not need to pass page as parameter to the PushIt sub.
 
Upvote 0
Top