Ergonomically Re-Using search screen in the Lightswitch html client part 1/2

Introduction

In this article I’ll try to elaborate a rather canonical line of business application pattern: re-using search screens.

This was in the Silverlight client almost impossible. In the Html client it’s a piece of cake.

The Home screen

So, our application has basically two use cases. We’ll stick to the classical customer order scenario.

  1. We want to manage customers, meaning we want to be able to search customers, edit them and add new ones. This scenario is probably used by a marketing department, which creates and updates customers, who may or may not have previous orders.
  2. we want to create orders, but not starting from  an already selected customer (so the order creation process does NOT start from a customer detail screen, where the child order records as visualized). So, we either want to create an order and select a customer, or when the customer does not yet exist, create the customer record. Furthermore we want also to be able to create a new customer in an “inline” manner. This scenario is typical when processing orders by an operator e.g. on the phone: an operator sells something, entered to order details, but then sees that the customer is not yet in the system. Basic point is here is that the scenario starts from the order creation and not from the customer edit screen.

Probably, the most brilliant home screen ever:

What you typically want to do for such a home screen, is to add some nice icons Glimlach

The Manage customers scenario

Nothing new here, but let’s walk through the scenario:

The browse customers screen

image

The user can provide search criteria and the tile view will adapt accordingly. Right, everything completely LightSwitch out-of-the-box.

Note that the customer tile has an icon for deleting a customer. Let’s anticipate right now to the scenario where we want to re-use this screen when we want to create an order without prior selection of the customer. In that scenario, you can imagine, that we do not want to have this delete button. We’ll see this in a minute or two.

Tapping a customer tile will bring us to the edit customer screen.

The edit customer screen

The browse customer screen has also a button for creating a new customer. Obviously, that screen is exactly the same as the edit customer screen.

The create new customer screen

So far really nothing new at all.

Let’s explore now our second scenario where we want to create an order without prior customer selection.

image

The Create Order scenario

Since we work here with prototype material, our order has only one property Description. (a real order is probably more substantial)

As you can see, our add order screen has a search icon button for selecting a customer.

Ok, but we have already a search screen on customers, so we want to re-use that screen.

The select a customer screen in the context of order creation

image

This screen is our previous Customer browse screen, but as you see, it is rendered a bit differently. In the next article I’ll focus on the details how this is done.

Let’s summarize the differences:

  1. on the customer tiles we no longer have the delete customer button. I think that make sense, when you want to select a customer, I don’t see the need to delete it.
  2. there is an additional icon (the question mark) which provides a pop up screen for consulting the customer details:
  3. there is an additional back-arrow button with simply confirms the selection of the customer, so we no longer jump to the customer detail screen in this scenario.
  4. Although the back-arrow button brings us again to the order create screen, we adapted also the default action when the whole tile is clicked to bring us back to the order create screen.

We have to deal now also with the fact, that while selecting a customer in the order creation process,  it can happen that we couldn’t select an existing customer, simply because it does not exist yet. Therefor, we still have our “Add Customer” button on the Select customer screen.

Basically, our scenario splits now  in two:

A. Selecting an existing customer in the context of order creation

Nothing special here, when we tap a customer, we are brought back to the order detail screen (we selected here Ludwig Van Beethoven, probably the greatest composer ever):

B. Creating a new customer in the context of order creation

We are looking for Prokofiev, but apparently, he’s not yet a customer (yeah, he’s from Russia)

So, we click the Add Customer button.

image

It would be cool here if the values of our previous search on customer would be pre-filled here already, right?

If we click now the confirm button, we don’t want to be navigated back to the customer browse screen, but we want that we are directly brought back to the order creation screen.

So, pressing the confirm button brings us directly to:

image

and here we can complete our order creation.

conclusion

So far no code, only exploration of the scenario. I hope you noticed that we really want to make things ergonomic combined with re-using screens (in this case the browse customer screen).

In a next article, you’ll see we can do this with very few code !