A view for Leon to manage restaurants

This view will be more slightly more complex than what we created before in the quick start exercise. It will combine information about Dish and Restaurant records and support creating and editing them. When we're done it should look something like this:

Those action buttons indicate it will use other helper views. If we create them first, it will make the construction of the "top level" view a little bit easier, so let's do that now.  We will need one simple view to create a Restaurant. There will be one more to create a Dish.

Defining the New Restaurant Blade

We will call this one a "blade" because we intend for it to slide out from the side of the parent view when it is time to create a new Restaurant record.

From the Views tab of , create the new view as Container type of layout.  We will keep this layout very simple. Give the view its Name: New Restaurant Blade.

Although we didn't bother with this before, you will need to set Permissions so that non-Admin users can access it, by adding the Restaurant Manager Role.  This will give users like Leon access to it; other users simply won't see it.

As you did earlier for the New Order View, drag in a record editor (where Mode is Create) and configure it for the Restaurant records. Also add a Button Bar, with an Action Button within it labelled Create.

You should add at least these fields using Quick Add/Remove Fields:  Name, About, Delivery Charge. and Photo.

If you quickly switch back to the view's Properties inspector (the GENERAL tab ), you will see that a view can define both Input Parameters and Output Parameters. Strictly speaking, we will not actually need either of those for this view to work.  However, when building a view to create a single kind of record, it is a good practice to map the ID of the created record as an Output Parameter; that way, the calling view can obtain the ID of the created record instance.  Now that you have added the record editor, we have access to this ID.

To do this, add an Output Parameter named id.

For the Source, use the Edit Expression dialog to drag in the ID of Record Editor (Restaurant) → Record Instance.

To configure the Create button, all you need is a single Save action that applies to Record Editor (Restaurant). You should check the Close After Save option, so the view will simply close itself after creating a new Restaurant Record.

When you are done, the view looks like this in the designer.  You can save it.

You can now test it using the Preview button. Of course, since this is our first view for Restaurant, the only way to know that it worked right now is to use the Edit Data feature from the Records tab of the Workspace.

Creating the New Dish Blade

This will be so similar to the New Restaurant Blade View that we will not go over the steps in any detail.  The highlights of this one are:

• Same permissions: Restaurant Manager.
• The record definition is Dish, or course.  You will need at least these fields:
  • About 
  • Name
  • Price
  • Photo
• As before, add an Output Parameter to the view that maps the record instance ID field back to the calling view.  This time, it is actually needed in order to use this view to create a Dish associated to an existing Restaurant, as we will discover when trying to build that UI in a later step.
• The Save action is the same.

Now we are all set to work on the "top-level" experience for managing Restaurant and Dish records.

Creating the top-level Restaurants view

Our design calls for having one place where Leon can do various things without having to "navigate around" too much.

• See which Restaurant records exist
• View information about a restaurant
• Create a new one (our helper view will come in handy here)
• Associate a Dish to a Restaurant
• View information about it.

The overall structure of this view could still be pretty simple, but it would be nice to have 2 columns, with the list of restaurants on the left, and the details (including associated dishes) on the right. Also, we should hide the details whenever there is no Restaurant record selected, so this will require a Container component as well to control visibility. Sometimes it helps to visualize the structure of a view in a simple diagram on a whiteboard. The equivalent here might be this, with the three internal containers called out.  The buttons will be used for creating a new restaurant, and dish for it, respectively.

Start by creating a new view of type Container; give it the name Restaurants, and the same permissions Leon will have, which is the Restaurant Manager role.

Drag in a Rich Text component that is a header and set the title you want there.

Underneath it, drag in a Container.  In it's Properties inspector, you can set a Name such as Main (this is optional, but helps to keep track of them when you have a complex layout). Set the Number of Columns to 2. You have now created the implied left and right areas of the view. You can adjust the Column Span by dragging the line between them; since the left side will only expose the restaurant names it can be narrower.

Drag in Button Bar, Action Button (into the Button Bar), and Record Grid components to the left side.

You've configured a record grid before and this is very much the same. Here is what you need to know about its properties:

• The Record Definition, of course, is Restaurant
• Enable Row Selection is Single row.
• Grid Columns should include:
  • Name
  • ID (set Visible by Default to be off).

The idea will be to bring up the New Restaurant Blade from the New Restaurant button, then refresh the record grid.  Let's configure the properties accordingly.

Use these actions:

Note that the Refresh action will help the user experience quite a bit, by giving the user immediate feedback after creating a restaurant.

At this point you can save and preview your view.  It should let you create some restaurants and these should appear in the grid.

