We have an Aware IM App where the end user can define custom messages that have variable data inserted into them. The user needs to add "tokens" like {[i]TokenName[/i]}. These bespoke messages are displayed on the screen and used for email notifications. When the message is displayed or emailed by AwareIM we swap {[i]TokenName[/i]} with the relevant BO attribute. Rather than making the user type the "tokens" we've included a dropdown in the HTML toolbar to allow them to select and insert the tokens. The following is how to extend the Kendo HTML Editor widget in Aware IM to include a customised insertHTML dropdown. The end result of this example displays to the end user like this : [img]http://173.236.13.102/forum/download/file.php?mode=view&id=473&sid=24f8c046fc44de070668145fcfd31db5[/img] You add the javascript code on the screen that displays when you click the [b]Advanced[/b] button : [img]http://173.236.13.102/forum/download/file.php?mode=view&id=474&sid=24f8c046fc44de070668145fcfd31db5[/img] And here is the code [code] // define available toolbar buttons config.config.tools = ["formatting","bold","italic","createLink", "unlink","insertUnorderedList","insertOrderedList","indent","outdent", "createTable", "addColumnLeft", "addColumnRight", "addRowAbove", "addRowBelow", "deleteRow", "deleteColumn","insertHtml"]; // define list of options and their values config.config.insertHtml = [ { text: "First Name", value: "{FirstName}" }, { text: "Last Name", value: "{LastName}" }, { text: "Event Name", value: "{EventName}" } ]; // change name of button from "insertHtml" to "Tokens" config.config.messages = {insertHtml : "Tokens"}; [/code] You can include anything as the values including HTML. [upl-image-preview uuid=17f1f608-c225-40b6-b773-c7c349794537 url=https://www.awareim.com/forum/assets/files/phpbb_migrated/1046_70a175925356ed5816ed48dddbed6f5f alt=End User Screen.png] [upl-image-preview uuid=c51d4794-aff0-4e2a-8fcb-34a01961cb70 url=https://www.awareim.com/forum/assets/files/phpbb_migrated/1046_40be9519db1e1e0416e93e97e1679c5a alt=Advanced Button.png]

Great Tip Dave. Have heard good things about you from Mark. [img]http://www.mustang6g.com/forums/images/smilies/thumbsup.gif[/img]

[quote="UnionSystems"]Here is a BSV demonstrating insertHTML[/quote] It needs to be a zip file to be attached.

Sorry ZIPPEd version of BSV really attached this time :) [upl-file uuid=38ecbab8-a194-40fd-9194-dbed856bc039 size=35.05kB]insertHTML_1.1_7_Sept_2016.bsv.zip[/upl-file]

Extending HTML Editor Toolbar with insertHTML

UnionSystems

We have an Aware IM App where the end user can define custom messages that have variable data inserted into them. The user needs to add "tokens" like {TokenName}. These bespoke messages are displayed on the screen and used for email notifications. When the message is displayed or emailed by AwareIM we swap {TokenName} with the relevant BO attribute. Rather than making the user type the "tokens" we've included a dropdown in the HTML toolbar to allow them to select and insert the tokens.

The following is how to extend the Kendo HTML Editor widget in Aware IM to include a customised insertHTML dropdown.

The end result of this example displays to the end user like this :

You add the javascript code on the screen that displays when you click the Advanced button :

And here is the code

// define available toolbar buttons 
config.config.tools = ["formatting","bold","italic","createLink", "unlink","insertUnorderedList","insertOrderedList","indent","outdent", "createTable", "addColumnLeft", "addColumnRight", "addRowAbove", "addRowBelow", "deleteRow", "deleteColumn","insertHtml"];

//  define list of options and their values

config.config.insertHtml = [
                { text: "First Name", value: "{FirstName}" },
                { text: "Last Name", value: "{LastName}" },
                { text: "Event Name", value: "{EventName}" }
            ];

//  change name of button from "insertHtml" to "Tokens"
config.config.messages = {insertHtml : "Tokens"};

You can include anything as the values including HTML.

End User Screen.png

Advanced Button.png

customaware

Great tip Dave.

Good work and thanx for sharing.

BenHayat

Great Tip Dave. Have heard good things about you from Mark.

