Create a custom, web-based scheduling calendar in 10 minutes

Create a custom, web-based scheduling calendar in 10 minutes

Full Transcript of Video

In this video, I'll show you how to build a custom, web-based scheduling application in just a few minutes. Now, you might hear the term "scheduling application" and think of a simple, generic calendar. I'm talking about data-driven scheduling applications that integrate with core systems, drive workflows, and are completely tailored to your business.

For sake of this video, let's suppose I work for a roofing and siding company who manage their appointment schedule in a spreadsheet. When a customer or prospect calls to set an appointment, the receptionist inputs the information in this spreadsheet and then contacts the salesperson. It's not very efficient.

In this demo, I'll move the scheduling process to the web, give it mobile access, and add some cool automation features...all in just a few minutes. The great part is, we'll be making a custom solution...faster than it takes to deploy a generic, off-the-shelf scheduling tool. I'll be using our low-code development platform, m-Power, as it simplifies the process.

Now, m-Power builds any type of application, but for this one, I need to select the calendar option since I'm making a scheduling app.

In this demo, most of the data I need is in the scheduling spreadsheet that I just showed you. We'll need to upload that data into a database table first. It's a pretty simple process with m-Power. Once I upload my spreadsheet, it identifies the fields and creates a table. Now I just need to select that table and choose all of the fields for my application.

One more thing. I already have a list of salespeople in a different database table, and I want to pull some data out of that too. I'll just join those tables together and pull out the email address since I'll need that later.

Once I tell m-Power how to sort this data, we're almost done. Now, one more thing before we build. Since we're building a calendar, we need to tell m-Power what date and time field to organize our data by. I'll just do that real fast and now we're all done.

I'll just click build and watch m-Power put everything together for me. Now, this is just the first step in the process. m-Power is just putting our data in a calendar format. We'll get to customize the look and feel in a bit.

Okay, now that the application is done, let's check it out.

As you can see, we have a calendar...but...it needs some customization. Let's do that now. I'll just open up m-Power visual editor, m-Painter.

You'll see here that all of our data fields are being displayed in every calendar entry. We really only need to see a few pieces of data in each calendar entry, since we can click each one to get all the info. Let's erase all of these fields and then just add the ones we need. I'd like to see the prospect's last name, the salesperson assigned, and the status of the project.

Okay, let's save that and refresh our calendar. It's looking a little better. But, it's still too much info and there's a lot of blue here. I can solve both of those issues with some simple color coding.

The information I care about in this view is the customer name, the salesperson assigned, and the status. I'll set up some conditional formatting based on the status.

If we've given a quote and now have a signed contract, let's make those green. If we haven't had the appointment yet, lets make those a light blue. If we've given an estimate but haven't heard back yet, let's make those orange. Finally, if the estimate was declined, lets make those a muted gray to remove emphasis from them.

Now that I have color coding, I can remove the status from the cell. Let's save this, and refresh our calendar.

Alright, now it's starting to look better. The color-coding helps me identify where this appointment is in the process. Now if I go back to previous appointments, I can easily see which ones were successful, which ones weren't, and which ones we're still waiting on. Let's see how easy it is to change it. Suppose that prospect just sent over a signed contract. I'll just open up the appointment, and switch the status. Once it's switched, the color automatically updates. Or, if I need to change the appointment day, I just drag and drop it to a different day. Now, suppose I need to add a new appointment to the calendar. I'll just click on the date and this form pops up.

Now, I could add a new appointment...but...I'd like to get this form looking a little better first. Let's open up m-Painter again, and select the form file to edit. Now, let's open up the form layout editor. Here I can rearrange and delete fields in my form using a drag and drop interface. I'll move my fields around into a format that I like, and also remove fields that aren't needed for this calendar. Once I'm done, I just need to save this layout and go back to refresh my calendar. It's looking a lot better now. Let's add a new appointment. I just need to select a salesperson, complete the appointment info, give it a status, and hit accept. Now it's in the calendar.

Once it's in the calendar, how will the salesperson know they have a new appointment? Let's add an automatic notification so the salesperson gets the details sent to them. To do that, let's open up m-Power's workflow designer.

m-Power's workflow designer lets me create all types of automations that can be triggered by a number of conditions. For this, I'd like to send an email when a new appointment is added. I'll set the condition, and then create an email.

I'll set the recipient to be the email address associated with the assigned salesperson. Then, I'll quickly write up an email that includes all of the information they need about the appointment. The nice thing about this is that I can include database fields in my email. That way, every email will automatically send the correct data for that appointment.

Now, every time I add a new appointment, the salesperson will receive a notification. Let's test that real fast. I'll add a new appointment first. Now let's check his email account. As you can see, it's generated an email with all of the appointment information.

Let's do a couple more things before we finish. Let's say that a salesperson has just had an appointment and wants to update the calendar with the estimate and any notes about the appointment? I'd like to give them a simple interface where they can update it while on their phones.

I'll quickly create a new application over the same data that I'm using for my scheduling calendar, and also join it out to another table that includes more details about each project. This application will let my salespeople access appointments in a table format, and update each one with notes. I'm not explaining the build process because it's basically the same thing I just showed you. The important part is that it's built over the same database table as the appointment calendar, so they'll update in real time.

Now, let's run this app and see what it's like. It lists all appointments and lets me update each one. The great part is that m-Power automatically creates responsive apps. So, if a salesperson opens the app on their phone, it will automatically adapt to that device. Suppose a salesperson just had an appointment. They just need to scroll down to the date and select the appointment. Here I can update the project estimate, add notes, change the status, and input my details about the proposed project.

One cool part about this is that these inputs change based on the selected project. If it's a roofing project, I'll see different inputs than I would for a siding project and so on. That way, we don't have to clutter up the form with a bunch of fields for every type of project that this company handles. Once I've updated the form, these changes are automatically added to the calendar...complete with a change to the color coding. If I refresh my calendar, you'll see that the appointment has been updated.

Okay, let's do one last thing before we finish. We now have a nice calendar to manage appointments. Let's make it easy for our team to access it. m-Power has a built-in menuing system that let's me create nice portals for easy application access. Here's the helpdesk portal that I already have. Let's add the appointment calendar to it.

I'll just go into m-Power, and add the menu item here. I just need to add my menu options, select an icon, and choose which users can access this menu. Once I'm done, let's go back to our helpdesk portal and check it out.

Now, there's a lot more I could do to this calendar. For instance, I could set up workflows that get triggered when we get a signed contract. I could add security to the calendar or the update application so each salesperson can only see their appointments. Or I could even use an api to pass this data to another piece of software. For sake of time however, I won't do any of that now. If you'd like to learn more or set up a demo, visit our website at mrc-productivity.com. Thanks for watching.