Sebastian Scholl (00:02)
Hey there, this is Sebastian from 8base. Today, we're going to be looking at the basics of writing and then using a function in App Builder.
Sebastian Scholl (00:09)
Sebastian Scholl (00:30)
However, that could just get a little bit messy inside the input. And maybe, I want to use it different parts across my application or different places in my application. So better that I actually use a function to encapsulate that code and then reference that function.
Sebastian Scholl (00:45)
Sebastian Scholl (00:59)
First, I open my Inspector. I can just run it, see what I get back. I can see that gives me this datetime of last sync in the current date, current time. And let's just say that that's perfect, exactly what we wanted. What I'm going to do is go over to App Builder now, open up the functions, and then create a global function, and paste that code inside the function body.
Sebastian Scholl (01:21)
And then two is that I am going to return the datetime here. So I don't need to set as a variable. Now, the return type is going to be a string. So let's make sure that we set it to string. If it was an array, we set it as a list. And then in this case, we're taking no arguments. But we'll do an argument example in just a minute.
Sebastian Scholl (01:43)
Now, I'm going to call this dateTimeString, or dateTime. Yeah, let's just call it dateTimeString. Awesome. And I'm going to save it. Oh, one second, some issue with the line breaks. Okay. So I'm going to go through here, and just put it all on one line. Maybe it likes that better. Cool. Now, we have our function created.
Sebastian Scholl (02:08)
So if I go into my State and I go down to Functions, I can see that that dateTimeString function is now here. And let's say that I want to run it and show to my header. Or actually, let's just show it on the page. So I'm going to go get a text component, and I'm going to put the text component there. Just give it a little bit of a margin. Let's apply that to all so that it makes it look a little prettier. Cool.
Sebastian Scholl (02:35)
And now, inside the properties of this text, I'm going to actually invoke that function and so that it gives that value as a text input. So here, we're going to say is addition. And that's the reference to State, right? However, we then need to say function, and that's the reference the actual function itself.
Sebastian Scholl (02:53)
And then we're going to execute that. And the reason that is just being put as a string is because I didn't put it in an expression. So double brackets. Let's see, addition is not defined. All right, let's try... Oh, no wonder it's not called addition, sorry. In a previous example I was working on, it was called addition.
Sebastian Scholl (03:16)
So now, I'm just go back to text. I'm going to pop that in there. Cool. dateTimeString. And then I'm going to say, "Function, call it." And now that functions executing and returning the string, which is to plan on displaying on our screen. Perfect.
Sebastian Scholl (03:32)
However, let's say that we did want to supply some type of argument to this function. And so in this case, let's say that this prefix last sync. We want to change that across pages. We probably want to change more of the function. Let's just use this as a basic example.
Sebastian Scholl (03:50)
Sebastian Scholl (04:10)
Here now, I'm going to say that I have an argument called prefix, and it is a string, which is it's expecting. Now, when I save that... Cool. That's saved. Now, if I go back to my page, we can see that it is getting the NaN value. What we're going to do now is update this to we're going to say, "Oh, well, our prefix is going to be Current Date Time." And a little bit of space there. Cool.
Sebastian Scholl (04:43)
Now, that's being updated. And if I wanted to use this same function across my application, or in different areas, whatever is that string value or that prefix I'm supplying it will obviously different across those different uses.
Sebastian Scholl (04:56)
Sebastian Scholl (05:10)
Sebastian Scholl (05:28)
Hope you found this helpful. If you want to receive updates on future videos, please hit the subscribe button and look forward to seeing you in future episodes. Happy developing.