weblike

Hi Dave,
Awesome tip.
Can you post a sample bsv? 🙂

Thank you.

UnionSystems

Here is a BSV demonstrating insertHTML

BenHayat

UnionSystems wrote
Here is a BSV demonstrating insertHTML

It needs to be a zip file to be attached.

UnionSystems

Sorry ZIPPEd version of BSV really attached this time 🙂

insertHTML_1.1_7_Sept_2016.bsv.zip

35.05kB

weblike

Thank you for posting this bsv.

And how do you use this in notifications? How you replace these tokens to get a finished message, ready for delivery?

thx.

tford

Support -- any possibility this functionality could be included in a future release?

UnionSystems

I have a Message BO that has a relationship to the Person BO and I assign the Message Subject and Body attributes to the Notification object.

This is the code I use to swap the tokens with data in a rule of the Message BO.

Message.Subject=REPLACE_PATTERN(Message.Subject,'\{FirstName\}',Message.Person.FirstName) 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{LastName\}',Message.Person.LastName) 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{EmailAddress\}',Message.Person.EmailAddress) 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{EventName\}',Message.Person.Event.Subject) 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{StartDay\}','<<Message.Person.Event.StartTime,EEEE>>') 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{StartDate\}','<<Message.Person.Event.StartTime,d MMMM yyyy>>') 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{StartTime\}','<<Message.Person.Event.StartTime,h:mma>>') 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{FinishDay\}','<<Message.Person.Event.EndTime,EEEE>>') 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{FinishDate\}','<<Message.Person.Event.EndTime,d MMMM yyyy>>') 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{FinishTime\}','<<Message.Person.Event.EndTime,h:mma>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{EventDescription\}',Message.Person.Event.Description) 
Message.Body=REPLACE_PATTERN(Message.Body,'`',SystemSettings.DoubleQuote) 
Message.Body=REPLACE_PATTERN(Message.Body,'\{FirstName\}',Message.Person.FirstName) 
Message.Body=REPLACE_PATTERN(Message.Body,'\{LastName\}',Message.Person.LastName) 
Message.Body=REPLACE_PATTERN(Message.Body,'\{EmailAddress\}',Message.Person.EmailAddress) 
Message.Body=REPLACE_PATTERN(Message.Body,'\{EventName\}',Message.Person.Event.Subject) 
Message.Body=REPLACE_PATTERN(Message.Body,'\{StartDay\}','<<Message.Person.Event.StartTime,EEEE>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{StartDate\}','<<Message.Person.Event.StartTime,d MMMM yyyy>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{StartTime\}','<<Message.Person.Event.StartTime,h:mma>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{FinishDay\}','<<Message.Person.Event.EndTime,EEEE>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{FinishDate\}','<<Message.Person.Event.EndTime,d MMMM yyyy>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{FinishTime\}','<<Message.Person.Event.EndTime,h:mma>>')

This is the code I send the notification with

CREATE OutgoingEmail WITH OutgoingEmail.Subject=Message.Subject,OutgoingEmail.Message=Message.Body 
FIND Registration WHERE Registration=Message.Person 
SEND OutgoingEmail TO Registration

I actually keep the Messages as an archive related to each person for future reference.

hpl123

Great stuff unionsystems, thanks for sharing 🙂.

weblike

This is gold...

Thx Dave,

UnionSystems

SOME REFINEMENTS OF ABOVE

I've ended up with more than 40 instances of this refined HTML toolbar in various forms in my App and its painful to go to each to make small instances of edits so I've moved the code to a shared Javascript which I call from each form.

Firstly I've created a custom JS folder and JS file where myDomain matches my local BS name and something can be anything.

AwareIM/Tomcat/webapps/AwareIM/Custom/JS/myDomain/something.js

Then I've created a file in that folder that contains this javascript code.

