Emulating iOS iMessage bubbles

[tim.young]

Here’s a little code I’m playing with to emulate iMessage chat bubbles for user submitted notes. Still playing with it but wanted to share. This is a list component, your #x_element_page_XX_XXX and #field_block_field_XXX will vary.

#x_element_page_21_125 > div:nth-child(3) > div.row.list-layout-size-12 > div:nth-child(odd) > div > div.list-body > div {
background-color: #1982FC;
color: white;
border-radius: 2em;
padding: 10px 5px 5px 5px;
text-align: right;
margin-left: 50%;
}
#x_element_page_21_125 > div:nth-child(3) > div.row.list-layout-size-12 > div:nth-child(even) > div > div.list-body > div {
background-color: #E6E6E6E6;
color: rgb(83,83,83);
border-radius: 2em;
padding: 10px 5px 5px 5px;
text-align: left;
margin-right: 50%;
}

.form-group {
    margin-bottom: 0px !important;
}

#field_block_field_311 {
    font-size: 12px;
    font-style: italic;
}

#field_block_field_313 {
    font-size: 18px;
}

[moe]

If you want to take this to the next level, have a look at https://www.pubnub.com/. Its a very cool platform.

I’m sure there’s a way to do an entire chat system with just some Javascript. (Haven’t tested or done this yet, but its just JS so should be possible).

[tim.young]

At first glance, I thought you were linking something entirely different!

Looks very cool though! My “chat” system is a fraud. It’s just a list of records submitted by users, not a conversation between users.I was considering looking for a solution for in-app chat between our admin staff to get rid of the email clutter, and get rid of slack since people aren’t using it for whatever reason.

[SafetyUniversity]

I’d love to have a chat option to use for a couple of the applications I am building.
~Adam

[moe]

Ya, its a cool system and with a bit of JS you can make it far more dynamic and auto-update.

For example, here I have one window in Incognito and the other not.

I’m logged in as 2 seperate users:

You can really do tons of really cool stuff with this, even detect the user presence and announce who just joined the page etc.

@Chem is working on making some JS to post here.

[tim.young]

I’m a bit confused as to what the GIF is showing. So you’re using the API to create records in Tadabase?

[moe]

What you’re seeing in chat like functionality. When User1 sends a message, it shows a notification to user2 and refreshes their messages to reflect the updated message. You also can add Presence so you can know when someone joins or leaves the message chat.

[tim.young]

Ohh right right, I see now. That’s very cool. Is it difficult to setup? I don’t have any experience working directly with API’s

[moe]

It’s actually impressively straight forward. I hope to add some code a bit later so you can see.

[SafetyUniversity]

@moe, the example you showed…is that using the Pubnub option you mentioned previously?

[moe]

Yes, this is all done with PubNub. I’ll try and post the sample code this evening.

[Chem]

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();

[tim.young]

This is really awesome! Adds a really polished feel to the app I think.

You mentioned users are on the same page. Are there any notifications when users are on different pages?

Edit: sorry, to avoid any confusion, I’m referencing Moe’s gif from an earlier post

[bgedevteam]

Brand Global has developed a fully functional secure messaging system. This solution is designed to work within your Tadabase instance and can be fully customized to match your applications branding and colors. We have even included javascript connectors that would allow you to pass specific application data to the i360chat System. This includes logged in user information, such as Display Name, Email, and Role.

We have developed a chat system specifically for Tadabase. Please see our post in the Spotlight.

[kinganzu]

Hi Tim, how did you set this up so each user gets a dedicated color? I am trying to create something similar but not sure how to distinguish the users.

If you can help me I will appreciate it very much.