Custom Code Documentation

  • feraask-1329933922200457308

    KillerK009

    22 days ago

    Is there any more documentation around what functions/features are accessible via custom code actions or formulas? I'm assuming this would be provided by the ctx parameter provided to the custom code.

    I've seen these pages already:
    https://toddle.dev/docs/custom-actions
    https://toddle.dev/docs/custom-code-api

    But is there any more? Can we modify a Toddle variable value from custom code? Can I call another Toddle formula or action? Is there any way to debug and/or step through code or formulas to see what they are doing?

    Also, is there a way to provide format/type information for object parameters so autocomplete can suggest the properties?
  • lucasg-1329941317148479501

    Lucas G

    22 days ago

    You can use triggerActionEvent to pass data back and update a variable with it.
    Custom actions are independent so to access another formula you would have to tie to global scope which isn’t best practice. Code that needs to interact with each other can live in the same action or use arguments/events to use different ones
  • You can debug by logging to console same as anywhere else
  • feraask-1329949848450895965

    KillerK009

    22 days ago

    What about using a custom code formula instead of an action? Is the return value the output of the formula?

    If I create a custom code formula with an input and provide a Toddle variable as the input, if I make changes to this object are those reflected in the original Toddle variable? Or do I have to output the new value and then set the Toddle variable value to this output?

    In coding terms, I guess I'm asking if the arguments are being passed by reference or by value to the custom code.
  • lucasg-1329951581432578111

    Lucas G

    22 days ago

    If it's a custom formula then it'll automatically update if the input changes
  • Custom actions need to be triggered any time you want to run them
  • feraask-1329955892141232210

    KillerK009

    22 days ago

    Can you clarify what you mean?

    In a custom code action, if I provide a Toddle variable as an input argument and then make changes to the properties of this argument inside the custom action code, are the changes not reflected on the Toddle variable?
  • Tod-1329955893831536731

    Tod

    22 days ago

    Great energy @KillerK009! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
  • lucasg-1329958601674199160

    Lucas G

    22 days ago

    No
  • You need to use triggerActionEvent to pass the data back
    👍1
  • feraask-1329968555873009746

    KillerK009

    22 days ago

    Ok I'm a little confused by this.

    I tried to setup a [simple test project](https://toddle.dev/projects/custom_code_test/branches/start/components/HomePage) by having the page Lifecycle On load event set some Toddle variable values. First doing things via a custom code formula and then via a custom code action.

    I setup the On load event with a workflow to call my custom formula to set the variable values and that works fine. I'm able to both update the variable value inside the code and also get the return value as the output and use that 👍 .

    Then I set up the same workflow to call the custom action afterwards to change the variable value again.

    It seems like the custom action code does nothing unless I also define an event on the action, call that event in the code using triggerActionEvent() and also setup a workflow in response to that event to set one of the variable values... is this right?

    What confuses me is it seems to be setting both variable values in this case. I'm expecting the output to be the First Variable value is "Set by custom formula" since I thought I couldn't manipulate a Toddle variable inside a custom action... but it seems to also be updating the variable with any changes I make to it in the custom action code.
  • lucasg-1329970804154175508

    Lucas G

    22 days ago

    First variable is set by the custom formula and the second variable is set to the hard-coded value in your custom action
  • triggerActionEvent is used like:
    triggerActionEvent('eventName', data);
  • data is what is being sent back to the editor in the event
  • feraask-1329971445081837669

    KillerK009

    22 days ago

    When I load the page this is the values I'm seeing for those variables, it seems to be setting the first variable via the code in the custom action
    1329971444678918256-image.png
    1329971444897157193-image.png
  • feraask-1329971717556142140

    KillerK009

    22 days ago

    I know I have this code in the custom action to try to do this, but I thought I couldn't manipulate a Toddle variable value in an action and I had to use the triggerActionEvent() function to pass the data back
  • lucasg-1329972009760854087

    Lucas G

    22 days ago

    That's not what I'm seeing
  • feraask-1329972082691280980

    KillerK009

    22 days ago

    Yea I feel like I'm seeing some inconsistent behavior where sometimes I see the First Variable value getting set by the custom formula code, and other times the custom action code...
  • lucasg-1329972975289765928

    Lucas G

    22 days ago

    No it always says "Set by custom formula" for me
  • Which is interesting because you're not setting it directly
  • Hmm
  • feraask-1329973701994877018

    KillerK009

    22 days ago

    I have this line in my custom formula that does that: args.firstVariable.prop = "Set by custom formula" which is why I expected that to be the output.

    But then just to test I added the line in the action to also change it with args.firstVariable.prop = "Set by custom action" and most of the time that's the value I see when I refresh and check the current value of First Variable.prop
  • lucasg-1329973753777492060

    Lucas G

    22 days ago

    I guess the code is actually setting the variable without the actionEvent, hadn't seen that before
  • Hadn't tried it either
  • lucasg-1329974141117403158

    Lucas G

    22 days ago

    I see it is being set by both actually. First by the formula then by the action. But since the formula can update, it can set it back after
  • That part isn't the weird part though, it's that neither action is directly setting the first variable
  • Not sure if to consider it a bug
  • feraask-1329974381924978688

    KillerK009

    22 days ago

    Also, if I delete the workflow associated with on-calculate-done it doesn't seem to actually run the custom action code anymore. Or at least not seeing the First Variable value anymore.
  • So like i still have it set to call my custom action in On load but it doesn't seem to do anything anymore
  • 1329974640310878250-image.png
  • lucasg-1329974640730181644

    Lucas G

    22 days ago

    First variable should never be changing either way
  • feraask-1329974714445205534

    KillerK009

    22 days ago

    Oh wait but I thought I could update the First Variable value in the formula by passing it in as an argument?
  • lucasg-1329974862713847808

    Lucas G

    22 days ago

    You're passing it in as an argument but the formula is being used to set the value of Second variable
  • First variable was never being set by either action so it should never have changed, it should have kept its initial value
  • prop: null
  • feraask-1329975224183033997

    KillerK009

    22 days ago

    I guess I should clarify. I was setting the prop value inside the first variable object with this line in the formula:
    args.firstVariable.prop = "Set by custom formula"

    So that shouldn't even work your saying? Like I can't update a property value of a Toddle variable I pass in as an argument?
  • lucasg-1329975384950702200

    Lucas G

    22 days ago

    Correct, since the formula itself is being used in the editor to set Second Variable
  • lucasg-1329975770080088159

    Lucas G

    22 days ago

    But it's tricky because of the way the the code is written
  • Formulas would typically be written to output a value which you'd use to set the item it is being used in
  • Does that make sense
  • You're writing it to just change the input argument
  • feraask-1329976070992167003

    KillerK009

    22 days ago

    Yea I think so. I was basically trying to test where I could modify multiple variables at once. Second Variable would contain the output/return value of the formula or action. And inside the custom code for both the formula and action I would be manipulating the properties inside First Variable.
  • lucasg-1329976090751664129

    Lucas G

    22 days ago

    I just hadn't seen custom code being used like that I guess
  • It's more like regular coding so I get it but it's not how custom code is typically used in toddle I guess
  • feraask-1329976481836699790

    KillerK009

    22 days ago

    Yea exactly! I was trying to write a function which takes arguments by reference and updates them while also doing some calculations and generating an output which may be used for another value
  • lucasg-1329976538665320570

    Lucas G

    22 days ago

    I'm not sure if to consider it a bug. It might technically be a bug but the code is working correctly
  • lucasg-1329977219929608334

    Lucas G

    22 days ago

    Right now the way you have it, second variable is being set by the hard-coded value in the custom formula and it's typically how you'd see them being used
  • Where you use the formula to set something
  • But it also affecting first variable might be a bug but I'm not sure. Would have to run it with the team
  • feraask-1329978018206187540

    KillerK009

    22 days ago

    I definitely like the option of being able to take a Toddle variable as an argument to custom code and actually modify the variable without needing to return it and then set it in Toddle. Allows me to do more work in 1 custom code call and work on multiple variables at once.

    Honestly I'd actually like to just be able to call custom code that doesn't have a return value and just does some stuff which updates properties on variables in Toddle. I thought that's what an action would do but not sure how to implement that since it seems like my action only runs if I have an event associated with it, call triggerActionEvent() and then have a workflow which does something with that action... otherwise when it's just like this with no workflow actually handling the event defined on my custom action it doesn't seem to run my custom code and update the First Variable prop value with this line:
    args.firstVariable.prop = "Set by custom action"
    1329978018004992120-image.png
  • lucasg-1329978389527920641

    Lucas G

    22 days ago

    You can have custom actions without events, for example to run scripts on a page or similar
  • And they work
  • Given how the custom formula is behaving, I would assume you would be able to do the same with a custom action if you change it to a regular return instead of triggerActionEvent
  • lucasg-1329978908623241247

    Lucas G

    22 days ago

    Nope, nevermind. Didn't work (which is how it should work)
  • feraask-1329980160820117564

    KillerK009

    22 days ago

    Ultimately, I was just trying to figure out a way to implement the [question I posted earlier](https://discord.com/channels/972416966683926538/1329575603262722112/1329575603262722112) where I've got 2 nested arrays and I'm trying to take all the values from the 2nd array and replace the specified index in the first array with each element from the 2nd array... was having a hard time doing it with a visual formula so I thought it would be pretty simple in custom code and was having issues there too but I think I may be able to do it with a custom formula now and just return the updated value and set the Toddle variable to that.
  • 595044289818525705-@KillerK009
    Ultimately, I was just trying to figure out a way to implement the [question I posted earlier](https://discord.com/channels/972416966683926538/1329575603262722112/1329575603262722112) where I've got 2 nested arrays and I'm trying to take all the values from the 2nd array and replace the specified index in the first array with each element from the 2nd array... was having a hard time doing it with a visual formula so I thought it would be pretty simple in custom code and was having issues there too but I think I may be able to do it with a custom formula now and just return the updated value and set the Toddle variable to that.
    lucasg-1329980901878272051

    Lucas G

    22 days ago

    Change it back to how you initially had it where the custom action is setting "Second Variable"
  • I am going to run it by the team and verify if this is a bug or not
  • feraask-1329981193365618729

    KillerK009

    22 days ago

    Done!

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!

© Copyright 2024 toddle. All rights reserved.