Emulating iOS iMessage bubbles

Showcase Tips and Tricks
12

For those of you who want it so when there are multiple users on the same front-end page and one of the users adds a record, you want it so that the other user’s pages update automatically.

Here’s how that will look. Notice how there are two browser windows open with two different users logged in to the same app.

https://content.screencast.com/users/Chem-/folders/Tadabase/media/76c7cea7-2d3e-4a1c-9c17-c9ff66bc191d/10.09.2020-15.46.gif(image larger than 4096KB)

Here are the steps to accomplish this

  1. Create an account on https://www.pubnub.com, create an app, and note down your Publish Key and Subscribe Key.

  2. Add the following to the Custom Footer Code in your Tadabase App
    <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.27.4.min.js"></script>

  3. Add a Form and Table component to the page builder and find the HTML ID of both

  4. Paste the following into the JavaScript section of the page

Make sure to update formID and componentID (x_element_page_X_X) to your ID’s along with YOUR_SUBSCRIBE_KEY and YOUR_PUBLISH_KEY

localStorage.setItem('Name', '{loggedInUser.Name}');
const LoggedInUser = localStorage.getItem('Name');
var submitButtonLoaded = false;
var formID = 'x_element_page_X_X';
var componentID = 'x_element_page_X_X';
const pubnub = new PubNub({
    subscribeKey: "YOUR_SUBSCRIBE_KEY",
    publishKey: "YOUR_PUBLISH_KEY",
    uuid: "{loggedInUser.Name}",
    autoNetworkDetection: true, // enable for non-browser environment automatic reconnection
    restore: true, // enable catchup on missed messages
});
pubnub.subscribe({
    channels: ['Test'],
    withPresence: true
});
pubnub.addListener({
    presence: function (event) {
        console.log(LoggedInUser + ' New Presence deteceted');
        console.log(LoggedInUser + " just joined this page!");
    }
});
submitUpdate = function () {
    pubnub.publish(
        {
            channel: 'Test',
            message: LoggedInUser + ' Added New Record',
        },
        function (status, response) {
            if (status.error) {
                console.log(status);
            } else {
                console.log('Message Sent');
            }
        }
    );
};
refreshTable = pubnub.addListener({
    message: function (event) {
        console.log('Message Received: ' + event.message);
        $('#' + componentID + ' [ng-click="refreshData()"]').click();
    }

});
pubnub.addListener({
    message: function (event) {
        console.log(event.message + ' in the ' + event.channel + ' channel!');
    }
});
function checkIfSubmitButtonHasLoaded() {
    if (submitButtonLoaded === false) {
        if ($('#' + formID + ' .form-submit button').html() !== undefined) {
            submitButtonLoaded = true;
        }
        window.setTimeout(checkIfSubmitButtonHasLoaded, 100);
    } else {
        $('#' + formID + ' .form-submit button').click(function () {
            submitUpdate();
        });
    }
}
checkIfSubmitButtonHasLoaded();
1 Like