Help forum

New post

Fisher
11
3 months ago
Select Option Styling
Does anyone know how to style an Option in a Select / Drop Down? I have the attached photo going on, but I'd like the "+6", "+5" and "+1" to be different colors. I already have that showing only if certain criteria are met via a formula. You can see that the different parts of the text are broken out into different h4's for this purpose, but for whatever reason changing the style on the h4's don't affect those parts at all. Changing the "option" styling does change things, but I don't want the whole thing changed, just the last bit.

Thanks!
Tom Ireland
2
3 months ago
Checking type of input best practice
Hey, community and toddle-hero's. I discovered an issue in my workflow earlier where I was checking if an array was empty to then set a variable value. The problem was that this kept returning the variable value as undefined. After some time and head scratching, I found out that the array I was trying to check was actually an object. 🤦‍♂️

The array check I'm doing is actually a formula that accepts an input, which means I can use this formula to check if any array I pass in is empty or not and then apply some additional logic.

Now, I know I can use Type of to check what the input type is but I'm trying to figure out where this best belongs. Should I be checking this within the formula itself for what is passed in as the argument or should I be checking this when using the formula? The logic is that I can have some kind of internal error checking to ensure that I'm setting everything correctly.

Video explainer: https://www.youtube.com/watch?v=hAcCbPrYi-o

See image for output based on my formula, which I think works well and will prevent me adding the wrong input type.
Danny
28
3 months ago
Trouble using the Set formula
Hi all! I'm hoping someone can help me understand how the set formula works.

Let's say I have the following array of objects and I want to update the value of Item 2 to 250.
[
{
"id": "123",
"name": "Item 1",
"value": 100
},
{
"id": "456",
"name": "Item 2",
"value": 200
},
{
"id": "789",
"name": "Item 3",
"value": 300
}
]

I would think that I could do something like the first image, but that returns null I think because it's expecting an object as the first argument. So then if I back up one level, it seems like it's working (second image). However, it's only returning that final object.

Can someone help me understand how I can get my full array back with just a value in it changed? I'm guessing this is super easy and there's just something I'm missing.
Dynamiko
29
3 months ago
Error 526 Cloudflare
Can anyone help me. Do http request APIs using sites with cloudflare work with toddle? because I configured my API on a personal site that redirects the DNS with cloudflare but it doesn't work (error 526) while on another nocode platform the APIs work
Suavius
🔥1
8
3 months ago
delete objects from an array
Hi! Hope someone can help me, been struggling for days. I am trying to make an event that will check if an object already exist within an array based on an item_id, delete it if it exist or append it if it does not. The purpose is to collect all items that are selected in an array that will be sent in the body of an api. I am not sure if this is even the best way to do it or not. Any help or feedback is greatly appreciated! Added a screenshot of my current formula. I am able to append and delete, but the deletion is super random and not the element I clicked..
Seun Orofin
9
3 months ago
How do i implement a copy image to clipboard functionality in toddle?
I am tyring to create a simple app that allows users to copy the image in the preview and paste it into their figma canvas..

