New Plugin: Relative Time with Moment.js

Hi @louisadekoya,

We would like have a relative time solution for a return data from API workflow. Do you know how we can hack this maybe using your plugin or something else?

Hi @timothymugendi,

What exactly would you like to do? Please expand on “solution for a return data from API workflow”

I haven’t tried it but if your API is returning a valid date, you should be able to use it as the source date for the plugin.

I actually want to send data to an external android app from Bubble db via API workflow. The way we send this data is to include a Return data from API action at the end of an API workflow as below:

image

What I wish to be able to do using your plugin is to convert this date to relative time text via such a workflow before returning it to my app. The means I will return a text instead of a date value.

So in this case, I would replace below workflow with results of Moment.js plugin

image

Let me know if you need more information.

Have you tried it yet? I think you should and let me know how you get on. The plugin element takes a date as input and spits out some text, so in theory, if you pass it your result of step 1’s modified date you can set your return text to the plugin element’s value.

@louisadekoya

Hi, thank you so much for this plugin. It seems incredibly useful, but for some reason, I cannot get anything to show. Using the debugger, it seems like all the data is passed correctly, but nothing appears :frowning:

You’re part way there. In this case, you placed the relative time element in the repeating group. So, each individual cell would have its own relative value.

However, to expose the generated value (ex. an hour ago), you need to pull it into a text element that references RelativeTime B’s value.

2 Likes

Ahhh how did I not realize that. Thank you :slight_smile:

2 Likes

Hey! Thanks for the awesome plugin. Is there a way to use Moments.js with different languages?

Thanks - I’m pleased that you find the plugin useful. The moment.js library does support ‘locales’, but this is not included in the plugin. I gather it significantly increases the size of the library that is loaded. If this is very important to your app, I can create a private ‘with-locales’ version of the plugin, which I could grant your app access to, but I can’t guarantee that I will maintain it going forward as I don’t want to commit to maintaining two versions - unless lots of people want the locales feature.

You can see it working here - note that the locale dropdown does not take a dynamic value. I’m afraid it would take more time than I have right now to make it so.

Hello @louisadekoya

Where can I found the plugin Relative Time with Locales?

jm

Hi @JohnMark, I never published it publicly. I don’t intend to either, but as I said above I can add your app to it if you want but with no commitment to maintain it going forward. I find that it does make the page slower but if you are interested in a specific locale, one idea might be to fork the plugin and keep just that locale. That should eliminate any performance concerns.

1 Like

hi @louisadekoya,

firstly thank you so much for publishing this plugin! unfortunately im getting the following error and it mentions to contact the author:

The plugin Relative Time with Moment.js / element Relative Time threw the following error: ReferenceError: moment is not defined
    at Object.b.data.get_relative_time (PLUGIN_Relative-Time-with-Moment-js-initialize--Relative-Time-.js:3:247)
    at eval (PLUGIN_Relative-Time-with-Moment-js-update--Relative-Time-.js:3:92) (please report this to the plugin author)

I’ve searched this thread for the various terms mentioned in the error message but haven’t had any luck.

Any idea as to what is happening here?

Thanks!
C

@cjrb, thanks for installing the plugin and I’m sorry you’re having trouble with it.

I’m not able to reproduce this issue you’re facing, though “moment is not defined” suggests to me that the plugin library is not being loaded for some reason. It may be worth deleting the element from your page, refreshing and adding it again. If that doesn’t work, try it on a fresh page with no other plugins in use. The only issues I’ve ever had with this plugin are when there is another plugin that is in conflict, typically one that is trying to use the same library (moment.js).

Amazing plugin! However, it does not work with Current User’s Creation Date.

To recreate bug:
Add the Relative element to the page
Date: Current User’s Creation Date
Add text element
Set Dynamic value of text to Relative element
Preview
No text

@padenlpierry, thanks for flagging this and I’m sorry that you’re experiencing this issue. I have looked into it a little and I believe it is a bug with Bubble itself - something in the way current user’s date is structured perhaps, but whatever it is, it causes the plugin to report that moment.js is undefined.

I have found a workaround though, which I think further underlines that this is likely a bug with Bubble. If you put the plugin’s element in a group, give that group a content type of user and set its data source to current user, then set the plugin element’s target date to the parent group’s user’s creation date, everything works just fine.

When I have a bit of time, perhaps this weekend, I will report this as a bug to the Bubble team but the above workaround should work for you for now.

If that’s a show stopper for anyone, relative time is certainly possible with pure Bubble. You can check out an intermediate level example.

-Steve

Bravo. Excellent plugin. Thank you thank you.

1 Like

Hi I am having a similar issue with not seeing any values displayed from the relative element.
The relative element reference date is from an API source so maybe thats giving me trouble?

@gregg1, my first thought is that you should make sure that this field in the API response is mapped as a date-time type in Bubble.

Well I didn’t change anything but it is populating now :slight_smile: :man_shrugging:

1 Like