Paul Kimmel's Blog

“I don’t make jokes. I just watch government and report the facts.”
--Will Rogers

Each of us is probably more a product of our environment than we want to admit. I was born in Flint, Michigan—Little Motown—famous for gangsta rappers like Scurvy, Buicks, and Michael Moore. (My daughter Alex was actually in a Scurvy video “Flintstone Kids” filmed in Flint, Michigan about 7 years ago.) Family legend has it that when I came home from the St. Joseph’s Hospital my dad took me in his arms on his Indian motorcycle and raced up and down the street yelling “it’s a boy”. Three years later—1969—it was a Gladys Knight and the Pips performance at a local Flint bar. Just those two events may explain a lot about my personality. I like rap but hardly anyone would guess that upon meeting me. I can go from napping or reading to riding my dirt bike or aerobatic flying in an instant. My kids are well mannered, but my youngest son has fired an M-16 machine gun on full automatic—gotta love Tennesseans. (Thrill seeking behavior that belies my outward Mr. Rogers exterior.) I like theatre-Rent, Cats, Phantom, Chorus Line—and opera but like playing Blackjack in Vegas, live Boxing and take Tae Kwon Do and Yoga, go figure.

It is with these written contradictory revelations in mind that I can tell you that Do Fries Go with That Shake? is a song by George Clinton and Parliament (and a popular catcall in Flint’s 1970s Grand Traverse circus) and was even more effective as a marketing strategy by McDonald’s as related in John Love’s book McDonald’s: Behind the Arches. In the simplest re-telling of the McDonald’s version of the concept, with every order the counterperson says do you want fries with that (shake)? The margin on French Fries may only be 5%, but if you have sales in the tens of billions of dollars then 5% is a whole lot of coin. The modern implementation of “fries with that shake” is do you want to “supersize” your order? Again the idea is that for .59 cents you get a bucket sized fountain drink which costs almost nothing extra as the true costs are probably in the labor and the cup where fountain drinks are concerned, but for the average order it represents about a 10% increase in sales. Again, 10% across billions of dollars is serious dough. These are really simple, genius, and effective sales strategies.

Now whether it is fries with shakes, supersize me, or biggy-sized orders, the result is an effective sales synergy. The customer gets substantially more product at a fraction of the price, suppliers sell more supplies, and revenues are significantly increased. Synergy is where different entities cooperate advantageously for a final outcome. The final outcome in the fast food example is that everyone is pretty happy. Synergy is a term attributed to Buckminster Fuller—the Bucky (geodesic) dome guy (see Figure 1). Synergy is a pretty cool concept, and in my round about way synergy, solution synergy rather than sales synergy, is what I want to talk about.

Figure 1: The Montreal Biosphere by Buckminster Fuller, 1967.

Supplier, Developer, and Customer Synergy, or, Avoiding U-Tweaks and Ah-Reports

There are two recurring problems that software developers see over and over. The first is customers want to tweak GUIs, and the second is that customers often want quick reports. Call these problems UI Tweaks and Ad Hoc Reports. For short let’s use “U-Tweaks” and “Ah-Reports”.

The challenge with U-Tweaks is that developers and customers can negotiate, often a lot, during development to get the UI right, or contrive some sort of user-customization feature. The first U-Tweak—haggling—can kill a schedule. The second U-Tweak—user customization widget—can be very expensive to contrive, is seldom along the main deliverable path, and ends up being a distraction. Tragically, having experienced this first hand, a lot of good will can be chewed up during negotiation and on-the-fly customization tools can be kludgy (because they often aren’t part of the original plan).

The challenge with Ah-Reports is that developers and customers can negotiate, often a lot, during development over which reports to include in the budget and what to put in them, or contrive or incorporate some kind of end-user reporting system. The first Ah-Report solution, negotiation, means some part of your constituency doesn’t get their report, resulting in a semi-satisfied customer collective. The second ah-report solution, end-user reporting, means you have to build or buy a tool and provide training. Building, buying, and training on an ah-reporting system can be a budget killer too.

