Help forum

Create post

Alfred
43

9 months ago

Refactoring custom calendar / date time picker
Hi,
I’m in the process of refactoring our custom date-time picker to make it more robust and improve support for time picking and better range handling. Our current picker is based on an early community-shared datepicker, which heavily relies on timestamps. While this works natively in Toddle, it's become extremely complex and somewhat fragile.

I’ve been considering different approaches for the new version, but I’m still undecided. Should I rework how we handle timestamps, or rely more on the built-in Date object methods with custom actions and functions? Or is there another solution I might be overlooking?

Our main goal is to support both date and time picking while keeping the component as Toddle-native as possible.

Has anyone had good experiences, solutions, or learnings with building similar date pickers or calendars?
Vizualinx
50

9 months ago

Publish to custom domain
I have already connected my custom domain but it still using the toddle.site as the main domain. how can i make my custom domain as the main domain?
Vizualinx
7

9 months ago

Custom domain still pending!
i have already created the CNAME records over 1.5 hours ago and it is still saying 'Pending'.
Any idea what can be the issue?
Patrick Mast
1

9 months ago

Get width of element
I have this global function:
function elementWidth (args, ctx) {

const element = document.getElementById(args.element);
const elementWidth = Math.round(parseFloat(window.getComputedStyle(element).width));

return elementWidth;

}

How can I convert it to a Toddle formula?

I want the function to be encapsulated within the component, making it easily portable between projects without the need to remember to add a separate global function.

Or.. Is it also possible to add this function inside a "Script" tag in the component?
needtheanswers
24

10 months ago

Create QR Codes with editable URLs + download + save to database
Hi everyone, what would be the best approach to do this in Toddle? I´m trying to build a QR code generator. The user enters a URL (https//www.hello.com) and the QR Code get created. The created qr code should then be uploaded to my database (xano) and the user should be able to download the image of the QR code. Also the URL should be editable so the user can change the URL to https//www.hi.com or whatever without changing the QR code. A user can create only 1 QR code but the URL can be edited any time (imagine that the QR code already got printed and you just need to change the URL because you found a typo but you don´t want a new QR code because then you would have to reprint everything..). I´ve tried asking ChatGPT and Claude, watched a few youtube videos but I couldn´t get this to work. Also using a third party solution is not an option. I would appreciate any help 🙏
unicodes
8

10 months ago

is toddle good for blog and main website? (SEO orieted)
I have learned a lot over the past month using Toddle, and it has been fantastic. I have never tried using Toddle for blogs or main website pages. How does a Toddle website / pages rank?

Thank you!
shiva
6

10 months ago

Custom fonts globally
How do I add a custom font so that I can select it globally?
Neville
20

10 months ago

Call API for each item in an array?
I need to call an API for each item in an array. I understand the Toddle way is to use Map to iterate over the array, but I can't quite figure out how to do it.

Context: I need to upload a list of images to Xano. I want to do this for each image individually so I can show the user how many images have been uploaded and how many remain. (And also because I can't figure out how to upload multiple images to Xano in a single API call.)

Here's what I (think) I know:
- The images live in an array populated from a file input.
- Each API call is a POST
- I obviously need to wrap each image in an object in the body of the post

The attached image shows what I think is the right approach, but I'm not even sure if this is the right approach.

Am I heading in the right direction?
Thanks!
unicodes
4

10 months ago

Why can't a variable formula select variables as inputs?
For example a P tag can select as input variables, but a variable formula can't.
Joce Nunes
9

10 months ago

Data Not Loading on Branch Link Despite Working in Editor
I'm facing an unexpected issue. In the development environment, in the editor, all the data is displayed correctly (as shown in the video). However, when I open the branch link, the data is not loading. At first, I thought it might be an error with the APIs, but I checked, and they are working correctly in the editor. Additionally, there are no errors in the Xano log.

https://ooo.mmhmm.app/watch/z_W7G1dtaoGA4dwUIRRZ0b

I've also noticed that no events are being triggered—clicking buttons, inputs, and other interactions aren't working at all.

I'm not sure how to resolve this. Could you help me figure out what might be happening?

Thank you!
Tom Ireland
19

10 months ago

Help with setting up magic link sign-up (Supabase)
Hey, toddle community. I'm currently working on setting up magic link auth via Supabase using the API but struggling to set the session cookies.

Obviously, until you use the magic link, you're not authenticated, so I need a way of setting the session cookie before I redirect the user to the homepage. The URL contains the access token, so am I retrieving it from there?

I have the hacky auth check in a component on the homepage to ensure that if the user is not authenticated then they're redirected to the login page but I'm not sure when (and the best way) to grab the access token. When using email and password, you're setting it as soon as you do the login API call but that's not the case for magic link.
Flo@Vilosia
9

10 months ago

Record Audio / Video
The AI sent me over so I give it a try in here 🙂

Is it possible to access the browser built-in getUserMedia api to record audio / video from within toddle? I've seen the custom-actions
https://toddle.dev/docs/custom-actions
documentation but I'm not sure if this is the right path to go, or if there are any higher level concepts that provide this functionality?

best Flo
Tom Ireland
41

10 months ago

Can't read locally uploaded file in custom action
Over lunch, I'm trying to get my app to read a locally uploaded file to display a preview prior to upload to the server, so I understand I need to use the FileReader API via a custom action.

I can get event.target.files[0] via onchange event on my input (type is file and accepts jpg and png) and store that into a variable but when passing it as an argument in my custom action, I'm getting the following error:

Error in Custom Action TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

I don't see where I'm going wrong because if I log my variable to console before I pass it to my custom action, I can see the files data.

Here is the custom action:

function fileReader(file) {
const reader = new FileReader();
reader.readAsDataURL(file);
}

Any pointers? Let me know if you want the branch (and component URL) for a wee peek.
Armand
3

10 months ago

My app is laggy when I'm logged in
My app uses Supabase for auth and database. And the moment I log into it on the frontend it just becomes laggy, particularly on the input fields.
When not logged in, it behaves normally.

I am not loading a lot of data, 1 row from Table A and about 50ish rows from Table B, no images in either table's column and less than 50kb in total. As far as I can tell from the Network tab in the inspector, there are no unnecessary calls to the API. I only see them pop-up when they should, so I don't think I inadvertently created some call API loop.

The above behavior (laggy when logged in, normal when not logged in) is the same across different devices and browsers:
1. MacOS (Safari/Firefox)
2. iOS (Safari)

The fact that it occurs when logged in indicates that it has something to do with Supabase or how I've its API set up, but I can't find it.

Does anyone have any idea of where I should look to find the cause?
TCG.Store
42

10 months ago

Large Number of Items - API
Hi team,

Any way for me to fetch a specific number of results and lazy load the rest as a user scrolls? or should i upgrade my plan ?

The API returns over 22,000+ products for a tool i'm building.

I upgrade to scale up plan, but still having issues.

58 59 60

61 62