Message Previews allows a user to see a message before sending it. This is typically used as a way to preview and refine a message, most commonly used if crafting a message with structured information. For example, imagine sending a Calendar invite, and being able to see what the invite will look like before sending it.

Basics of Previewing

While there are many places one could render a message, its assumed here that your preview will render within a Message List. Messages within a Message List are typically driven by a layer.Query instance. So, how does one get a Message into the Query without sending it?

var message = conversation.createMessage("hello there");
message.presend();

Instead of sending it, we call presend() (which will be refered to in this document as presending the Message).

Presending causes a Message to be noticed by any suitable Queries, but does not make any attempt to send the message, it is local only. A message can be canceled simply by calling:

message.destroy();

Or sent once the user is satisfied by calling:

message.send();

Finally, any changes made to the message’s MessageParts should be reflected in the preview:

var part = message.findPart(part => part.mimeType === 'application/vnd.layer.text+json');
part.body = JSON.stringify({text: "I edit, therefore I change"});

The above code will trigger a change that causes the preview to be rerendered. How?

  • The MessagePart that you have editted will trigger an event on having its value changed
  • The Message that manages the Part will trigger a messages:change event when its part has changed
  • The Query that contains the Messages will trigger a change event when any of its Messages change
  • Your app will presumably rerender based on the change event
Changelog