This tutorial will help you build your first order management application within Betty Blocks. Briefly, we will do the following:
- Create a new application
- Build up a Datamodel to store data in
- Define workflows in Actions
- Design Pages in the Back Office to tie it all together
Our end product is a very simple order system.
Step 1: Create a new application using My Betty Blocks
We start off easy. Go to my.bettyblocks.com and go to one of your organisations. Click the New App button, on the next screen select Database Application. Fill in an App Name and an Identifier. The platform will now fire up your application, including a new database instance. Give it a few minutes or seconds and open the app.
Step 2: Build up the Data Model to store data in
This is the easy part.
- Open up the Data Model section from your Builder Bar. The platform automatically creates a Role table, and also a User table. You should see something like.
- Press the New button on this view. So that we can create new Models to our application.
- Create a Customer model, save it. After saving, go to the properties subview. You'll see that the platform has created the first three properties of a customer: created_at, updated_at and an id.
- Create a new property by clicking on New in this view. Property type is 'Text (single line)". At the name field, fill in "company name". Save it and go back to your visual model overview. You should now have something like:
Now go on and make all these Models and Properties, you can do it!
The List property with the name Status is as following:
- Next up: Relations between those models. Add the following relations:
A customer has_many orders
A product has_many orders
Not sure how to do this? Follow this short HowTo.
- All done? We'll need to edit one property on the Order model. Go to the 'Price expression" property with the name "order_value". An expression will automatically calculate its value. Our order_value expression will be the result of the quantity times the product's unit price. In the Expression field, add the following expression.
var:record.quantity * var:record.product.unit_price
Tip: Use the Insert Variable button to easily select the variables you want!
The Data Model should now look like this:
Step 3: Define workflows in Actions
If you thought everything before was easy, behold, this is even easier. Actions are pieces of logic, they can be triggered manual (ie a user clicks a button) or they could follow a schedule (every 5 minutes for example). In step three we are an action to email the customer his order confirmation, and set the status to "Accepted'. You can add other actions if you'd like.
- Go to the "Actions" section of your application, and press the New button. Fill in the following fields for the first action, and Save:
Description: Set order status accepted
- Add a "Condition" as the first step in the Action, use the + icon to add events. We use this Condition to check if all required fields are here when executing this Action.
- When this condition evaluates "True", the green check flow, we want to update the order status to "Accepted". So add an Update event, and select the record object from the browser that popped-up and change the status to "Accepted.
- Add a send_mail event right after the update event. This event will email the customer with a confirmation of his order. Fill in the subject, to_email, to_name and from_email. You can assign variables to for example the to_email, click the variable icon and select the order object > customer object and the customer email address.
- In order for the action event to run properly the "From email" field must be equal to a domain that is @bettyblocks.com. If you would like to send an email from your own domain you must configure your domain's DNS settings first.
- Save this event and open the newly generated subview "Template". You can write a email here, the customer will see this in his inbox when an order was accepted.
- You should now have an action flow that looks like this.
Looks good right?
Step 4: Design Pages to tie it all together
I hear you thinking, is there even a hard part? YES! For this step we'll set up pages for customer entry, order entry, product entry and triggering the action.
- Make sure you're in the Back Office. Enter builder mode by pressing e on your keyboard or by clicking on the switch in the top right corner. Press the "Add grid" button in de sidebar to make a grid based on the customer model. In this pop-up you'll only have to select a model, then save.
- Repeat these steps for Orders and for Products.
- Add a few records in the created grids, this can be done by clicking on the new button after a grid has been selected. By doing this we can confirm that the price expression we have created in step 2 performing its calculation. Do you see a calculated price for the order_value property?
- Go to the order form by creating a new record while in the order grid, press e to enter Builder Mode. Now we can add an Action on the right side of the form, select the Action we have created in the previous step.
- Exit the Builder Mode by pressing e. You are now ready to test your action, press the "Set order status accepted" button. The status should change to Accepted, and there should be an email on its way.
Step 5: Sit back and look at your glorious creation
This is your moment, your time to shine. Run to your employees and show them what you did within 10 minutes of Betty Blocks-building, book the biggest room in your building and present it all on the big screen. The hero you are! Our core platform team accepts chocolate (dark please) and flowers, just in case you'd like to thank them.