Add a drop-down list in ActivEdit 2.5
Greg Alton
CFDev.com
A function bound to the onChange event in a <select> element can be used to make changes in the document on the client without the need to return to the server. This tutorial will walk you through an example that adds a query columns drop-down list to ActivEdit 2.5 which builds personalized HTML email messages with tokens to be sent to a distribution list using ActivMail.
In this example a conditional placed in the section of ActivEdit that builds the toolbar will check for the existence of a queryColumns attribute in the current instance of ActivEdit. If it exists, a <select> element will be created and populated with the names of the database table columns contained in the queyColumns attribute. When the user selects an item from the list, a token is placed at the current cursor position. The resulting HTML string can be parsed by ActivMail. The tokens (%column name%) are replaced with the contents of the database table column when the message is sent. The process works in much the same way as methods used to build form letters.
Step 1: The <select> element
Let's start by adding a conditional statement in the ouput object section of activedit.cfm at about line 325. This statement will output a <select> named oQueryColumns in the toolbar of the current instance of ActivEdit if the queryColumns attribute is defined and queryColumns is also in the toolbar attribute..
<cfelseif (btn eq "queryColumns" and IsDefined("attributes.queryColumns"))><img src="#attributes.inc#images/spacer.gif" width="1" height="24" style="vertical-align:middle;">
<select size="1" id="oQueryColumns#ae_num#" style="width:120px;font:8pt Verdana;vertical-align:middle;" onchange="ae_queryColumns(#ae_num#);">
<option name="blankOption" value="blankOption">Query Columns
<cfloop index="queryColumn" list=#attributes.queryColumns#><option name="#queryColumn#" value="#queryColumn#">#queryColumn#
</cfloop>
</select>
Step 2: The function
Place the ae_queryColumns function in the deading of the form document or in editjs.cfm.
function ae_queryColumns(num) { //no buttons should work in html mode
if (ae_HTMLMode[num]) { return; }
DHTMLSafe=aeObjects[num];
var oSel=eval('document.all.oQueryColumns'+num);
var choice=oSel.options[oSel.selectedIndex].value;
if (choice == "blankOption") {
return;
}else {
var sel = DHTMLSafe.DOM.selection.createRange();
sel.pasteHTML("%" + choice + "%");
}
DHTMLSafe.focus();
DHTMLSafe.DOM.body.focus();
}
The first line of the ae_queryColumns function checks to see if the user is in HTML mode and if so, returns. This assures that the drop-down list will only be used in Normal mode. ae_HTMLMode is a function that returns "true" when the control is in HTML mode.
The next line of ae_queryColumns assigns a reference to the current instance of ActivEdit to the DHTMLSafe variable. The var keyword was not used in the assignment. This makes the reference available to other functions. Because it is available throughout the application, it is called a global variable.
The next line also assigns a reference. This time the refernce points to the drop-down list and because we don't need it hanging around cluttering up memory after the function executes, I used the var keyword. Next, I assigned the users selection in the drop-down list to "choice" and if the selection is the heading, do nothing and return. Otherwise, replace the text selected by the user with the token and set the focus to control.
You're done! Add the queryColumns attribute to an instance of ActivEdit with a comma delimited list of query columns, place querycolumns in the toolbar attribute and try it out.
