Exciting changes to Inline Editors


Daniel Jordan
Created March 13, 2018

One change we are going to be making shortly is replacing the inline editors - or ‘WYSIWYG’ editors - throughout the system. We will shortly use Froala editor wherever there is rich text to be edited.  I hope you agree with me that Froala is a clean and modern editor and I hope you enjoy using it.

What's Coming?

You will see the changes in the following pages:

  • Update Footer for Documents
  • Update Bank Details for Invoice
  • Update Email Template
  • Email Template Editor (in each module)
  • Terms and Conditions editor within the document template editor
  • Edit Email page

Most pages are seen during the initial setup phase, so for everyday users, it will be the email page that you will come into contact with the most.

You’ll see a number of functions that are useful for crafting beautiful emails. You can upload images, create hyperlinks and use tables. There is a small selection of fonts, colours, alignments - essentially everything you’d want from a ‘wysiwig’ editor.

If you’ve got coding chops and want to design your email templates using HTML and CSS, you’ll see you can easily access the code underlying the content by clicking the code button. I particularly like this view, as it features syntax highlighting from Code Mirror.

There is no inline spellcheck functionality; if this is important to you I thoroughly recommend Grammarly’s Chrome extension which will have the same effect.

Inserting variables into documents

One important feature that has changed slightly is the method by which variables are inserted into email templates.

Say you are creating a Sales Order email template.

1. Navigate to the Settings page.
2. Click on Sales menu
3. Click on Email Templates.
4. Choose a template to edit.

You will see that the default template is presented, although certain fields are replaced with variables: placeholders that will be populated dynamically with data from the sales order. These variables are surrounded by percentage symbols. For example, %%ATT:FirstName%% will insert the first name field from the Sales Order into your email automatically.

With our new editor, simply type ‘%’ to see a dropdown list of all the potential variables you can use in your emails. It’s as easy as that. The list of fields available to you will be available in the documentation.

The possibilities of this are pretty cool; maybe you could create an email to notify your customers of their credit balance. Or include the payment terms in bold when you send an invoice. Or include the tracking number of a shipment in a confirmation email.

But wait, there’s more

So there you go, a shiny new editor. We’re taking time and thought to make Cin7 clean, modern and enjoyable to use, and we’re only getting started really. This is also the first piece in a larger puzzle that will allow you new levels of customisation…but…I’ll tell you more about this soon  .