I'm working on a system where we rely a lot of "admins / managers" emailing users from the database. One of the key features is being able to email several people at the same time, with specific information relevant to each of them. Another key feature is to be able to hand-craft emails, because it tends to be be necessary to slightly modify them each time, but having a basic template saves a lot of time.

For this, we have the typical "templates" solution, where we have a template that looks kind of like this:

Hello {{recipient.full_name}},

Your application to {{activity.title}} has been accepted. 
You have requested to participate on dates {{application.dates}}, in role {{application.role}}
Blah blah blah

The problem we are having is obviously that (as we expected), managers don't get the whole "variables" idea, and they do things like overwriting them, which doesn't let them email more than one person at a time, assuming those are not going to get replaced and that the system is broken, or even inexplicable things like "Hello {{John}}".

The big problem is that this isn't relegated, as usual, to an "admin" section where only a few power users have access to editing the templates that are automatically send out, and they're expected to know what they are doing. Every user of the system gets exposed to this problem.

The obvious solution would be to replace the variables before showing this template for the user to edit, but that doesn't work when emailing several people.

This seems like a reasonably common problem, and we are kind of hoping that someone has already solved it.

Have you seen anywhere/created/can think of good solutions to this problem?


What I ended up doing based on Daniel B's answer was detecting, based on the cursor position, and the position of {{ }} in the code whether the user is currently "inside a variable" or "outside". In inside, I show a little piece of text below the big textarea explaining that this is going to get replaced, and that they can remove it completely if they want, but they can't edit it.

I do this onClick, onChange, onKeyDown, onKeyUp. For the "key" events, if we're inside a variable, I only return TRUE if the keyCode is one of a few "navigational" keys. Otherwise, I return FALSE, which effectively prevents the edition of that variable.

It's not perfect, but it was very cheap, and seems effective.

  • Comment to people with more rep than me: (I'm new to UX) Could you please tag this question? All the tags I'm thinking of don't exist here yet: templates variables user-interface user-friendly user-editable – Daniel Magliola Jul 3 '12 at 9:18
  • How are these templates presented? Is it just plain text in an editor? – ChrisF Jul 3 '12 at 9:34
  • Right now, yes, when you select a bunch of people and click on "Message", you get a "pop-in" dialog with a big textarea that has the template content right there. It's actually markDown, although obviously our users are not used to it, it looks like plain text. We don't have a wysiwyg editor, and we're open to using one if it'll help, but by itself it doesn't, people will still not understand the variables – Daniel Magliola Jul 3 '12 at 9:47
  • The root problem here, is that your managers not understanding the variables. Unless you fix that issue, your throwing solutions at the symptoms. Not all problems need a coding solution. – Darknight Jul 3 '12 at 10:27
  • Agreed. I'd love to be able to educate people, but we can't ask them to read manuals, obviously, so I'm looking for ideas on how to make it understandable to them easily. Ideas? – Daniel Magliola Jul 3 '12 at 10:33

By request from the comments in ChrisF's answer, here's one solution I've used in the past:

  • Use a WinForms RichTextBox to allow the user to edit the text of the template.
  • Allow drag / drop (or other inserting) of variables or placeholders into the RichTextBox.
  • Disallow editing of the variables themselves by checking around the current place of the cursor for the delimiters of your variables (the {{ and }} symbols, in your example).

My implementation ended up looking something like this:

RichTextBox example

It has optional highlighting of the variable to differentiate it from the standard text.
The variable delimiters are actually there, they just happen to have the same foreground and background colours.

Obviously, this is quite different to your implementation, which is HTML-based. I would probably look into how Gmail's editor is implemented; it seems to be similar to a textarea, but is able to have inline images (smilies, etc), which is similar to the behaviour you are looking for.


I'd consider changing how the template is presented to the user so that you can make the parts that will be changed by the code non editable. Something like this:


The bits that you don't want the user to change are now not editable. You could include a close button so that they can remove the items if they don't need them. You can also include explanatory text and/or tooltips to explain what the {{...}} bits mean and why they should be left alone.

Using something like a Silverlight/WPF WrapPanel for each paragraph might give you something that allows each part (editable and not editable) to flow as the user controlled text grows and shrinks.

  • The main problem with this is that I can't make the textboxes both "inline" and "multi-line"... And thus the layout would extremely weird... If you could edit that "Dear" and the variable would move right, and there was another textbox to it's right that magically wrapped, this would be AWESOME. But I don't see how I can implement this. The alternative we've been trying to work with is having "non-editable" blocks inside a big textarea, so that you can't change their contents, but you can remove them (with an "X"). We haven't been able to make this work. Have you seen it somewhere? Thanks!!! – Daniel Magliola Jul 3 '12 at 9:58
  • @DanielMagliola well something like a Silverlight/WPF WrapPanel for each paragraph might give you something like you want. – ChrisF Jul 3 '12 at 9:59
  • @DanielMagliola in the past, I've been able to achieve this with a WinForms RichTextBox. The "variables" could be drag-and-dropped into the richtextbox, and styling would be applied to it to make it clear it's a placeholder. The tricky part is preventing changes to the variables. One solution is to check around the current cursor placement for your tag characters, and to disallow editing if that's the case. – Daniel B Jul 3 '12 at 10:33
  • I forgot to mention this, this is an HTML app, but still that idea is applicable. I like the "checking cursor position and disallow editing idea", thank you for that!! – Daniel Magliola Jul 3 '12 at 10:37
  • @DanielB: Actually, can you please make that a response, I think you have the winner! Thank you!! – Daniel Magliola Jul 3 '12 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.