Now configure the right side.

Drag another Container component to the right side.  You can give it the Name of Details if you like. As mentioned earlier, the only reason to put an extra container here is to have all the detail components on the right side hidden by default.  They will become visible only when there is a selection in the Restaurant record grid, and there is therefore valid data available. To configure this, note that the Container has a Hidden property which is not on by default (in other words, the Container is visible).

To get the effect we want, click on Hidden, then select When condition is true. This now lets you specify exactly when the right side contents should be hidden.  

To do this, build an expression for the Condition property that will be evaluated to mean that there are no selected records in the restaurant's grid. The way to express this as a Condition is to say that the currently selected ID column value from Record Grid (Restaurant) → First Selected Row is equal to NULL.  At runtime, this will effectively cause the Details container to become visible only when there is a grid selection. The Edit Expression dialog should look like this:

Since the Details Container is still empty, you can't test this effect just yet. Let's fix that by dragging in some content to the Right side.

Drag in Button Bar, Action Button, and Record Editor components into the Details container.

Ignore the Action Button for the moment.

Up to now, we have only used record editor components where the Mode was Create. This time, we want to tie it to a specific record Instance of Restaurant - something you can only do where Mode is Edit. This requires creating an expression that must resolve to a valid record ID for a Restaurant. By binding the Record ID property to the Record Grid (Restaurant) →First Selected Row → ID, the editor will always show the details of the Restaurant record selected in the grid.

Furthermore we can make it look nicer for display purposes by clicking the checkbox for Show a read-only state for this component. To finish it off, add some fields from Restaurant.  

You can save and preview here.  When nothing is selected, nothing within the Details container should appear. 

When a Restaurant is selected, the details appear.

A powerful built-in capbility of the record editor is that users can themselves switch into an editable form for updating Restaurant data (users can click the Edit link, and this automatically adds a Save button that works without any further configuration).

To complete the view, we will work on the UI for working with dishes now. First, let's add a Record Grid to show the associated Dish records. Start by dragging in a Record Grid Component to the right side, underneath the record editor (but still in the Details container).

The grid properties have a twist here, because we don't simply want to specify a Record Definition. We actually also need to specify an Association to use (that has Dish on the "many" side), and the Associated Record ID. In this case, we can use the same old Restaurant ID we have already used twice in this view.

Add some columns to the record grid for Dish, such as Name, Price and usually we like to add ID as a hidden column also.

The configuration of the Record Grid for Dish will look like this:

You could save and preview this, but there won't be any Dish records associated yet, so the new record grid will always be empty. Therefore, the last step of building this view is is to configure the New Dish Button so that it does this. Luckily, there is a specific action called Associate Records that does exactly this. We use this instead of Open View.

Each property of Associate Records needs to be set. Most of these are obvious.

1. Record Definition to Associate: choose Dish
2. Association to Use: select Restaurant provides Dishes
3. Associated Record Node Side: select  Provided Dish
4. Associated Record ID: this refers to the Restaurant to which the Dish records are associated. Once again, use Record Grid (Restaurant) →First Selected Row → ID.
5. View for Selecting or Creating Associated Records: this is none other than the view we created earlier, New Dish Blade. Here is where that Output Parameter - set to the ID of the new dish - is needed to implicitly make this work. A view that does not "return" a valid ID that matches the association requirements will not work here.

Now you are ready to save and preview it in all its glory.  You will notice that each Restaurant has its own particular Dishes which is exactly what the associations capability is all about.

Challenge

• Earlier, you configured the application shell to have a menu Item that launches the New Order View. Now, update the shell definition so Leon can get to the Restaurants view you just created.
• You now know how to have a record editor in sync with a record grid to edit data. You will notice there isn't a way here to edit a Dish's data after it was created - at least, not in this view. Add this feature.
• If you have the Util library installed, you can use its custom view component Display Image, to show the photo of the selected Restaurant, and the photo of the selected Dish.

What we learned

We've covered a lot of ground here, and these patterns will be very useful in creating similar kinds of interactions using BMC Helix Innovation Studio's view designer.

• We've created and used helper views for creating records
• Used a view output parameter
• Used the Open View action
• Learned about using a record editor's Edit Mode to display data in a read-only fashion.
• Used a record grid with a built-in constraint to only show associated records.
• Used the Associate Records action with a record grid.

We will build on these same techniques when putting together the remaining views, as well as introducing more powerful patterns as we go along.

Now that we can create a real menu of meals, it's time to enhance our original New Order view to take advantage of this.

#BeFearless #BeFocused #BeFirst