Basics of Functions in App Builder

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)
Cool. Here I am inside an App Builder workspace. Essentially, you can use a function to write and then use any javascript inside your application. Here's just a basic example. Let's say that I want to present a date-time that has a specific type of formatting. Of course, I could always do that within the notation brackets of an input.

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)
Here, I did a basic search where I said, "Okay. Well, how do you get the current date and time in javascript?" And we can see that on the Stack Overflow post... Get some answers and I'm going to just take this code and then use that.

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)
I'm going to go back to the function. I'm going to open it up, and we're going to get an argument here called prefix, which is what we are going to actually add here. Remember, you can do whatever you want with javascript inside this function. But essentially, we're just taking our argument and prefixing that to the date time, which we are creating.

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)
I hope that this video is helpful in showing you how you can create a javascript function. And then use it inside your application, as well as some of the little things like how you supply an argument to a function, specify return type, so on so forth.

Sebastian Scholl (05:10)
There's a lot more that you can do with functions. You could write entire modules, you could write javascript classes, which then you use. It really is an open editor for you to leverage the power of javascript inside your application. However, this is a good introduction to them. And in future videos, we can go over more complex use cases.

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.

‍