How To Impress! Pimp Your Mail Forms (with source code).
UI personalization is not a trend. It is an ever-growing feature of ERPs.
Today’s SAP standard opportunities for personalization are not numerous, but it gets better. Maybe you have noticed that our favorite giant is trying very hard to adopt a more user-friendly and customizable approach through initiatives such as the SAP UX Explorer. And then, you probably also know that all of its biggest UI successes (Fiori UX, UI Theme Designer, etc.) are based on SAP UI5 – the SAP user interface for HTML5. Take SAP Personas, a drag-and-drop approach to modify SAP GUI screens, for example: although you can apply your personalized themes directly to SAP GUI Desktop, the only way to create or manage these is to work with SAP HTML (also known as the WebGUI).
Go talk to Webdesigners.
In the future, personalizing SAP systems will come from the Internet. But we are not quite there yet. The SAP “Simplification Process” takes time, and is not different to any other webdesigners’ 5 steps process : 1) Assessing customers’ needs; 2) “Wireframing”, which is basically a skeletal framework of a website; 3) Choosing the right tools; 4) Designing a masterpiece; and 5) Customizing the website to help clients handling it properly.
(Source: “SAP Screen Personas is Part of a Broader UX Improvement Process”)
What about today?
In the meantime some interesting tools tend to be undervalued, despite being excellent ways to play around with SAP and HTML5/CSS3. Do you frequently exchange e-mails with customers or partners? Do you have a standard ticketing service? Do you care about your corporate culture? Well, let’s say you use ITSM-ChaRM and know about Mail Forms. If you already use them, let me say “Congrats!” because my guess is that not so many people do so.
However, there is still little chance that you’ve ever tried tweaking the source code of your forms. Why should you? I mean, it doesn’t really seem like you have to, since SAP CRM comes with a “What You See Is What You Get” editor (WYSIWYG) that features Image/Link insertion, Fonts formatting, and Spellchecker. My point is, Mail Forms are the typical SAP Product: incredibly powerful, yet deceptivly ugly-looking. The World Wide Web is a visual medium, and customers now expect beautiful templates from anything that is browser-based.
(Click the orange button to see the source code)
We need a good example of that. So, let’s say you and I are the founders of startup “MailFormTemp” (extra 10% shares for me, of course). We like our employees to be involved, and want to show off with Mail Forms being integrated into ITSM. We could go either with the previous standard template, which is okay by the way, or you could try sending something like this:
(This takes less than 15min, once you’ve figured out how CSS works)
SAP CRM+CSS 101
First you need to understand that HTML and CSS are two different languages, and therefore linking the CSS content from an external file makes it maintenance friendly. However there is no way to work this way in SAP CRM, so you will have to embed your CSS directly into the HTML code <head> (between <style> and </style>). The browser Google Chrome is extremely helpful to modify templates, since the “Inspect element” option allows you to see directly on the screen what happens when changing the source code.
Customers matter. So does corporate culture.
The previous example shows you the possibility of sending beautiful e-mails to your employees (ie. developers), as well as your customers. I believe SAP is key to your clients’s needs. But your clients also care about their image, and partners’ image. The HTML and CSS languages are great opportunities to polish yours. You don’t even have to code yourself, because the Internet is full of resources to help designing your very own Mail Form!
Proof of this is that you will find a free HTML/CSS mail source code as an attached file.
Thank you Alexandre SABATIER v.helpful article.
A good article.Take it. But it seems not so many requirements about this.
Great and intriguing article! Thanks for sharing.
Unfortunately the mail source code is not available any more. Can you post it again?
What if I wrote Inline CSS? Do I have to change it to internal CSS?
I came here when searching for an option to format E-Mails with central CSS throughout the whole CRM-System. This is not exactly what I searched for, but nethertheless this feature is very interesting. Unfortunately the download is still missing. Could you please attach it once again? Thank you!