Difference between revisions of "Input Forms"

First, your System Administrator has to setup the apc-aa, see <a href="http://actionapps.org/aa/doc/install.html">below</a> Then edit one of the fields, e.g. SliceAdmin-Fields-ImageURL-Edit Set the type to "File upload" and use the Wizard to set the file type to for example image/* or */* Set the Validate/Insert field to "File" The field will then show up with a pair of fields, one where a URL can be entered, and the other where a file can be chosen. You may wish to take care on picking the help text for these fields as it can be confusing to figure out whether to fill out both fields or just one.

Using this method, you can, in the "add item" form, use an image from an existing URL or upload an image to use it.

1) in the ActionApps main menu, choose "Slice Admin" option 2) In the list of fields, there will be a field called "Image URL" 3) Edit the properties of the field...

a. Change input type to "File Upload"
b. Edit the parameter to "image/*"
c. Set Validate to "URL"
d. Set Insert to "File"

4) Now, you can use the alias _#IMAGESRC like : <IMG SRC="_#IMAGESRC">

In Slice admin interface form for configuring fields there is an input box for parameters of insert function. For field with insert function "File = uploaded file", you can set these parameters:

type of file : maximum image width : maximum
image height : secondary image fields delimited with ## separator

Example:

if you insert parameters:
image/*:450:600:image.....1##image......2

function will do these actions after submitting the item/article:

• check whether the file to be uploaded has proper type (image) and upload only such files (this works for any file upload fields, for example you can specify limit to application/msword or application/*)
• check if picture is bigger than maximum dimensions set in field parameters. If yes, image will be resampled to maximum dimension (aspect ratio maintained).
• if there are set any "other fields" (in this example "image.......1" and "image.......2"), function will also fill-in these fields with url to the same picture. If there are maximum dimensions set in parameters of these field(s), function will resize image accordingly.

Limits of the function:

• image functions work only if there is GD library installed (GD is standard part of PHP since PHP version 4.3.0)
• Image resampling functions work only with GD supported types (JPG, PNG, WBMP - not GIF - GIF will be supported since July 7th, 2004, when LZW patent expires world-wide)
• secondary image fields must be in the input form after source field</li>
• filling of secondary image fields is not recursive (secondary image fields can not be defined in a chain)</li>
• there is no error reporting

All configuration options are in config.php3:

define("IMG_UPLOAD_MAX_SIZE", "400000"); # max size of file in picture uploading
define("IMG_UPLOAD_URL", "http://work.ecn.cz/img_upload/");
define("IMG_UPLOAD_PATH", "/data/www/htdocs/work.ecn.cz/img_upload/");
define("IMG_UPLOAD_TYPE", "image/*");
define("IMG_UPLOAD_DIR_MODE", 508);    # mkdir perms (508 = 0774 in octal, but
# octal value in constant don't work)

When you submit first item with image in the slice, AA will create new subdirectory under the IMG_UPLOAD_PATH directory. The name of this directory is the slice id. In this example we can expect the directories like:

/data/www/htdocs/work.ecn.cz/img_upload/f4c90ee8ef46cd6fa0a4521c61a28f4f

/data/www/htdocs/work.ecn.cz/img_upload/5d2b4ed6778fe3ac6db6ec74ceee650d

The directories are created with IMG_UPLOAD_DIR_MODE mask.

The image upload function is quite easy and you can find it in include/itemfunc.php3 file - function insert_fnc_fil().

Using this method, you can, in the "add item" form, use an image from an existing URL or upload an image to use it.

1) in the ActionApps main menu, choose "Slice Admin" option 2) In the list of fields, there will be a field called "Image URL" 3) Edit the properties of the field... a. Change input type to "File Upload" b. Edit the parameter to "image/*" c. Set Validate to "URL" d. Set Insert to "File"

4) Now, you can use the alias _#IMAGESRC like :
<IMG SRC="_#IMAGESRC">

Field Triggers

If you want to add functionality to the Add / Edit item page, you can use JavaScript code. This may be useful in many cases. JavaScript is executed on the client computer and works in most web browsers, e.g. Internet Explorer and Netscape on PC / Mac. There are many enhancements which work in IE only or in Netscape only but enough features are available for both. I assume you know about JavaScript or will look for some more info on web.

Some examples of what may be done:

Events lasting one or more days. You need two fields -- event start and event end. But most events are one-day events and the users hate to fill the same date twice. You can add a link "Copy date from Start date" which will copy the value. Or you can add an "aa_onSubmit" trigger, which will copy the value before submitting the form when End date is not changed.

Combining two fields. You want to join values from several fields into another field. You can do it just after leaving any of the fields by the "aa_onChange" trigger or just before form submit by the "aa_onSubmit" trigger.

Predefined functions

Some useful functions are ready to work with fields. These are defined in indclude/fillform.js. Have a look at the file to see other more general and more powerful functions. The file is included with the Add / Edit item page if anything is defined on the Field Javascript page. The two basic functions are:

setField (fieldid, newValue) -- sets a value to various control types, to a text box, text area, select box, check box etc. Works even with AA dates (shown by three select boxes for day, month and year) -- use a UNIX timestamp (number of seconds since 1.1.1970) to set a date.

getField (fieldid) -- gets the value from various control types. Works with AA dates, returns the UNIX timestamp.

Field Triggers

If anything is written in this page, the file include/fillform.js is included with the Add / Edit item page. You can write any JavaScript code in the page. AA will look for triggers and add them to all controls if it founds them. Each trigger must be defined with

function aa_onTrigger (fieldid) { trigger body }

where Trigger is a name of any allowed trigger -- these are listed at the bottom of the Field Javascript page. You can add whitespace (spaces, tabs, line ends) but you must use the parameter fieldid. The ID of the field to which a control belongs or the name of the form ("inputform") is sent in it.

Solution to the examples

Combining two fields. You want to copy headline and expiry date to abstract after editing any of them:

function aa_onChange (fieldid) {
    switch (fieldid) {
        case 'headline........':
        case 'expiry_date.....':
            var myDate = new Date (getField('expiry_date.....')*1000);
            textdate = myDate.getDate()+'.'+(myDate.getMonth()+1)+'.'+myDate.getYear();
            setField ('abstract.......2',getField('headline........')+' '+textdate);
            break;
    }
}

Events lasting one or more days. Suppose you are using the Expiry date and Publish date as event end / start date. You can add this code to the Before HTML code in Admin -- configure Fields:

<tr><td></td><td class=tabtxt>
<a href="javascript:setField('expiry_date.....',getField ('publish_date....'));">Copy from post date</a>
</td></tr>

Remember to add something to the Triggers page (e.g. "//" which is a commentary in JavaScript), otherwise fillform.js with the functions getField and setField won't be loaded.

If you want to use the trigger, add this code to the Field Triggers:

function aa_onSubmit (fieldid) {
    var myDate = new Date (2001,0,1); // the default date is 1.1.2001
    if (getField('expiry_date.....') == myDate.getTime() / 1000)
        setField('expiry_date.....',getField ('publish_date....'));
}


This will change the end date before submitting but only if it is set to 1.1.2001, which is default.

FAQ: Field Triggers

If you want to add functionality to the Add / Edit item page, you can use JavaScript code. This may be useful in many cases. JavaScript is executed on the client computer and works in most web browsers, e.g. Internet Explorer and Netscape on PC / Mac. There are many enhancements which work in IE only or in Netscape only but enough features are available for both. I assume you know about JavaScript or will look for some more info on web.
Some examples of what may be done:
Events lasting one or more days. You need two fields -- event start and event end. But most events are one-day events and the users hate to fill the same date twice. You can add a link "Copy date from Start date" which will copy the value. Or you can add an "aa_onSubmit" trigger, which will copy the value before submitting the form when End date is not changed.
Combining two fields. You want to join values from several fields into another field. You can do it just after leaving any of the fields by the "aa_onChange" trigger or just before form submit by the "aa_onSubmit" trigger. Predefined functions
Some useful functions are ready to work with fields. These are defined in indclude/fillform.js. Have a look at the file to see other more general and more powerful functions. The file is included with the Add / Edit item page if anything is defined on the Field Javascript page. The two basic functions are:
setField (fieldid, newValue) -- sets a value to various control types, to a text box, text area, select box, check box etc. Works even with AA dates (shown by three select boxes for day, month and year) -- use a UNIX timestamp (number of seconds since 1.1.1970) to set a date.
getField (fieldid) -- gets the value from various control types. Works with AA dates, returns the UNIX timestamp. Field Triggers
If anything is written in this page, the file include/fillform.js is included with the Add / Edit item page. You can write any JavaScript code in the page. AA will look for triggers and add them to all controls if it founds them. Each trigger must be defined with

function aa_onTrigger (fieldid) { trigger body } <p align="left">where Trigger is a name of any allowed trigger -- these are listed at the bottom of the Field Javascript page. You can add whitespace (spaces, tabs, line ends) but you must use the parameter fieldid. The ID of the field to which a control belongs or the name of the form ("inputform") is sent in it. Solution to the examples
Combining two fields. You want to copy headline and expiry date to abstract after editing any of them:
function aa_onChange (fieldid) {
switch (fieldid) {
case 'headline........':
case 'expiry_date.....':
var myDate = new Date (getField('expiry_date.....')*1000);
textdate = myDate.getDate()+'.'+(myDate.getMonth()+1)+'.'+myDate.getYear();
setField ('abstract.......2',getField('headline........')+' '+textdate);
break;
}
}
Events lasting one or more days. Suppose you are using the Expiry date and Publish date as event end / start date. You can add this code to the Before HTML code in Admin -- configure Fields:
<tr><td></td><td class=tabtxt>
<a href="javascript:setField('expiry_date.....',getField ('publish_date....'));">Copy from post date</a>
</td></tr>
Remember to add something to the Triggers page (e.g. "//" which is a commentary in JavaScript), otherwise fillform.js with the functions getField and setField won't be loaded.
If you want to use the trigger, add this code to the Field Triggers:
function aa_onSubmit (fieldid) {
var myDate = new Date (2001,0,1); // the default date is 1.1.2001
if (getField('expiry_date.....') == myDate.getTime() / 1000)
setField('expiry_date.....',getField ('publish_date....'));
}

This will change the end date before submitting but only if it is set to 1.1.2001, which is default. </div>

Wonders of Live Checkboxes & co.