Introducing CRM Simple for Wavamaker || Part-8

Simple CRM is precisely what its name implies; a simple customer relationship management (CRM) example application. We have exactly what you'd expect in a basic sample of a CRM application; customers, orders, and ordered items. It is a database-driven application, where the schema consists of five tables and includes one-to-many and many-to-many relationships.

Open the project named CRM_Simple in the Studio and run the app. The Run button in the top menu bar deploys the application and opens a new browser window.

If there are no problems and the database connection is good, the new application is loaded in the new window with the customer list populated. The WaveMaker launcher process sends the Studio URL to the default browser on the system. You can specify a specific browser in the preferences accessed by the Advanced Options button when the Studio has been stopped.

Or, if you prefer, simply copy the URL of the application from the launched windows into the desired browser; in this case, we'll be using Google Chrome.The first thing we are likely to notice is the size of the layout. The layout of this particular application targets a tablet. If you are using the application from a touch input device, the lists are scrolled with a flick of the finger, as we would expect. If, on the other hand, you load the application in a desktop browser, scroll bars appear where needed, and you can use your mouse to scroll through the list.

At the top of the customer area is a search box. There's some placeholder text informing us that we can search using any part of a company name. Typing city, for example, immediately returns us both "City Light Books" and "Fog City books." It does this even though only City Light Books begins with the word city, and both entries capitalize "city." The X icon at the right end of the search editor clears out our search and resets our results with a single action.

As we select different customers from the list of companies, the details near the top of the screen, including the companies' contact picture, refreshes to the selected customer. The companies Twitter ID is presented as a link, should we wish to send the customer a quick message via Twitter. At the same time, the list of orders to the right is updated. As we make our selections, the lists highlight the currently selected items, lest we forget which customer or order we have chosen. Likewise, when we
select an order presented by order date, we are presented with the line items of the chosen order.

Now let's begin to enter a new customer by clicking on the New Customer button. We are presented with a straightforward form. The company name, address, city, state, and zip code fields are required, as suggested by the red asterisk next to the labels. As we would expect from a modern application, validation helps the user complete the form successfully by ensuring the user has entered acceptable
data, such as ensuring a phone number has the correct number of digits. When you enter values for all the required fields, the Save button becomes enabled. Click on or otherwise point at an element and that element is given the focus of the application. It becomes the active element that receives input. Moving focus away from that element triggers the blur event for the node. If we trigger the blur event for any required editor in the form without entering a value, validation displays both a warning icon and a friendly pop-up message.

Clicking on the Inventory button navigates us to the list of items in our fictitious book supplier inventory. Again, highlighting provides feedback on the selection we have made. Here we have another form which we can update an existing item, create a new item, or delete an existing entry. When taking a new order, the date editor opens a calendar date picker, just as we'd expect. The Companies button quickly navigates us back to our customer view, ready to look up another.

Not a bad little application, eh? We've seen styled widgets, such as the search editor, combined with rich editor validation and in-form assistance assembled to present intuitive database forms and navigations. Would you call it "pixel perfect" or so compelling that you expect it to race to the top of app store downloads? No, probably not. Is it usable and functional? It certainly is. Does it solve a problem or deliver a business solution, however fictitious the business may be? Yes, yes it does.

Now consider that almost no code was used to create this application. Oh sure, there's plenty of Java and JavaScript being executed, but the vast majority of the effort in building a simple application such as this is done visually. The developer need only select values, tick on and off desired behaviors, and connect events with responses. Many WaveMaker users use some JavaScript code to get the  exact behaviors they want in the browser. Java can also be used for custom server-side services. This application does use a data expression analogous to a formula in a spreadsheet cell to sum order totals. However, such expressions are no more complicated than macros in a Microsoft Office document.

In this one example, we get a hint of the professional grade aspects of our application. Because the data access layer is built using popular open source frameworks, the level of customization shown does not require us to code those features ourselves.