Thursday, January 10, 2008

SnTT: Canceling an Embedded Editor Transaction

If you use embedded editors in your design, you may have run across this issue. The user starts to edit a document, only to decide that they want to select another one from the view or cancel edit mode. Unfortunately, this isn't handled very elegantly by Notes. What you get is the error message shown below.


Basically, once you start editing a document in an embedded editor control, Notes expects you to save the document. Since this is the case, we can use this fact to make a simple addition to our embedded editor. Here's my approach.

Create a new action (via a button, link, whatever makes sense) to allow the user to cancel the edit transaction. Since Notes needs the document to be saved, add some computed for display (CFD) fields on the embedded editor form to hold the initial values of the fields you are exposing for editing. Set the value of the fields like this:

@If(@IsDocBeingLoaded; field_1; @ThisValue)
@If(@IsDocBeingLoaded; field_2; @ThisValue)
@If(@IsDocBeingLoaded; field_3; @ThisValue)
etc.

When the doc is opened in the embedded editor, these CFD fields will get set to the starting values of their corresponding fields. If you want to cancel the edit transaction, you just need to set the fields back to their initial values, then save the doc. Something like this:

@SetField("field_1"; field_1_OnOpen);
@SetField("field_2"; field_2_OnOpen);
@SetField("field_3"; field_3_OnOpen);
@Command([ViewRefreshFields]);
@PostedCommand([FileSave])

This is an elegant way to handle a fairly common scenario when using embedded editors.

Labels: , ,

permalink | leave a comment

Thursday, March 01, 2007

"CoolMail" Demo Deconstructed

OK...A couple of people asked me about the post from last Friday, so I thought I'd detail the technique here. There are a couple of other things going on in that movie which I left out and also a reader suggested a neat trick which I have some future ideas for.

The actual implementation of this functionality is fairly simple. First, you add the buttons, drop down box, , etc., to the form. In the picture below, you see the button to add and remove the star and a combo box.



Remember that these elements are on the form and will be exposed in the embedded editor. Thus, the code should be written with this frame of reference in mind. For example, the code behind the "Remove Star" button is simply:

@SetField("Star"; "0");
@PostedCommand([FileSave])

On the UI form of the application, I have a simple embedded view/embedded editor combo. Again, there's really nothing special happening here, just the standard functionality where the embedded editor is wired to the embedded view. The only difference is in the way the form is exposed. Usually, you think of embedded editors exposing fields that the user can edit text in. In this case, I'm just showing some controls to do something to the underlying document. All of the design elements on the embedded form are hidden when embedded except for that top line with the buttons.


Et voilà!

Here's something you might have missed. See the links on the side and how the highlighted element blends right into the container for the embedded view? This is kind of like the idea of vertical tabs. Unfortunately, doing this with a tabbed table isn't so easy. I think the implementation in the Notes client is not really that good. Instead, I did this with a simple embedded outline. This is a nice technique, since it affords you so many formatting options. I placed the outline in a table and abutted it to the container cell, then just used an image well to color the selected element. The sweet thing about Notes, of course, is that you could do this in several ways.


I was also asked about coloring the lines in the view, so here is my approach. First, I created a color column in the view and set the value to the field called "num_ViewColor". This is a field on the embedded form whose value is computed. The formula behind the "num_ViewColor" field is:

colRed := 255 : 225 : 220 : 0 : 0 : 0;
colBlue := 224: 241: 255 : 0 : 0 : 0 ;
colGreen := 224: 255 : 223 : 0 : 0 : 0;
colYellow := 255 : 255 : 208 : 0 : 0 : 0;
colClear := "";

@If(MoreActions = "More actions...";
@Return(@ThisValue);
"");

Choice := @Right(MoreActions; "...Set ");

Selection := "col" + Choice;

@Eval(Selection);

Basically, what this formula is doing is checking the "MoreActions" field, which is the combobox exposed in the embedded editor. If the "MoreActions" field is set to its default value, then the formula just keeps the value of "num_ViewColor" as is. If, however, the user selects a new color from the combobox, the color name is extracted from the user's choice and @Eval sets the new value of "num_ViewColor" to one of the options defined at the beginning of the formula.

One other trick is happening here. If you make a change to an embedded editor and then try to select another document in the embedded view without saving, you get the following error message:


To avoid this, I save the document on PostRecalc event which gets triggered on every change of the combobox. In addition, to make sure the combobox gets reset to "More actions..." after each time the user makes a selection, the QuerySave event includes the line @SetField("MoreActions"; "More actions...").

To wrap up, I wanted to share an idea that was sent to me by Marcos Romero. He commented that you could also perform the action to turn the star on and off by clicking on it, just like in Gmail. To do this, you would use an editable column and InViewEdit feature of the view. To get some insight into how this works, check out the "Rules" folder in your mail file. The icon that denotes whether or not a rule is enabled can be clicked to toggle the rule on or off. This is a cool concept and I have a few ideas of where this could be really useful.

I hope this helps and I look forward to hearing from you on how you might use similar techniques. Until next time...

Labels: ,

permalink | leave a comment

Friday, February 23, 2007

More Embedded Editor Fun

While playing around with embedded editors today, I came up with another cool idea. When you have an embedded view and you want to programmatically change documents, what can you do? Sure, you can put some action buttons on the embedded view, but that's kind of limited. What if, instead, you wanted to do something like in Gmail, where you can select a pulldown value to trigger some action on a document? Actions aren't going to help you too much then. Enter the embedded editor. On your form, simply add the design elements you want to use to modify the document. In the example below, I have two buttons and a select box. All of the form elements are hidden when embedded except for this line. When the embedded view is wired to the embedded editor and the user selects the document in the view, the buttons and select box appear. The code behind the elements can be as simple or complex as you want...they are just running on the selected doc. A simple yet elegant solution...


Click on the graphic for an animated version of this technique in action.


Enjoy the weekend everyone!

Labels: , ,

permalink | leave a comment