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 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 a App Name and a 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 Datamodel to store data in
This is the easy part.
- Open up the Datamodel 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, updatet_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 it's 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 datamodel 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 an 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 a 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.
- 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 module, then click on UI Builder. Press the "Add grid" button 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 order, customer and product tables (by going to their view and pressing 'new'). Now's the time to confirm that the price expression you created in Order_Value properties is performing its calculation. Do you see a calculated price? If not check the variable price expression work you did in step 2.
- On the order form, press UI builder again. Then add a Action, select the Action you've build earlier.
- Exit the builder mode by pressing B. 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 it's 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.