In the previous step, we've understood what flow is, but the flow we built was without any UI component. Now we should include the components in the flow because we need some action in our pages.
Before we create another flow - let’s learn what is a component's instance.
Currently, components are decoupled from each other. However, we've created three pages where we placed a few of them.
We can review our pages on the
Live Preview, but pages are not alive so far.
As you might already notice, when you compose page with React components, you can highlight and select each component on a page by mouse. There is also a convenient way to see the entire structure of the page.
main page in the editor by double click, and click on the
Structure button on the top toolbar.
When you place a component on the page, Webcodesk adds the component's instance to the page structure and assigns a default name to it. However, you can change the instance name to make another copy of the component which acts as an independent counterpart.
Think of the component's instance as an object initialized in the memory. There may be multiple instances of the React component with different names.
Once you understand what component's instance is, there is one more important feature - only instances may take part in the flow.
But before we start creating a flow, let's review the use-case we want to implement in the new flow.
As we already said, the
main page will be a protected page and only authenticated users can see it.
So, we can write the following scenarios:
User opens the browser with main page address (the
main page is recognized as a home page in application)
main page mounts all nested components including the
UserProfile component fires
onMount event and calls
checkUserProfile function to get the user profile data
UserProfilecomponent displays data.
Pretty straightforward, isn't it?
Now let's create a new flow, and name it as
Try to give descriptive names to the flows. You will have many flows in the application and their names should help you to understand what use-cases are implemented inside.
The star point of this flow will be the
UserProfile component's instance in the
onMount event should call
main page item in the
Pages section and find there a
userProfile item (the default instance name).
Drag and drop
userProfile item right on the
Application element in the flow editor.
That's how we can change the starting point in the flow.
checkUserProfile function in the tree and drag it on the empty space in the flow editor.
Then connect the
onMount output in the
userProfile element with the
callFunction input point of the
We see that the
checkUserProfile function has two output points.
authenticatedoutput fires when the user is authenticated and we can get the data through this output.
notAuthenticatedoutput fires when the user is not authenticated and we should forward the user to the
Let's implement the second scenario - forward the user to the
Drag and drop the
sign_in page item from the tree to the empty space in the flow editor,
and connect the
notAuthenticated point to the
forward input point in the
In the second scenario, when there is the user profile data because the user was authenticated before,
we can get data from the
authenticated output point and pass it into the
Drag and drop the
userProfile instance from the tree into the flow editor,
and connect its
data input with the
authenticated output point.
Now try to open the
and you will see that you are forwarded to the
sign_in page when try to open
The sign-in flow we will implement in the next step