How to create composable applications

Full Transcript of Video

In this video, I’ll show you how to create composable applications in just a few minutes.

But first, let me explain the concept. It involves breaking down applications into reusable, modular blocks. To demonstrate, let me show you a quick example. Here’s an application that lists my customers. I can click this button to see their orders…or I can drill down into each one and view contacts at each customer location. I can even add new contacts or customers as needed. Let’s say I want to add a new contact at Grand Cycle. I’ll add the info here...and one nice thing to point out...this state dropdown list is database-table-driven, which means it can be reused in multiple applications, but is edited and maintained in a single location.

And...I’m using states because it’s easy to understand, but the true power of a data-table-driven dropdown comes when you have a dropdown list where the data might regularly change…\...like, customer names, ticket IDs, that sort of thing. It’s a pretty powerful feature when dealing with larger applications.

So, once that’s submitted, you’ll see that the contact now appears under Grand Cycle, just to show you that it works. Now, this application may seem pretty straightforward at first, but the great part is something that’s hard to see...it’s composed of reusable pieces.

If we were to break it down into parts, it would look something like this. It’s composed of three different applications–one that pulls data from a database table and lists my customers, one that pulls data from my CRM’s API and lists all of my contacts at each customer location, and one that pulls data from my eCommerce API and lists customer orders.

Now, each of these are standalone applications and can run on their own. But, the nice part about m-Power–which is the development platform I’m using to create this–is the fact its applications can be used as building blocks. They can run standalone or they can be linked with others to build even more powerful applications–which is something you’ll see in this video.

Now, there’s also a reusable dropdown list in here that’s being pulled into a couple of these apps. All of these parts are tied together and pass data between each other so it looks and feels like one application. These four pieces are used to create what you just saw, but most importantly, they’re all reusable..and that’s the concept behind composable applications.

There are a number of advantages to creating applications in this way...it’s easier, more agile…but the biggest one is speed. If I want to create a new application, I don't have to build everything from scratch. I can just use these different building blocks and put everything together in just a few minutes. In this video, I’ll walk you through the whole process. Sounds good? Okay, let’s get started.

I’ll be using the m-Power Development Platform as it makes the process of creating composable web apps so simple. Now, I need to create 4 different pieces–a dropdown list, a customer application, a contacts app, and an orders app. I think the best place to start is with the dropdown list as it’s a piece that I will need in other applications.

So, first I need to name this dropdown list and choose a template. Now, templates are the foundation for everything you create in m-Power. They include the layout and features for every application, but–and here’s the important part–they can also be completely customized as needed. Okay, so now I need to choose my data. I have a database table that lists states along with their abbreviations. I’ll use this since I’m creating a dropdown list for states. Now, I’ll tell m-Power how to sort my data and I’m all done! I’ll click build and wait while m-Power puts this together. Now, this is just the first piece and I’m not going to run this application because it’s just a dropdown list with data. Rather, I’ll dive right into the next build process and show you how I add this dropdown list to my other apps.

Okay, so now let’s make the main customers app. I’ll name my application and choose a different template. My data is in a database table so I’ll select that and choose all of the fields. Now, let’s go into my field settings and add that dropdown list. I’ll just need to go to the input settings and choose the dropdown list that I just built. This will turn the state field into a dropdown list so users don’t have to type in the state every time. Okay, so once I tell m-Power how to sort my data I’m all done!

So, now I’ve completed all of the required steps. I could do a lot more like add custom business logic, filters, calculated fields, but I don’t need to do any of that here, so I’ll just move to the build step and wait while m-Power puts everything together for me. Now, this is just the second piece of the puzzle–it’s the main application that lists my customers. Before I create the final pieces, let’s quickly check this out.

Here we have an application that lists our customers, and includes some nice built in features for sorting and filtering. I can even edit or delete customers here, and add new customers. You’ll notice that this form includes the state dropdown list that I created in the first step. The nice thing about that is that it’s database-driven and reusable across all other applications. Now, this is a pretty simple application but nice considering the amount of time it took to build it.

Okay, so that’s the first two pieces of my composable application. Let’s create the other pieces, one for my contacts and one for my orders. Now, as you probably saw, the build process is the same for every application. So, rather than show you the same thing as you just saw twice now, I’ll create these applications in the background and then show you the finished products.

Alright, so I’ve made those applications–and as I mentioned earlier, each one can run on it’s own. Let me quickly show you. Here we have a list of contacts within our customers. This is pulling data from our CRM’s API. Opening the orders app, we have a list of customer orders that pulling data from our eCommerce API. Okay? So these are all of the pieces I need for my composable application. Now, I just need to tie them all together.

I’ll just open up my customers app and smartlink everything together. Smartlinks are m-Power’s way of connecting different apps together and passing key data automatically. This will help tie everything together.

Now, I just need to rebuild my application for those changes to take effect. You’ll notice throughout this whole process, there’s no coding involved and apps only take minutes to create.

Okay, it’s all done, but before I run the application again, let me quickly jump into m-Painter and make a couple of changes. m-Painter let’s me control the look and feel and customize apps as needed. In this case, I want to do two things. First, I’m moving the contact drill down link that we created with the smartlink out of its own column and placing it on the customer name. That way, when someone clicks the customer name they’ll drill down into that customer’s contacts. Second, let’s turn that customer orders drill down link into a button so it’s more noticeable. The great thing about smartlinks is that they pass data between these applications. So when I click on either of these links, the application only displays data for that specific customer.

Okay, so we’re all done now. Let’s save this and test our application. Here I have the customer application that you saw before. If I click on the customer name, I’m taken to the contact names within that customer…and although it’s two different apps it looks and feels like one. If I open the form, you’ll see that I can add new contacts and also have that state dropdown list in here as well…and that’s the nice part about reusable pieces, I can use this in any application I create.

Going back to the main application, I also have this link to orders. When I click on that, you’ll see that it only displays orders for that one customer like it should. If I click on a different customer’s orders, it displays those. So, it’s all working as it should. We’ve built 4 different reusable pieces and tied them all together into one composable application.

So, how long did that take? Less than 10 minutes, and we have an app that lists our customers, lets me drill into orders, and contacts–all pulling from different data sources. I hope this helps you understand the power of composable applications. Because I’m using a modular, building block approach, I can throw functional applications together in just minutes. The great thing is, I can take all of the pieces that you just saw and use them in other applications. Of course, I can do a whole lot more here, like add workflow, security, custom business logic, and so much more…but I won’t in this video for sake of time.

If you’d like to learn more or set up a customized demo, visit us on the web at mrc-productivity.com. Thanks for watching.