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 variables in your URL before, you've probably raised an eyebrow when you saw the colon (:) in the url. If so, be sure to check out this short video about using variables in your url.
When you've created /order/:order_id, don't forget to create the input variable order_id and the order variable, which depends on the the order_id.
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 and add a Grid component on the Page Container. Add a row and a column to this grid. One full-size column will suffice for now.
If you're new to the UI Builder's Gridsystem, please 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.
Once the Dynamic Form has been created you can simply add the order_id to the process by adding it to the redirect web page action event.
Follow these steps to do this:
- Open the POST by clicking the settings-icon next to the selected endpoint and open the redirect web page event.
- If you've clicked the settings icon, the POST endpoints action will open. This POST endpoint has been generated according to the choices you've made. So it receives al the properties we've selected and a redirect_url. Open the redirect web page action event. You'll see that the Redirect url has been connected to a variable, var:redirect_url. This variable will always have the value "/order/" since we've chosen to redirect the user to "/order/:order_id" but haven't filled the order_id. So you can add the id of the order which the action creates. The action creates an order as var:form_result so the Redirect url will now be:
var:redirect_url + 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 it and add a product to it. 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 off just as the first page, adding a Grid on the Page containerand adding one Grid Row and one Grid column to it. It's not necessary but it will be easier for you if you'd like to add more things to this page than this HowTo tells you to (which you probably will, if you're going to build your own customer portal).
- Drag a Definition List onto the Grid column. You can add or duplicate as much Definition list items as properties you'd like to show on this page.
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 neet to be a UI Builder page, since we're not builder a UI, just initiating the action.
- Create a Custom HTML page. We also need to use the order's id in the url, just like we did in the previous step, in order to know which order the user's accepting. Let's go for /order/:order_id/accept as a path.
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, create a order_id input variable on the page. This can be found at the bottom of the page's settings.
- Also create the corresponding order, just as we did earlier in step 3.
- Go to the action of this page. You can add a 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!