The solution: buy tools at a fixed cost that incorporate U-Tweaking and Ah-Reporting built in. Think Developer Express. DevExpress’ suite of controls have built in features that address scenarios that make it very easy to allow end-user customization and ad hoc reporting. Three such controls or capabilities are readily available. One of the first is the LayoutControl, a second is the PropertyGridControl, and a third is the built-in ability to print the contents of control based on the PrintingSystem and PrintControl. The LayoutControl is based on the concept of grouped regions. Place container controls like, the XtraGrid or XtraEditor controls in a LayoutControl and the alignment and organization are managed for you. The added benefit is that the developer can easily arrange the controls at design time, and the end-user can re-arrange the layout or visible controls post-delivery. The result is that the end-user, on a user-by-user basis can rearrange the layout, hide or show fields, and create a visual layout that makes the data more meaningful to them without developer intervention or additional cost. (All of this happens with deployed, running code.) Additionally, the user can change their individual layout (or layouts) and restore that layout with a simple file save and open operation. The next control, the PropertyGridControl, will let the user change properties at run-time, effectively changing the appearance of a form. (For more on the PropertyGridControl see my blog Imagineering with the PropertyGridControl at http://community.devexpress.com/blogs/paulk/archive/2010/03/23/imagineering-with-the-propertygridcontrol.aspx.)

Changing structural layout or property settings through a visual interface (without being able to break the application or affecting other users) is the equivalent of designing and ad hoc report, and ah-report. There is one piece missing: turning the digital UI representation of the data into a printed or PDF report. Fortunately, the core printing system available through the PrintControl, PrintingSystem, or these capabilities built into the various controls, like the LayoutControl, printing a screen that represents an ad hoc report requires a line of code.

For the modest cost of DXperience you get dozens of great controls and ad hoc end-user customization and reporting (U-Tweaks and Ah-Reports). This is one of those times where a video really illustrates the simplicity and power of these features, so a video on tv.devexpress.com will follow. The example that follows walks you through the basic steps, demonstrating the LayoutControl and some screen (snap) shots that show you some basic layout configuration changes and an idea of what the printed representation of the control will look like.

To create the basic demo follow these steps:

1. Create a Windows Forms project
2. From the Navigation & Layout tab of the Toolbox drag and drop a LayoutControl on the Form
3. Dock the LayoutControl to the Form
4. From Visual Studio’s Data menu select Add New Data Source
5. Step through the database wizard and configure a data source for the Northwind Employees table
6. Open the Data Sources viewer in Visual Studio and from the drop down for the Employees table click the Details option—see Figure 1
7. Drag and drop the Employees data source onto the LayoutControl; in Details mode this will have the effect of painting individual labels and edit controls in the LayoutControl—see Figure 2
8. Using the Details view option will cause a binding source, data source, navigator, and controls to be added to the components tray for the form
9. Select the employeesBindingNavigator and change Dock to Bottom—it is shown at the top in Figure 2
10. Open the Data Sources view, expand the Employees dataset, and change the control type for Photo to PictureBox
11. Drag and drop the Photo column onto the LayoutControl; the LayoutControl will automatically add a label and position the photo
12. Again select the employeesBindingNavigator. Click the Add ToolStripButton and add a Button to the navigator
13. Change the new ToolStripButton’s Text property to Print and DisplayStyle to Print
14. Double-click the Print ToolStripButton and add a line of code that calls the LayoutControl’s Print method
15. Run the application—see Figure 3—and click Print-see Figure 4; you effectively have a workable application with basic reporting capabilities

Listing 1 contains the (almost no) code for the solution. Keep reading because the important part—end user customization is where things start to get more interesting.

 
Figure 1: The Data Sources view lets you choose between grid or details mode; selecting Details mode will have the effect of rendering a GUI as individual edit controls.

Figure 2: With a couple of mouse-clicks you have a basic editing form.

Figure 3: A basic, (almost) no code solution.

Figure 4: The basic output is not quite WYSIWYG, but for no touch reporting it is functional.

Listing 1: The sample requires almost no code.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace LayoutControlWithPrinting
{
  public partial class Form2 : Form
  {
    public Form2()
    {
      InitializeComponent();
    }

    private void employeesBindingNavigatorSaveItem_Click(object sender, EventArgs e)
    {
      this.Validate();
      this.employeesBindingSource.EndEdit();
      this.tableAdapterManager.UpdateAll(this.northwindDataSet1);

    }

    private void Form2_Load(object sender, EventArgs e)
    {
      // TODO: This line of code loads data into the 'northwindDataSet1.Employees' table. You can move, or remove it, as needed.
      this.employeesTableAdapter.Fill(this.northwindDataSet1.Employees);

    }

    private void toolStripButton1_Click(object sender, EventArgs e)
    {
      layoutControl1.Print();
    }
  }
}

The statement layoutControl1.Print is the only line of code you have had to write at this point. Now, without argument from me there are some users that would be satisfied with an application like this—basic edit screens and simplistic reporting-and some others that wouldn’t. If you want total control then you can always use XtraReports and design reports. You can also use design time features to tweak and enhance the basic default layout. But let’s stick to the theme of what your end-users can do by themselves with this basic out of the box solution.

If your right click over the region where the LayoutControl is you can select Customize Layout. This small dialog has tool buttons for opening saved layouts (.xml files), saving a layout as XML, and Undo and Redo buttons. The Hidden Items tab supports adding spaces, Labels, Separators, and Splitters. The Layout Tree View tab shows you everything on the layout control as a tree of items, making it pretty easy to find any item. With the Customization dialog open the form is in customization mode and additional context menus are available. Hide Customization Form, Rename, Hide Text, Text Position, Hide Item, Group, Create EmptySpace Item, and Size Constraints. Here is a brief description of what these options do/what behaviors they support:

• Hide Customization Form hides the Customization form and takes the form out of customization mode
• Rename supports renaming text elements {i.e. changing label text}
• Hide Text can be used to hide labels
• Text Position repositions the edit control’s label relative to its associated editor
• Hide Item hides the item from the user and places it on the Hidden Items tab
• Group creates a new group item which is an additional area for managing layout
• Create EmptySpace Item creates an empty region which can also be used for layout
• And, Size Constraints supports locking and resizing items

 
Figure 5: Built-in is end user customization and the ability to save and restore layouts.

Figure 6: Additional menu items for customization.

Keeping in mind that an end-user can customize as much as they want without hurting anything because the user can stop and restart the application or use the Undo button to put things back where they were. Once a layout is the way a user wants it they can save the layout on their workstation (and layout XML files can be shared if desired). The idea here you can encourage experimentation.

To see what your users will see try a few simple customizations:

1. Right click to show the Customization dialog
2. Right click over the photo region and click Group
3. Click on the group item header and drag and drop the group to the top left corner—see Figure 7
4. Add an Empty Space under the photo to compact the photo region
5. Right click where the Text Photo is and select Hide Text
6. Right click over the group item label, select Rename and change Item0 to Photo
7. Right click over Employee ID and select Hide Item (relational database keys aren’t that important for users or reports)
8. Use the same step to hide the Photo Path and Report To items
9. Create a Group around the Last Name item, drag all of the personal information into that group and rename the group Personal
10. Create a Group around the Address item and drag other address information into that group, and rename that group Address
11. Close the customization window and click the Print button—see Figure 8

Figure 7: No-code customizations require a little knowledge of just a few menu items and a little dragging and dropping.

Figure 8: With a few minor changes the user can create a customized layout and with the built-in printing capabilities effectively have a personalized report.

Spending a few minutes on a layout can dramatically change its appearance. If you use the save feature then each user can restore their personalized layouts or share them by sharing the XML file.

A good strategy for selling your customers on this feature is to walk one or two key super users through a demo. Try adding splitters, show them how easy it is, and then let them try it. End users U-Tweaks and Ah-Reports sort of sell themselves because it offers localized control, and localized control can resolve a lot of potential difficulties of the sort—what if I want changes? what if accounting views the data one way and personnel another? can I create an ad hoc report? Sometimes we just need to print the screen can we do that? can we quickly hide sensitive data? The answer is yes. This is solution synergy. Customers get some of what they routinely ask for, DevExpress has incorporated the capability into our products, and you adroitly manage costs, passing features onto your customers. Solution synergy with DevExpress. (You don’t have to tell your customers that these features were part of a toolset. Let them think you are brilliant; we don’t mind.)