The actual implementation of this functionality is fairly simple. First, you add the buttons, drop down 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:
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.
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...";
Choice := @Right(MoreActions; "...Set ");
Selection := "col" + Choice;
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...