Magpi Reports Now “What You See Is What You Get” (WYSIWYG)

Magpi
Magpi Mobile Data Collection
4 min readMay 30, 2017

We recently added a significant enhancement to our Magpi Reports data visualization system: WYSIWYG editing (i.e. “what-you-see-is-what-you-get”). WYSIWYG basically means that as you’re editing your report you can see exactly how the text will look. From the Wikipedia definition:

WYSIWYG (/ˈwɪziwɪɡ/ WIZ-ee-wig)[1] is an acronym for “what you see is what you get”. In computing, a WYSIWYG editor is a system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product,[2] such as a printed document, web page, or slide presentation.

Listening to What the Users Want

When we released Magpi Reports last year, we didn’t realize how many users would want to change fonts, colors, and sizes for the text on their reports — so we just built-in a nice-looking set of default text appearances. Here’s an example of the default caption (i.e. heading) for a standard Magpi graph showing the progress of a data collection activity:

report-element-no-subtext

We still think this is nice as a default font, but users have spoken, and told us that they very often need to add additional text with different formats. For example, they might want to add some sub-text in another color:

report-element-with-subtext

and with the original implementation of Magpi Reports, adding that subtext (in a small font, with a gray color) involved some knowledge of HTML, the programming language behind much of what you see on websites. HTML isn’t very difficult to understand, but it can be intimidating. As an example, the HTML for the text in the report element above is:

<h3><span style="font-family:arial,helvetica,sans-serif">Progress Towards Survey Goals</span></h3>

<p style="text-align: center;"><span style="color:#808080"><span style="font-size:12px"><font face="arial, helvetica, sans-serif">Preliminary data as of May 30th, 2017</font></span></span></pd

What the Users Want is WYSIWYG

In retrospect it shouldn’t have been surprising to us that users didn’t want to even think about learning what all that meant. Our users, like us, have been trained with word-processors and other systems that show you text and other elements exactly as they will appear — and we’re happy to say that we’ve heard this and revised the reporting system to provide exactly that.

In the newly-released revision of Magpi Reports (just log into our web application and click on reports to begin), instead of using the cryptic codes shown above, the user has a nice little mini-word-processor-type editor with typical menus for font and color:

report-edit-wysiwyg

IF they want to, and have some experience with HTML they can click the “Source” button to view the actual HTML code, which is still there but normally hidden:

report-edit-source

More Than Just Text

To make this new system even better, the new editor (which is an adoption of a widely-used system called CKEditor), includes many other functions, including the ability to easily insert photos or tables, special characters, or iframes (these allow you to embed videos and other web content; more on this in our next post):

wysiwyg-menu-features

Always Forward, Always Listening, Always Better

We’re glad to offer the new WYWSIWYG editor for reports, and think it’s a great example of how we always try to work: we move forward, we listen to user feedback, and then we improve the product. This isn’t just a good idea to make good software: because all of Magpi’s revenue comes from users (as opposed to grant funders and donors), we need to listen to users, every day. So keep that feedback coming!

Originally published at Magpi.

--

--

Magpi
Magpi Mobile Data Collection

Magpi is a mobile data collection, messaging and visualization system. Learn more at www.magpi.com