How can i achieve this?
OSBERT
5
3 months ago
Is there a tutorial on building apps in toddle with coding help from cursor? Thanks
Is there a tutorial on building apps in toddle with coding help from cursor? Thanks
unicodes
0
3 months ago
save an email copy on db (looking for solution)
I'm looking to save an email copy on db. I created a program in python but isn't that good (I'm not mastering python very good), and I do not want to open vs code each time to sync, and hosting on a server and repeating it each hour would means to study a few days in doing this (in cPanel).

If someone passionate of python wants this solution too and want to work on the code I have done since now, I can share the project with.

I'm looking to sync just that present email received or send. Is out there a solution very performant and "open source" to do this?

My code for example it does not ignore the old emails and includes also forwarded emails, and this means that saves lots of duplicates.
Zaj
6
3 months ago
API Calls, Keys and Security
Hello,
I've recently joined the movement 🙂 and been working daily in Toddle but I have a couple of questions:
1. By default, are the API calls made client-side or server-side in Toddle?
2. If the APl I'm using requires authentication, can I simply use it in Toddle? Will the authentication be handled server-side or client-side?
If it's client-side, what's the best practice for storing the APl key securely? Is storing it in a cookie the best approach or are there other methods you would recommend? Thanks for your help!
Alfred
12
3 months ago
Importing floating UI
I have now tried multiple approaches combining custom functions and event listeners for positioning relative popovers, but I can’t create a sustainable solution. After struggling with this for a while, I've decided to give up on creating my own Toddle solution for calculating the relative positioning and switch to using an external JS library to handle the logic. I’m wondering what the best way to implement libraries like Floating UI (https://floating-ui.com/) would be. Would I need custom actions, or would I need a dedicated component with a <script> tag? I don’t have much experience importing external libraries into Toddle, and I have a hard time wrapping my mind around it.
GiantGuf
8
3 months ago
Supabase call issue
Hi, my app suddenly stopped working and after some digging I found that the + character in the phone number have caused it. Is it something in Toddle that have changed? If I change the + to a %2B it works but I would like the + to work so I do not have to add a replace code to the different API calls I have.
Funktionalized
11
3 months ago
API Call Method being passed as "options"
I have a post request that is using the cloudflare proxy to make a request to a fastapi endpoint. When the proxy sends the request for some reason it is using a method called "options" and it is causing a 405 method not allowed error.

I have the API Call setup as a post request in toddle.
unicodes
7
3 months ago
repeat item issue (difficult to explain)
I have a component and I repeat this component based on the data fetched by db. It is a sales tool and fetch companies information. For each repeated component I change the status.

leads:
- (1 position) apple: status: "new"
- (2 position) microsoft : status: "new"
- (3 position) tesla. : status: "new"

For the second position, I'm changing the status. The status is included in the component "lead", the status it self is a component with variables.

I'm editing the status of to the lead Microsoft:

- (1 position) apple : status: "new"
- (2 position) microsoft : status: "Prospect"
- (3 position) tesla. : status: "new"

I'm working on the lead and I'm not saving it because I want to continue after adding the new lead (i'm not refreshing the page).

Now, without refreshing the page I'm adding a new lead.

Leads:
- (1 position) Intel: status "new"
- (2 position) apple: status: "prospect"
- (3 position) microsoft : status: "new"
- (4 position) tesla. : status: "new"

Adding the new lead means recalling the API Lead loading.

Where is the issue?
The API Lead loading fetch the correct information from the DB:
- (1 position) Intel: status "new"
- (2 position) apple: status: "new"
- (3 position) microsoft : status: "prospect"
- (4 position) tesla. : status: "new"

but on the repeated item I have:
- (1 position) Intel: status "new"
- (2 position) apple: status: "prospect"
- (3 position) microsoft : status: "new"
- (4 position) tesla. : status: "new"

What is happening is that the variable doesn't reset the value as it should because was rendered again the component, but stay with the previous value and stay for the position 2 of the rendered items, even if it should go down on position 3.

This is happening because on loading of the component I'm not reseting the variables values or is more something that it should be seen from toddle side?
Tom Ireland
7
3 months ago
Help on Sleep behaviour
I'm trying to debounce text input storage for a specific period of time e.g. 3s (3000ms) and after that time passes, append an object to an array with the text content. I have an on input event that gets an element by id and the textContent and stores it in a variable. All good. After 3s, I then take that text content, store it in an object and append it to an array.

Weirdly, after 3s, it adds an object per character press. For example, if I type "The", it will append 3 objects to the array after the tick. Is that expected?

If so, how would I only add the one object after 3s. The goal is that I'm debouncing continuous typing, however when there is a pause, I want to update my array (change buffer/history stack) so that I can capture all of the continuous typing up until the pause.

I can't use other events like on blur, focus out, etc., to update the array because I want to remain focused on the current element and continue typing after my pause.
Darren
✅1
4
3 months ago
Any tips on how to get this popover to stay on the screen?
I have a little pop over box where users can select another color, but if it's on the edge it goes off the screen.
Any tips to make it more dynamic and adjust it's position if it can't show fully on the screen?
Here's a demo: https://guides.darrenalderman.com/recordings/F10mlY8Uzz2hIPR7S0a0

24 25 26

Help forum

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community