Let's have a look at the first couple of widgets from the note trade dashboard set of notes, and the
first one I want to show you is the text input and text output.
Let's do that.
I'm just going to clean up my dashboard example flow.
Just delete all the notes out of here.
And I'm also going to delete the dashboard elements like the tabs and everything in them and start from
scratch.
All right.
So here we go down the bottom of the left toolbar, you'll find the dashboard nodes.
So we've got a button, dropdown switch, etc..
I want to start with something simple, and that is a text output node with its matching text input.
Of course, text can be sent to a text output node from any other widget.
It could be a function widget, for example.
But I want to use these two in tandem so I can show you how to work inside a dashboard.
So all you got to do here is to connect them and then have a look inside the text input node.
You need to see that it's asking to place it somewhere inside a group, inside a tab to remember that
we've got tabs which contain multiple groups, one or more.
And then inside a group of widgets, you can have multiple widgets.
We don't have any.
So let's set one up.
Can you set up a new UI group?
Click on the pencil to do that.
The name of this group is going to be Group one.
Not very imaginative, but let's make it Group one.
And I want to play group one inside a new tab.
So click on the pencil again.
And here is my new tab again.
Going to call it tab one.
Not very imaginative.
You can also assign an icon to the tab as well as other widgets in a node rate dashboard.
They can sit down here in the yellow box that you get information about what kind of icons you can use.
So, for example, we can use font awesome icons.
We can open that up a new tab and have a look at them.
So here's the number of icons.
There's a search button here that you can use to quickly find what you're looking for.
But I'm just going to pick one.
So let's say the thermometer.
So I'm going to click on that.
There's a thermometer.
That's what it looks like.
I can just take a copy of its name and then go into my note red icon field and replace the existing
one with the thermal mirror icon.
And that's when I have a tab and then inside the type of code a group and we can go back to our text
input.
And I just want to say something like into some text and you can put a tooltip here if you want, in
terms of its size.
I'll give it about three blocks and that's it.
Whatever I type in is going to be then passed into the text output.
Let's go to the text output note now and first give it some.
I'll give it a size instead of automatic, I will set it into tab one group one, which is where the
text input node exists as well.
And give it a label you typed.
Something like this, and then there's a few things you can do with the message, Paillot, I'm just
going to keep it simple now, since we are just sending out some text or printing out some text.
But you can see that the syntax is very simple.
We've got a message object and we just want to print out the value of the payload parameter or the payload
attribute of the message object.
And they also can control the layout.
So I'm going to go for this layout here.
And actually, because of that, I'm going to change the size of the text output widget to something
like this.
So the top line is where the label is going to go, which is this.
And then below that is going to be the value.
And I'm going to give this node a name, for example, text output node.
All right.
That's it.
Let's deploy and then got to have a look at our dashboard.
Close that.
All right, so here it is.
I'm going to enter some text testing and the text comes out because it's not exactly how I'd like it
to look like at like the field to be at the top and then just below it at like the output to come out.
So let's do a little customization of that.
Going to go into the tab, click on layout and then move the output to that location just below the
input and just rearrange it.
I can also reduce the width so that the two components, the two widgets are confined within the group
dimensions.
OK, and to deploy again and have a look, you go testing again.
Perfect.
All right, of course, apart from sending simple text from another text input note to the text output,
you can do things such as inject something like, let's say I will inject the timestamp.
Right, and our trigger, the time stamp inject Nood, and that's the time.
All right, so that was pretty simple.
Next up, let's have a look at the button.