We’ve had templates for some time, but they’ve always been this precarious beast. We are pleased to announce that you can now assign your templates to a specific lily.

At the time of this writing, templates are built out of HTML with data placeholders sprinkled in. We will eventually create a visual editor for templates. If this feature is important to you, you can vote on the feature here: https://hoppa.io/suggestions/visual-editor-for-templates/

For security, templates are only allow a minimal set of HTML when saved. We strip out all the bad stuff that could be harmful to other users. Unfortunately, this means that you are limited in what you can do. You cannot enable javascript in your templates. If this is a feature you need, you may want to do your own integrations with displaying to your users. In any case, shoot us a message and let us know what you are thinking.

Templates are specific to a project (pond). There are currently no global templates.

To create a template, select a project (pond) you want to edit.

In the header, you will see a dropdown from Templates

Click on Create Template to create a new template.

You will be presented with an editor.

 

  1. Select the project that this template should associated with. It will default to the current project.
  2. Next, give your template a name to help you identify it.
  3. Last modify the HTML to your liking.

Templates pull in the Materialize framework by default (http://materializecss.com/). You can check that out for ideas on how to structure your code and what is possible.

Templates also use what is called Mustache syntax to show data placeholders. These data placeholders as specified by two curly brackets on each side of the name of the variable.

{{title}}

Your templates should be able to do this. If they don’t, contact us because something is wrong.

For the data junkies, our Mustache conforms to the mustache spec: http://mustache.github.io/mustache.5.html
Here’s some more info: https://mustache.github.io/#demo

Handlebars is mostly compatible and offers some good tutorials, but we do stick with the mustache spec, so not all examples will work: http://handlebarsjs.com/

We do allow the <style> tag so you can add classes to your elements and further style them with CSS.

After you have created your template, click SAVE.

Your project now has a new template.

  • Click on the name to edit the template.
  •  Will duplicate your template into the same pond. Edit the template and change the pond to move it to another pond.
  •  Will delete your template.

 

If you just want a pretty template and don’t care to learn CSS or HTML or Mustache, let us know. We have some talented designers who can assist you.

NEXT: ASSIGN YOUR TEMPLATES TO LILIES