Its been quite a long time since i have been writing on medium, I thank everyone for the support being provided to my previous articles.
I have come across a new scenario which i feel the need to share & maybe be helpful to people in similar scenarios. As we all know that working around projects/clients in freelancing tends to be more painful & off late i have been going thru similar patterns. A scenario that client kept changing was certain templates, in my case there are several types of templates what here i’ll be addressing is the SMS templating concept, the SMS was being sent from a server side code with a specific template but the client kept changing the format of the template N no. of times & at Nth period of time which just created a chaotic environment & haphazard development environment making things unstable. So amidst all the chaos we eventually came to a conclusion to automate this by storing & retrieving the template dynamically from database so that it can easily modified thru some admin dashboard.
Every template would primarily constitute of 2 parts, one the template format & two the template data. So we came up with a solution that would provide the end user with an editor to define the template, a variables section to provide inputs on what data could be embed into the template & a preview section to provide the resultant information on the same. (ignore the mustache)
This is what we would be building our template engine, would compose of 3 parts.
- editor
- preview
- available fields
We are going to use reactive forms here & subscribe to value changes service to update the preview text.
templateText : this is the variable used to have the preview text
editorData : will be the form control for text field
fieldsAvailable : will contain the list of fields available to be used with a specific template type. The structure here we have is a key which is the variable identifier & example is the sample text for preview. A similar structure of fields will be defined in backend except for the difference that instead of example we’ll have the actual value instead.
OnInit we’ll be subscribing to the value changes of control, debouncing it for performance reasons.
UpdateText will replace all the %variable% with their corresponding example texts.
On click of the buttons we’ll copy the variable text for user convenience using angular cdk & copy it to the clipboard. That’s it
The html is just a replica of the functional part, textarea to input template format, preview binding the templateText & the buttons on click just copy the text. A working demo is available on stackblitz, feel free to reach out or if seeking out on more templating solutions like email & pdf’s as well. Clap for the same & do let me know in the comment on which templating engine you would like to see next.
Happy Coding :-) ❤
