This HowTo goes on where the previous HowTo left off. Be sure to check that one out before your starting this one.
After reading this article you will know how you can create a front end for your basic ordermanagement app. You'll learn this in 5 different steps, which will teach you:
- How you can create a new UI Builder page.
- How you can use Dynamic Forms to easily store data in your app, from the front-end.
- How you can display data on a page.
- How you can create a page which executes an action.
- How you can create a button to connect these pages.
Note: This HowTo doesn't do anything with authorization. If you're developing your own portal, you should consider turning on authorization on the endpoints. If you don't know how you can achieve this authorization in the front end you can take a look at this quick HowTo.
Step 1: Create a new UI page in the web module
We're going to create a front end for your Betty Blocks application. For this, you'll need new web page in your app.Head over to the web module of your application by using the module switcher at the top left of your screen.
Here you can create a new UI builder page. For this HowTo we won't need any layout or content templates. Let's add a page to create an order.
Repeat these steps for a second page, at which you set the url to /order/:order_id
If you've never worked with input variables in your URL before, you've probably raised an eyebrow when you saw the colon (:) in the url. If so, you can always check out this short video about using input variables in your url.
When you've created /order/:order_id, you'll need to add variables. You can access your variables by going to the second tab, the variables tab, at the top of your UI Builder Palet (or by clicking the 'V' button).
Here, you'll have to create two variables. Why? The app can read a numeric value from the url.
Then we want to look in our database and fetch the specific order which belongs to this id.
So we need a number variable (for the id) as well as an object variable (entire order record).
Together these variables connect the front end to the back office.
So you need:
- Input variable; kind number; name order_id
Since it's should be reading the variable, in stead of filling it with a value, we're talking about an input variable.
- (normal) Variable; kind object; name order
This is the specifc order record that you want to fetch from your data, based on the input variable. This can be achieved as shown below.
Step 2: Set up the page content for the first page.
You've already created two working front end pages! Only, they're empty... Let's do something about that. Now we're going to set up the page content for /new-order. Open the /new-order page.
If you go to the last tab in your Palet, the Object Tree, you can see every component that's currently on your page. You'll see this:
The page container is the start of your page, this simply centers the content on a visually appealing way.
On this Page Container we want to add some new components. You can add components by going to the first tab of the Palet, the Design Tab.
In the Design Tab, you can drag-and-drop Components, Prefabs or Partials onto your page.
Wanna know more about the Grid Layout and it's Rows and Columns? Take a look at this quick explanation.
Once you've got this, you can add a Dynamic Form onto the Grid column. You'll get a pop-up for the Dynamic Form in which you choose to add a new Order record, selecting the properties as seen in the image below, and redirect to the second page, /order/:order_id.
Since you don't have an order_id yet, you can leave it empty for now.
Once the Dynamic Form has been created you can simply add the order_id to the process by adding it to the Dynamic Form's action.
Follow these steps to do this:
- Open the action by clicking the settings-icon next to the selected endpoint. This Action has been generated according to the choices you've made in the Dynamic Form wizard just now.
We need to make a change to the last event here, the redirect web page event. Soooo, Open the redirect web page action event.
A Dynamic Form sends the data which a user enters to the back office. Whenever the data has been saved in the back office, the user should be sent to a different page. This is handled by the redirect web page event.
Here you'll find the settings for redirecting the user to a new page via the variable var:redirect_url. This variable is filled by the guide you followed to create the dynamic form. However, the page we want to redirect is a dynamic page which contains a id; "/order/:order_id". So you can add the id of the order that is created in this action. The action creates an order as var:form_result so you can set the redirect url to the following value:
"/order/" + var:form_result.id
That's all you need to create an order. Ain't that easy?
Now, after you've created an order, you'd probably want to view the new order and set the status to accepted. Let's build that!
Step 3: Set up the page content for the second page.
Open the second page, /order/:order_id. All this page needs to do is show the user what he or she entered and let the user accept the order.
We start with only 2 components.
- We start off by adding a 'Grid Layout' on the Page container. The Grid Layout will also create a Grid Row and 2 Grid Columns for you.
- Drag a Definition List onto the first 'Grid Column'.
The Definition List will get 1 Definition List Item which you can access by clicking on it. You can add or duplicate as much Definition List Items as you like to show on this page.
You can add Items to the List by going to the list and clicking the plus icon on the components border. This is possible on all components which have child components.
You can also simply duplicate the Items by clicking the component and using the copy-button (or by pressing 'C')
Now that that you can view your brand new order, all that's left is accepting the order. Let's get going!
Step 4: Add a page which triggers an action.
Last but not least the user should be able to accepted the order. The action for this has already been built in the previous HowTo, so we're going to connect that action to the front end.
We'll create a page which will initiate the existing action. This page does not need to be a UI Builder page, since we're not builder a UI, just initiating the action.
- Click on the New Page button at the top left of the screen
- Choose a "Custom HTML" page and set the url to
Since this 'page' will only perform an action, we don't need the UI Builder so we can go for Custom HTML. Also, since we want to update the status of the order, we need to know the id of that order. That's why we use
Note: As said, this HowTo does not do anything with authorization. However, you should take authorization in account! Without authorization anyone can go to this URL and accept an order. That's probably not something you want. If that is in fact exactly what you're looking for, good for you! If not, take a look at this quick HowTo in order to learn to use authorization in your custom front end.
- Just like we did in step 3, we need to create an order_id input variable on the page. When using a Custom HTML page, input variables can be found at the bottom of the page's settings.
- Also create the corresponding order, just as we did earlier in step 3 where you create an object variable which fetches an order from the data, based on the order_id
- Go to the action of this page. You can add an action event of the type Action, which calls upon the existing "Set orderstatus to accepted" action.
- Assign the order variable to the action event too.
We also need to make a small adjustment to the "Set orderstatus to accepted" action itself. In the action, the app sends a mail from var:current_user.email but in the front end there's no current_user, since no one is performing the action from the back end.
From the event you've just created you can also open the other action via the button at the right. Go to the subaction's Send Mail event. Simply change var:current_user.email to *firstname.lastname@example.org. Note: the domain of the sender email (bettyblocks.com in this case) has to be registered on our side. If you'd want to register your own domain, please contact us via Intercom.
- To complete the user's experience you'll have to send him back to another page after he clicks the button (which we're going to create in a bit).Create Redirect web page action event in which you simply redirect the user to the /new-order page. This will result in the following action:
All we need to do now is add a button on /order/:order_id page which sends the user to our newly made page.
Step 5: Add the button to your page.
Head back to the /order/:order_id page. We're going to add a simple button.
- Add a button to the Grid column.
- Choose the right the button's settings:
You'll have to link this button to the accept page we've made in the previous step. We've also added a check-icon and a success style (second tab) to the button, just for fun.
That was all for this step. There's only one things left to do.
Test and enjoy!
You're all set. You've built the basis for a front end application. From here on you can expand your app step by step, coming closer to taking over the world with your app with each step. World domination has never been so easy right?
Something not quite clear? World domination not going as expected? Or do you have some feedback?
Don't hesitate to contact us via the Intercom logo at the bottom right of your screen. We'd love to hear about your experience with this HowTo!