Extending HTML Editor Toolbar with insertHTML

Contains tips for configurators working with Aware IM
Post Reply
UnionSystems
Posts: 177
Joined: Fri Jun 17, 2016 7:10 am
Location: Brisbane Australia
Contact:

Extending HTML Editor Toolbar with insertHTML

Post by 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 :
Image

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

And here is the code

Code: Select all

// 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.
Attachments
Advanced Button.png
Advanced Button.png (67.84 KiB) Viewed 26063 times
End User Screen.png
End User Screen.png (27.38 KiB) Viewed 26063 times
AWS Linux, Windows Server, AIM 8.4
eagles9999
Posts: 2222
Joined: Mon Jul 02, 2012 12:24 am
Location: Ulaanbaatar, Mongolia

Re: Extending HTML Editor Toolbar with insertHTML

Post by eagles9999 »

Great tip Dave.

Good work and thanx for sharing.
Cheers,
Mark
_________________
AwareIM 6.0, 8.4, 8.6 (build 2920) MariaDB, Windows 10, Ubuntu Linux. Theme: Default, Browser: Chrome, Edge
Upcloud
Image
BenHayat
Posts: 2749
Joined: Thu Dec 23, 2010 5:48 am
Location: Fla, USA
Contact:

Re: Extending HTML Editor Toolbar with insertHTML

Post by BenHayat »

Great Tip Dave. Have heard good things about you from Mark.
Image
weblike
Posts: 1163
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Re: Extending HTML Editor Toolbar with insertHTML

Post by weblike »

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


Thank you.
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
UnionSystems
Posts: 177
Joined: Fri Jun 17, 2016 7:10 am
Location: Brisbane Australia
Contact:

BSV Example

Post by UnionSystems »

Here is a BSV demonstrating insertHTML
AWS Linux, Windows Server, AIM 8.4
BenHayat
Posts: 2749
Joined: Thu Dec 23, 2010 5:48 am
Location: Fla, USA
Contact:

Re: BSV Example

Post by BenHayat »

UnionSystems wrote:Here is a BSV demonstrating insertHTML
It needs to be a zip file to be attached.
UnionSystems
Posts: 177
Joined: Fri Jun 17, 2016 7:10 am
Location: Brisbane Australia
Contact:

Re: Extending HTML Editor Toolbar with insertHTML

Post by UnionSystems »

Sorry ZIPPEd version of BSV really attached this time :-)
Attachments
insertHTML_1.1_7_Sept_2016.bsv.zip
BSV
(35.05 KiB) Downloaded 688 times
AWS Linux, Windows Server, AIM 8.4
weblike
Posts: 1163
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Re: Extending HTML Editor Toolbar with insertHTML

Post by 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.
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
tford
Posts: 4199
Joined: Sat Mar 10, 2007 6:44 pm

Re: Extending HTML Editor Toolbar with insertHTML

Post by tford »

Support -- any possibility this functionality could be included in a future release?
Tom - V8.5 build 2830 - MySql
UnionSystems
Posts: 177
Joined: Fri Jun 17, 2016 7:10 am
Location: Brisbane Australia
Contact:

Re: Extending HTML Editor Toolbar with insertHTML

Post by 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.

Code: Select all

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

Code: Select all

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.
AWS Linux, Windows Server, AIM 8.4
hpl123
Posts: 2360
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Extending HTML Editor Toolbar with insertHTML

Post by hpl123 »

Great stuff unionsystems, thanks for sharing :).
Henrik (V8 Developer Ed. - Windows)
weblike
Posts: 1163
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Re: Extending HTML Editor Toolbar with insertHTML

Post by weblike »

This is gold...

Thx Dave,
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
UnionSystems
Posts: 177
Joined: Fri Jun 17, 2016 7:10 am
Location: Brisbane Australia
Contact:

Re: Extending HTML Editor Toolbar with insertHTML

Post by 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.

Code: Select all

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


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

Code: Select all

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.

Code: Select all

loadKtools(config.config);
Here is the code in the AwaireIM screen.

Image

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

Code: Select all

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

Code: Select all

/* increase width of editor dropdowns */
.k-dropdown {width:300px;}
Attachments
Screen for Advanced
Screen for Advanced
Screen Shot 2016-10-05 at 6.17.23 PM.png (22.93 KiB) Viewed 25782 times
AWS Linux, Windows Server, AIM 8.4
hpl123
Posts: 2360
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Extending HTML Editor Toolbar with insertHTML

Post by hpl123 »

Very nice, thanks for the detailed description.
Henrik (V8 Developer Ed. - Windows)
weblike
Posts: 1163
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Re: Extending HTML Editor Toolbar with insertHTML

Post by 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.

Code: Select all

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

Code: Select all

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?
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
Post Reply