function loadKtools(kObj) { // define HTML editor toolbar buttons
kObj.tools = ["formatting","bold","italic","createLink", "unlink","insertUnorderedList","insertOrderedList","indent","outdent", "createTable", "addColumnLeft", "addColumnRight", "addRowAbove", "addRowBelow", "deleteRow", "deleteColumn","viewHtml","cleanFormatting","insertHtml"];

//  define list of options and their values

kObj.insertHtml = [
                { text: "Event Name (eg Our Training Event)", value: "{EventName}" },
                { text: "Spaces (available)", value: "{Spaces}" },
                { text: "Start Day (eg Monday)", value: "{StartDay}" },
                { text: "Start Date (eg 2 June 2018-)", value: "{StartDate}" },
                { text: "Start Time (eg 9:45 AM)", value: "{StartTime}" },
                { text: "Finish Day (eg Friday)", value: "{FinishDay}" },
                { text: "Finish Date (eg 3 June 2018-)", value: "{FinishDate}" },
                { text: "Finish Time (eg 2:45 PM)", value: "{FinishTime}" }
            ];

//  change name of button from "insertHtml" to "Insert Tokens"
kObj.messages = {insertHtml : "Insert Tokens"};
}

Then in the Advanced panel for the HTML editor I have the following code.

loadKtools(config.config);

Here is the code in the AwaireIM screen.

I've also added CSS to the custom CSS file to make the dropdown wider

AwareIM/Tomcat/webapps/AwareIM/Custom/CSS/myDomain/something.css

/* increase width of editor dropdowns */
.k-dropdown {width:300px;}

Screen Shot 2016-10-05 at 6.17.23 PM.png

hpl123

Very nice, thanks for the detailed description.

weblike

UnionSystems wrote

I have a Message BO that has a relationship to the Person BO and I assign the Message Subject and Body attributes to the Notification object.

This is the code I use to swap the tokens with data in a rule of the Message BO.

Message.Subject=REPLACE_PATTERN(Message.Subject,'\{FirstName\}',Message.Person.FirstName) 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{LastName\}',Message.Person.LastName) 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{EmailAddress\}',Message.Person.EmailAddress) 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{EventName\}',Message.Person.Event.Subject) 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{StartDay\}','<<Message.Person.Event.StartTime,EEEE>>') 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{StartDate\}','<<Message.Person.Event.StartTime,d MMMM yyyy>>') 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{StartTime\}','<<Message.Person.Event.StartTime,h:mma>>') 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{FinishDay\}','<<Message.Person.Event.EndTime,EEEE>>') 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{FinishDate\}','<<Message.Person.Event.EndTime,d MMMM yyyy>>') 
Message.Subject=REPLACE_PATTERN(Message.Subject,'\{FinishTime\}','<<Message.Person.Event.EndTime,h:mma>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{EventDescription\}',Message.Person.Event.Description) 
Message.Body=REPLACE_PATTERN(Message.Body,'`',SystemSettings.DoubleQuote) 
Message.Body=REPLACE_PATTERN(Message.Body,'\{FirstName\}',Message.Person.FirstName) 
Message.Body=REPLACE_PATTERN(Message.Body,'\{LastName\}',Message.Person.LastName) 
Message.Body=REPLACE_PATTERN(Message.Body,'\{EmailAddress\}',Message.Person.EmailAddress) 
Message.Body=REPLACE_PATTERN(Message.Body,'\{EventName\}',Message.Person.Event.Subject) 
Message.Body=REPLACE_PATTERN(Message.Body,'\{StartDay\}','<<Message.Person.Event.StartTime,EEEE>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{StartDate\}','<<Message.Person.Event.StartTime,d MMMM yyyy>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{StartTime\}','<<Message.Person.Event.StartTime,h:mma>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{FinishDay\}','<<Message.Person.Event.EndTime,EEEE>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{FinishDate\}','<<Message.Person.Event.EndTime,d MMMM yyyy>>') 
Message.Body=REPLACE_PATTERN(Message.Body,'\{FinishTime\}','<<Message.Person.Event.EndTime,h:mma>>')

This is the code I send the notification with

CREATE OutgoingEmail WITH OutgoingEmail.Subject=Message.Subject,OutgoingEmail.Message=Message.Body 
FIND Registration WHERE Registration=Message.Person 
SEND OutgoingEmail TO Registration

I actually keep the Messages as an archive related to each person for future reference.

If you don't use one of the tags in the message than REPLACE_PATTERN empties the entire attribute, but if we use IF's for every tag than it slows down the app.
Do you use other approach than this?