---
title: "How to Edit Messages in the Browser While Developing Play! Framework Templates"
date: 2013-05-08T21:26:50+00:00
author: "poornerd"
tags: ["aloha-editor"]
canonical: https://www.poornerd.com/2013/05/08/how-to-edit-messages-in-the-browser-while-developing-play-framework-templates/
source: Raw Markdown twin of the HTML article; content is the original source.
---
As a followup to my recent experiments to inline editing of content blocks while developing Play! Framework templates, I decided to focus on Messages this week.  Messages are basically Resource Bundles with Texts to be used in the Application.

This is what I wanted to accomplish:

  1. <span style="line-height: 13px;">No changes required to the Play! Framework Scala Templates</span>
  2. Use an inline HTML5 editor to edit the messages directly in the rendered template in the browser
  3. Save (update) the message file directly in the conf directory of the application

I modified my <a href="https://github.com/poornerd/play-aloha" onclick="javascript:pageTracker._trackPageview('/outbound/article/github.com');" target="_blank">play-aloha</a> project on github (<a href="https://github.com/poornerd/play-aloha" onclick="javascript:pageTracker._trackPageview('/outbound/article/github.com');" target="_blank">https://github.com/poornerd/play-aloha </a>) for the first requirement, by adding a Messages template, so that the typical `@Messages("label.title")` tags used in the templates would be rendered by my tag instead.  If the `play-aloha.admin=true` is set in the `application.conf`, then the `Messages.scala.html` template renders a `<span>` around the message with an id that contains `"message."` + the key of the message.

<pre class="brush: plain; title: ; notranslate" title="">@(key:String)
@if(Application.isAlohaOn()) {
  &lt;span id="message.@key" class="editable"&gt;
}
  @play.api.i18n.Messages(key)
@if(Application.isAlohaOn()) {
  &lt;/span&gt;
}
</pre>

I also added the `class="editable"` so that the <a href="http://www.aloha-editor.org/" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.aloha-editor.org');" target="_blank">Aloha Editor</a> which I already integrated into the project would automatically make the <span> editable.

So for example this code in the template would make the messages with the given keys editable:

<pre class="brush: plain; title: ; notranslate" title="">&lt;h2 class="featurette-heading"&gt;
  @Messages("label.featurette1") 
  &lt;span class="muted"&gt;@Messages("label.featurette1Mute")&lt;/span&gt;
&lt;/h2&gt;
</pre>

[<img class="aligncenter size-full wp-image-308" alt="message-editing" src="https://www.poornerd.com/wp-content/uploads/2013/05/message-editing.png" width="1000" height="430" srcset="https://www.poornerd.com/wp-content/uploads/2013/05/message-editing.png 1000w, https://www.poornerd.com/wp-content/uploads/2013/05/message-editing-300x129.png 300w" sizes="(max-width: 1000px) 100vw, 1000px" />](https://www.poornerd.com/wp-content/uploads/2013/05/message-editing.png)

&nbsp;

In the controller method which handles saving the edited content from the Aloha Editor via an AJAX Request, I check the id to see if it starts with `"message."`.

<pre class="brush: plain; title: ; notranslate" title="">if (contentId.startsWith("message.")) {
            // save as message
            saveMessages(contentId.substring(8), content);
        } else {
            // save in Template
            if (templateFilename != null) {
                saveToTemplate(fullTemplateFilename, pageId, contentId, content);
            }
        }
</pre>

If it does, then I use the rest of the id (which is the message) key, to lookup and save the new message in the messages file.

<pre class="brush: plain; title: ; notranslate" title="">#test
label.featurette1Mute=Google is cool!
label.featurette1=Chrome
</pre>