CUSTOM PRODUCT DESIGNER TOOLS
FREE-FORM PARAMS (FFP)

This subsystem is the combination of a dialog box layout manager and data entry manager. This system can be used to create custom product configuration tools of any flavor and format.

• The dialogs and questionaires can display WYSIWYG images of custom products.

• The dialogs can be displayed as multiple step wizards to make complex entries, simple.

• The dialogs can contain many different kinds of entry widgets.

• The dialogs can be as simple as a single dropdown box used to select product color or size.

Free-Form Params (FFP) are used to manage a fully customizable set of "Entry Form Widgets" which are automatcially handled by the system. FFPs are used for custom products, bidding, wholesale quotes, and more. FFPs are also used in customer rencords to store marketing information and customer preferences. This is a very powerful subsystem.

Sections:
FFP Widget List
FFP Template Syntax
FFP Dialog Layout
FFP Example Setup
FFP used in bids
Bidding admin page
Custom Artwork Upload
Free Form Parameters in the OrdersLineItemExt DB Table
Free Form Parameters in the Items and ItemsExt DB Tables
Free Form Parameters in the CustomersExt DB Table
Free Form Parameters helper functions
FFP Datavalue Packing and structure
General FFP Configuration
Composite Pictures
Dirty Flag
FFP Reloads

The FFP system is tightly coupled with the optional bidding system. One of the best ways to review the results of an order based on FFP is through the bidding review and response admin page. This pages allows you to see the FFP exactly as the customer saw it; and allows you to modify the customization, and even shoot a recommened alteration (or bid) back to the customer.

FFP Dialog boxes and forms are smart. The dialog box or form will remember and default to the last values a customer entered into each field for the same product or quote type. This saves typing and provides an easy way to order similar custom products (i.e. products which are the same except for one parameter or setting).

An example of what WYSIWYG FFPs can do can be seen below in the screenshot of a custom sign purchasing dialog box. All the entry fields in this example are configurable in location, effect, content, and quantity. You can have dozens of custom parameters for a specific product or just one; and each product can be completely different.

Here's another example of what FFPs can do. In this example, FFPs are used to create a dialog box which is filled out to request a quote for an airconditioning unit as part of an automated bidding setup. The uses for FFP are almost unlimited.

Free Form Parameters in the OrdersLineItemExt DB Table

When an item using FreeFormParams is added to the cart, any form fields with a special prefix (defined below) will be packed into the FreeFormParams column.

The presence of Free-Form params is flagged to the addBasket functions by the presence of a hidden form field passed to the addBasket functions:

<INPUT TYPE=hidden Name="__FFP__" value="yes">

See also: SendSafe.buysample.asp and FreeFormParams DB Column

Free Form Parameters in the Items and ItemsExt DB Table

The column FFParam in the ItemsExt table can optionally contain Free-Form Parameters which define questions to be asked during order placing. These questions are used for custom products, wholesale quotes, bids, and more.

At its essence, the FFP contains lists of optional objects for the product. These lists can also contain locations where the dialog entry field is displayed on the dialog box. In its most complex application, these lists also contain information about where each object or layer is located on the custom product. For example, it will contain where the pictogram for a sign is located on the sign.

The presence of Free-Form params is flagged to the product browser(optional browser.inc.asp logic) by a reserved keyword prefix in the ProductType column in the items table. The reserved keywords is defined to the system by one of the Application("") global configuration values listed below WHERE ProductType is prefaced with one of these reserved keyword. These prefaces would be tested with SQL syntax like: Select * from where ProductType like 'PREFACE%'. Each preface results in a unique action in the browser logic.

Note: These reserved keywords also control how the showcase page is customized.

Reserved Keyword used in ProductType	Action
Application("CustomizerItemTag") = "I-CUSTOMIZER"	Defines that this item is to be customized. The browser list pages will show a "customize" button instead of an add to basket button.
Application("QuoteItemTag") = "I-QUOTE"	Defines that this item is to be a quote and not a product sale. The browser list pages will show a "quote" button instead of an add to basket button.

Free Form Parameters in the CustomersExt DB Table

The column MIMarketingInfo can optionally contain Free-Form Parameters. These parameters are often used for customer surveys or entry of fields which control customer discounts. This MIMarketing entry dialog will be displayed on:

• Checkout agreement page
• Customer MyAccount page
• Customer login page (if enabled)

The "CustomersExt where Customerid=0" contains a template of FFP's which are used to build the Marketing info displayed in the MyAccount page and elsewhere.

See also: MIMarketingInfo DB Column

Changes to the zero record after deployment and customer creation of MIMarketingInfo will result in:

1. Records with __FFP__ fields which are no longer present will be discharge at My Cuastomer record updates.
2. Records with without the __FFP__ fields, will have these new fields automatically added at My Cuastomer record updates.

Special Reserve FFP field name is DiscountPlan. If this value is used for a __FFP__<FORMFIELDNAME> (i.e. __FFP__DiscountPlan) then the value obtained from the FFP will saved in the DiscountPlan as well as the MIMarketingInfo DB Column DB column.

Free Form Parameters helper functions

Below is a list of ASP helper functions and what they do:

FFP Datavalue Packing and structure

When an object containing FreeFormParams is added to the DB as resultant data the FFP derrived fields are packed into a single DB column (i.e. CustomersExt.MIMarketingInfo or OdersLineItemExt.FreeFormParams).

When FFP dialog boxes are initially rendered, the fields are defined by a template DB record and (if a matching data record is present) the values for the fields are obtained from that different data DB record. This data record syntax is very simple compared to the syntax of an FFP template.

One advantage of this FFP system is that packed free-form params are interchangable across any SendSafe table and DB.

The data obtained from customer responses are packed into the appropriate DB column such as orderlineitems and customerext records as follows:

PACKED FFP DATA SYNTAX:

__FFP__<formfieldname>[<value>]__FFP__<formfieldname>[<value>]__FFP__<formfieldname>[<value>]

WHERE: __FFP__<FORMFIELDNAME> [ DATA ]

Example: __FFP__Color[Cool Green]__FFP__Whole_Width[120]__FFP__Fraction_Width[0]

In the above example "__FFP__Color" is the formfield name and "Cool Green" is the datavalue entered by the customer.

Illegal FFP Data field characters:

This list of illegal characters

Entry Type	Issue
The open and close braces []	Braces are FFP data field delimiters. HTML Entities should be used in their place.
The vertical bar |	The vertical bar is automatically remapped internally by the admin and customer pages to an exclamation point "!". HTML Entities should be used in their place.

General FFP Configuration

Configurable aspects of the FFP packing format are defined in the global.inc.asa file:

FFP Widgets Layouts

FFP Widgets are used to build various entry forms, dialog boxes, and questionnaires. A widget is a single entry or display tool such as a dropdown box, entry text, or loaded image.

FFP entry forms and questionnaires can be laid out in one of two ways: Simple or Advanced.

Simple layout – This is a layout where the FFP system controls all positioning of widgets other than order of appearance. The FFP widgets you enter will appear on the page in the order that the widget is entered in the FFP field. With simple layout the system will render a standard showcase product display, followed by the FFP entry form, and ending with the a list of products with buy buttons. Below is an example of an entry form.

Advanced layout – This is a layout where you control where every widget appears on the page. This layout requires that you include HTML table tags to control the layout. To allow for maximum flexibility when using FFPs in advanced layout mode, the system will not render the standard product showcase page elements: product image (PictureFileA), the products full name, or brand information. You will have to manually add any images you wish to appear. These images can be embedded into the longDesc or embedded into the FFP. The system will render the longDesc, followed immediately by the FFP, and then the list of items with buy buttons. See the example below.

Advanced layout is controlled by the addition of special content tags. The presence of any :FREESTANDINGOUTSIDECONTENT: FFP tag will automatically place the system into advanced layout mode. Please see: FFP Example for step by step advanced layout instructions.

One of the most important things to understand when doing advanced layouts is that each Widget is automatically wrapped inside a table row, i.e. <TR><TD>WIDGET</TD></TR>.

FFP Template Syntax

Templates are a collection of FFP statements which individually define: Widgets, HTML, or Controls. These FFP statements collectively define dialog boxes, wizards, questionnaires, and other forms.

Widgets are used to create various entry fields in a dialog box, wizard, or questionnaire. You have the option of allowing the FFP system to select the location for a Widget automatically, or you can layout the Widgets by including optional HTML table tags in FFP records which become wrappers around the widgets.

FFP SYNTAX:
__FFP__<FORMFIELDNAME>
[ :Label=optional label text :WHAT=ABC :RELOADONCHANGE :DIRTYFLAG=ABC :REQUIRED | REQUIREDIF=ABC :WIZARDGROUP=N :WIDGET-TYPE :optional parameters! ]

General syntax rules:

1. Empty lines between FFPs are okay. Blank lines with spaces or tabs are not okay and will result in runtime errors.
2. Free-form HTML can contain any legal HTML or ascii text.
3. Entries inside of the braces are delimited by semicolons ':'

GENERAL INFORMATION:
The layout, format, and options for an FFP Questionnaire (dialog box) are defined by the values in the template record. Template records are found in itemsExt table and the Index=0 record in the customersext table.

Each Widget is automatically wrapped with a <TR><TD>WIDGET</TD></TR>. This makes designing simple forms easy because you do not have to include any additional HTML for layout. If you are including optional HTML to control the layout, you will have to make sure that each set of widgets is wrapped inside begin and end table HTML tags. This is needed to balance the automatic row and column HTML TAGS that widgets are automatically clothed in.

REQUIRED:
If a widget has a required flag then the following rules apply:

• For Dialog boxes: the dialog cannot be dismissed until all required fileds have been assigned.
• For Wizards boxes: the wizard step cannot be advanced until all required fileds have been assigned.
• An item cannot be added to the basket until all required fields have been satisfied.
• For dropdowns and text fields a value == "" is considered unassigned.
• For RequiredIf statements; the entry field which is tested is defined by the FORMFIELDNAME.
• :NUMBER: fields have a specified length which is required and set by max length (see :NUMBER:).
• :TEXTLIM: fields have a specified length which is required and set by max length and optionally min length (see :TEXTLIM:).
• Some fields such as :NUMBER: have a specified length which is required other fields simply require NOT NULL.
• A label (:Label:) is needed for all required fields. Missing labels will result in unlabeled error message pop-up boxes.

Error messages are singletons, not a consolidate message. If you have two unassigned required fields, then you will receive an error message for the first field and the focus (highlight) will move to this field. If you fill in the first field and press addtocart then you will receive an error message for the second field and the focus (highlight) will move to this field.

The presence of required fields will result in the generation of a JavaScript function ffpRangeCheck( thisForm ). This function must be called before the logic proceeds. This is automatically handled in browser.inc.asp, SendSafe.agreement.inc.asp, and MyAcount.inc.asp; other uses of FFP must handle this function for required fields to work. A typical example of use:

onSubmit=""return(ffpRangeCheck( forms['AGREEMENT'] ))""

WIZARD:
This tag is used break up dialogs in to wizard steps. If the FFP is a Wizard then all widgets must be tagged with a WIZARDGROUP. Failure to tag a widget will cause it not to be displayed. The only exception is :COMPOSITPIC: which is always displayed on every wizard page AND cannot be tagged with a WIZARDGROUP.

WIZARDGROUP=N
where N = the wizard step (1 through N and zero is illegal).

Wizard mode is enabled by adding a WIZARD tag to the FFP and defining the max number of steps for this wizard.

OPTIONAL LABELS:
Every widget can have an optional label (:Label=abc:). This label is used in place of the FORMFIELDNAME. By default the title (or label) for the form entry field would be the same as the field name (i.e. __FFP__First_Name would yeild a label for the field of "First Name" with "_" underscores converted into spaces.

In the example to the right the keycode :label=: defines an alterante label for this entry field. In this example the label would be "This is your first name".

Note: the field name and not the optional label is used for column labeling on both Printed E-Receipt pages and the [ View Order ] command on the Order Admin page.

Null labels: Setting a label=null will result in the widget not being wrapped in the autommatic <tr><td>WIDGET</td></tr> tags. This can be very useful if widgets are to be grouped together tightly or other cases were suppression of table row tags needed. Syntax: [:label=:WIDGET....]

Inore labels: Setting a label={ignore} will result in the widget not displaying any label while still being wrapped in the autommatic <tr><td>WIDGET</td></tr> tags. Syntax: [:label=:{ignore}....]

AUTOMATIC ENTRY NUMBERS:
Every entry can include a section or group entry number. This number is very useful in presenting an easily understandable set of entry fields. You can combine Group or Section boxes (see: STARTEBOX) to add more clarity to groupings of entries.

Automated group number is enabled by placing the number for the group into the :label=: parameter for any Widget. For example :Label=#1#My Label: would result in a section number of 1 OR :Label=#21#My Label: would result in a section number of 21.

INDEX TO FFP WIDGETS, HTML, AND CONTROLS:

Wizard	create a wizard
Dropdown	create a dropdown
PriceDropdown	create a dropdown which controls pricing
SurChargeDropdown	create a dropdown which adds a surcharge
File uploader	provides a widget which manages the upload of a file which will be associated with this item.
LinkedSurcharge	create a control which adds a surcharge IF a linked field has data in it.
SkuDropdown	create a dropdown which controls the selection of a new SKU#
QtyCalc	create a quantity to order calculator
text	create an entry line for simple text entry
textlim	create an entry line for simple text entry which optional length range checking with :REQUIRED:
textarea	create an multi-line entry field for unformatted text entry
mirror	create a text field which will displays the POSTED contents of a different widget
hidden	create an hidden data field.
number	create an entry field for simple numeric text entry
Radio	create a radio button widget
Htmlfmttext	create a WYSIWYG HTML entry area
Fmttext	create a simple entry field for formatted text entry
Imgloader	create an image loading widget
Imgloaderselector	create an image loading widget with categies and image selector dropdowns
Imgbrowserloader	create an image loading widget which uses a WYSIWYG browser
Compositpic	create an entry area for a composit image
Freestandingcontent	create free form content within a dialog
FreestandingOutsidecontent	create form content around a dialog
Price	price display and entry widget used for bidding
TotalPrice	create a special total price field used for bidding
EndRFB	a marker for end of the RFB area of a bid
RMarker	a marker for a located in the FFP where rendering starts or ends
StartBox	a location where a group box starts
EndBox	a location where a group box ends
Comment	a comment for the FFP
Inline	create in-line FFPs
SameLine	controls spacing for widgets
SingleLine	controls spacing for widgets
DoubleLine	controls spacing for widgets

Description	Example
CONTROL TYPE:  Wizard Widget Setup - :WIZARD:
Defines that this dialog is to be broken up into wizard steps. The number assigned to this WIZARD tag is the maxium number of steps. This tag must appear as the first line in any FFP which uses wizards. Wizard mode cannot be used with the following formatting options or tags: Freestandingcontent FreestandingOutsidecontent Automatic entry numbering See also: wizard This tag will create a hidden Form Element (name=WIZARDSTEPNUM). This element holds the current step of the wizard. A new wizard step is selected by setting step into the FORM element and posting the page to itself.	__FFP__Wizard[:WIZARD:24]
n/a
CONTROL TYPE: Single Line Spacing Widget Setup - :SINGLELINE:
Sets line spacing so that every widget is on its own TABLE ROW with no space between each row.	__FFP__spacing[:SINGLELINE:]
n/a
CONTROL TYPE: Double Line Spacing Widget Setup - :DOUBLELINE:
Sets line spacing so that every widget is on its own TABLE ROW with a spacer TABLE ROW between each line. This is the default spacing for FFP dialog boxes.	__FFP__spacing[:DOUBLEINE:]
n/a
CONTROL TYPE: Inline Widget Setup - :SAMELINE:
Sets spacing so that every widget is in the same TABLE ROW with no column spacer between each widget. Important: For same line to work THERE MUST BE NO LABELS used for the widgets i.e. [:label=:nnnnn]	__FFP__spacing[:SAMELINE:]
n/a
CONTROL TYPE: Inline Widget Setup - :INLINE:
Defines that this dialog is to be displayed in-line in the add-to-cart line between the name and retail price columns on showcase pages (see "Options" label). Labels will be displayed to the left of each entry widgets. The widgets will be stacked one on top of the other. No formatting or placement controls will apply. The dialog widgets will be displayed in the same order as they appear in the FFP. In-line FFP dialogs are limited to 3 widgets per FFP. This tag must appear as the first line in any FFP which is to be displayed in-line. Inline mode cannot be used with the following formatting options or tags: Freestandingcontent FreestandingOutsidecontent Automatic entry numbering	__FFP__spacing[:INLINE:]
n/a
WIDGET TYPE:  Dropdown box Widget - :Dropdown:
Defines the option values for the dropdown box. The example to the right would result in a dropdown box with the options of: Green, Yellow, Red, Blue. The '+' sign prefex indicates this option will be selected by default in the the dropdown box. The keycode ":Dropdown:" indicates this is a dropdown box entry field. Optionally, you can have different values and display strings. The syntax is: <value>=<display string>!<value>=<display string> **The text cannot contain HTML tags (it must be basic ASCII text only). The text cannot contain an exclamation point because it is used as the parameter delimiter.	__FFP__Color[:Dropdown:Green!+Yellow!Red!blue]
HTML: <tr><td><input type= Select name="__FFP__Color"> <Option value="green">Green </option></td></tr>
WIDGET TYPE: SKU Dropdown box Widget - :SkuDropdown:
This widget defines SKU for a "special case" dropdown box. The 1st example to the right would result in a dropdown box with the options of: Green, Yellow, and Red with a hidden sku# for each option. Make a selection from a SkuDropdown box will cause new items (SKUs) loaded into the FFP dialog box; and as a result, all the items selected by a skudropdown should be very similar to all other items in the skudropdown and should carry identical skudropdown FFP fields and very similar FFP fields in general. SKU Part = This value indicates the zero normalized position of this field in a composite SKU (set to -1 for NOT composite sku) Option1 = The string describing option1 Sku Option1 = The replacement SKU for option1 Option2 = The string describing option1 Sku Option2 = The replacement SKU for option1 Option3 = The string describing option1 Sku Option3 = The replacement SKU for option1 Sytax: [SKU Part]![Option1],[sku Option1]![Option2],[sku Option2] The keycode ":SkuDropdown:" indicates this is a sku dropdown box entry field. Composite sku: There can be multiple SkuDropDown per FFP. If multiple dropdowns occur then the SKU will be the concatenation of all the SKUs with each contribution separated by a hyphen. Example: We have three Dropdowns: __FFP_SkuDropDownA, __FFP_SkuDropDownB, __FFP_SkuDropDownC. These three dropdowns contribe values of ABC, 123, & XYZ. THEN the SKU would be ABC-123-XYZ. Composite SKU's always have their components delimited by hyphens i.e. A three component SKU = 111-222-333 **The text cannot contain HTML tags (it must be basic ASCII text only). The text cannot contain an exclamation point because it is used as the parameter delimiter. If SKU re-selection is used THEN typically all the items except for one should be setup to NOT DISPLAY in product browsing except on the showcase page. This is accomplished by setting the dateadd field to NULL all except one item record which will be the master item record (the item record loaded from product browsing). Note: For this field to assign a replacement sku two special conditions must be meet: The name of the field must have a special reserved keyword prefix of "__FFP__SkuDropdown". This prefix is used by the browser.inc.asp file to build the sku#. It is recommended that optional labels be used for all :SkuDropDown: widgets to work around the special reserved keyword prefix requirement and its effect of simple entry field labeling. When creating composit SKUs the FFP widgets must appear in the FFP in the order that their fields will be applied to build the sku i.e. in order of "SKU Part"	__FFP__SkuDropdown[:Label=color: SkuDropdown:-1!Green,GRN!Yellow,YEL!Red,RED] Special note: :Label=optional label text is the recommend optional method of labeling dialog widgets. Example of composit SKU: __FFP__SkuDropdown1[:Label=SKU Selection1:SKUDROPDOWN:0!1,DYNSKU1!2,DYNSKU2!3,DYNSKU3] __FFP__SkuDropdown2[:Label=SKU Selection2:SKUDROPDOWN:1!A,FFPA!B,FFPB!C,FFPC] __FFP__SkuDropdown3[:Label=SKU Selection3:SKUDROPDOWN:2!one,1!two,2!three,3]
HTML: <tr><td><input type= Select name="__FFP__SkuDropdown"> <Option value="Green,GRN">Green </option></td></tr>
WIDGET TYPE: Pricing Dropdown box Widget - :PriceDropdown:
Use this widget to set different prices for an item. This widget defines prices and strings for a "special case" dropdown box. The example to the right would result in a dropdown box with the options of: Green, Yellow, and Red with a hidden pair of replacement prices for each option. These replacement prices will override all other prices from the items and itemsext DB tables, quantity pricing, promotions/sales, and discount pricing. Option1 = The string describing option1 Price Option1 = The regular price for option1 Discount Price Option1 = The discount price for option1. Option2 = The string describing option2 Price Option2 = The regular price for option2 Discount Price Option2 = The discount price for option2. Sytax: [Option1],[Price Option1],[Discount Price Option1]![Option2],[Price Option2],[Discount Price Option2] see also: discounts The keycode ":PriceDropdown:" indicates this is a price dropdown box entry field. This control does not work for quantity priced items. There can only be ONE PriceDropDown per FFP. **The text cannot contain HTML tags (it must be basic ASCII text only). The text cannot contain an exclamation point because it is used as the parameter delimiter. Note: For this field to assign a price value to a product placed in the shopping cart, the name of the field must be the special reserved keyword "__FFP__PriceDropdown". This field is used by the browser.inc.asp file to assign this value to the product. It is recommended that optional labels be used for all :PriceDropDown: widgets to work around the special reserved keyword "__FFP__PriceDropdown" requirement and its effect of simple entry field labeling. Be sure to set the items.priceEa field in the items DB record to the initial regular price you wish displayed. This price should match the default selection in the dropdown. This default selection is typically the first value. Be sure to set the items.SpecialPrice field in the items DB record to the initial discount price you wish displayed. This price should match the default selection in the dropdown. This default selection is typically the first value.	__FFP__PriceDropdown[:Label=color: PriceDropdown:Green,10.00,5.00 !Yellow,15.00,10.00 !Red,20.00,15.00] Special note: :Label=optional label text is the recommend optional method of labeling dialog widgets.
HTML: <tr><td><input type= Select name="__FFP__PriceDropdown"> <Option value="Green,10.00,5.00">Green </option></td></tr>
WIDGET TYPE: Surcharge Dropdown box Widget - :SurChargeDropdown:
Use this widget to adjust the price of the item. This widget defines surcharges and strings for a "special case" dropdown box. The example to the right would result in a dropdown box with the options of: Green, Yellow, and Red with a hidden pair of surcharges for each option. These surcharges will be added to the normal price from the items and itemsext DB tables, quantity pricing, promotions/sales, and discount pricing. This surcharge is used to change the item price as displayed on the product browsing pages. It is a per item charge. If five items are ordered, this surcharge will be applied 5 x surcharge. This surcharge DOES NOT INCLUDE any special messages in the shopping cart. Option1 = The string describing option1 SurCharge Option1 = surcharge to be added Discount SurCharge Option1 = surcharge to be added Option2 = The string describing option2 SurCharge Option2 = surcharge to be added Discount SurCharge Option1 = surcharge to be added Sytax: [Option1],[SurCharge Option1],[Discount SurCharge Option1]![Option2],[SurCharge Option2],[Discount SurCharge Option2] see also: discounts The keycode ":SurChargeDropdown:" indicates this is a price dropdown box entry field. There can only be ONE SurChargeDropDown per FFP. **The text cannot contain HTML tags (it must be basic ASCII text only). The text cannot contain an exclamation point because it is used as the parameter delimiter. Note: For this field to assign a SurCharge value to a product placed in the shopping cart, the name of the field must be the special reserved keyword "__FFP__SurChargeDropdown". This field is used by the browser.inc.asp file to assign this value to the product. It is recommended that optional labels be used for all :SurChargeDropDown: widgets to work around the special reserved keyword "__FFP__SurChargeDropdown" requirement and its effect of simple entry field labeling. Be sure to set the items.priceEa field in the items DB record to the initial regular price + surcharge you wish displayed. This price should match the default selection in the dropdown. This default selection is typically the first value. Be sure to set the items.SpecialPrice field in the items DB record to the initial discount price + SurCharge you wish displayed. This price should match the default selection in the dropdown. This default selection is typically the first value.	__FFP__SurChargeDropdown[:Label=color: SurChargeDropdown:Green,10.00,5.00 !Yellow,15.00,10.00 !Red,20.00,15.00] Special note: :Label=optional label text is the recommend optional method of labeling dialog widgets.
HTML: <tr><td><input type= Select name="__FFP__PriceDropdown"> <Option value="Green,10.00,5.00">Green </option></td></tr>
WIDGET TYPE: Linked Surcharge Widget - :LinkedSurCharge:
Use this widget to apply fixed surcharges to an order. This widget defines a control which causes a surcharge to be applied if a reference (linked) field has a specific value. The surcharge is applied server-side, does not require a page reload, and does not affect the displayed or set dollar amount of an item. This surcharge is applied ONCE per affected lineitem regardless the quantity ordered. This surcharge is applied using the OrderLineItem.AppliedSurchargeAmt field and can result in a descriptive message displayed below the lineitem in the cart (and elsewhere). Sytax: [surcharge amount]![surcharge message]![trigger string]![linked field] surcharge amount = The dollar amount of the surcharge. This amount is added to the lineitem by summing the amount into the OrderLineItem.AppliedSurchargeAmt Db field. surcharge message = This is a message which will be displayed under the item in the cart and on printed-receipts. This message is appended to the OrderLineItem.AppliedSurchargeMsg Db field.** trigger string = This is the string which must be found in the "linked Field" in order for this surcharge to be appplied. This value can be set to the wildcard '*' (asterisk) which will match any value in the "linked field." This field is case sensitive AND can contain ONLY a single matching string OR a single wildcard. linked field = the entry field which is tested defined by the FORMFIELDNAME (does not include the FFP prefix "__FFP__" in the field name). The keycode ":linkedSurCharge:" indicates this is a linked surcharge control. **The text cannot contain HTML tags (it must be basic ASCII text only). The text cannot contain an exclamation point because it is used as the parameter delimiter. Note: For this field to assign a SurCharge value to a product placed in the shopping cart, the name of the field must have a special reserved keyword prefix of "__FFP__LinkedSurCharge". This field is used by the browser.inc.asp file to assign this value to the product. This widget creates HIDDEN HTML FORM ELEMENTS which are used to apply the surcharge: __FFP__linkedSurCharge<yourtext> = the surcharge amount __FFP__linkedSurChargeSM<yourtext> = the surcharge message __FFP__linkedSurChargeTS<yourtext> = the trigger string __FFP__linkedSurChargeLF<yourtext> = the linked field Tip: You can using this widget to create a surcharge which is always applied. If you link the LinkedSurCharge field to itself.	__FFP__linkedSurChargeMYCHARGE[:linkedSurCharge:38.99!This is a $38.99 surcharge for color logos!clogo!MyTextField]
HTML: n/a
WIDGET TYPE: Text Field Widget - :Text:
Defines a field which will allow entry of text. In the example to the right ":Text:" indicates this is a text field with a size=10 and a max length of 200. The third parameter is option and if present is used as a default value if no other values have been entered by the customer. *Default text cannot contain HTML tags (it must be basic ASCII text only). The default value cannot contain an exclamation point because it is used as the parameter delimiter.	__FFP__Name[:Text:10!200!Default Value]
HTML: <tr><td><input type= text name="__FFP__Name" size="10" maxlength="200"></td></tr>
WIDGET TYPE: Text Lim Field Widget - :TextLim:
Defines a field which will allow entry of length rangechecked text. In the example to the right ":Textlim:" indicates this is a text field with a size=10 and a max length of 200. The third parameter is a (zero normalized) minium length. Setting this value to zero will result in a min length of > 0. The forth parameter is option and if present is used as a default value if no other values have been entered by the customer. If this field is flagged as required then the entry MUST equal the max length value (in this example 200). *Default text cannot contain HTML tags (it must be basic ASCII text only). The default value cannot contain an exclamation point because it is used as the parameter delimiter.	__FFP__Name[:Textlim:10!200!0!Default Value]
HTML: <tr><td><input type= text name="__FFP__Name" size="10" maxlength="200"></td></tr>
WIDGET TYPE: Hidden Field Widget - :Hidden:
Defines a field which will carries a fixed value and does not show up in the FFP dialog box. This field is often used to include additional messages on an e-receipt OR as invisible values used by a QtyCalc widget. In the example to the right ":Hidden:" defines a text field. *The default value cannot contain an exclamation point because it is used as the parameter delimiter. Note: This field and it's value will be displayed on e-receipts. If you do not want this field displayed on e-receipts, the name of the field must contain the special reserved keyword "__FFP__hiddenvfield".	__FFP__Name[:hidden:!Default Value]
HTML: n/a
WIDGET TYPE: Mirror Field Widget - :Mirror:
Defines a text field which will displays the POSTED contents of a different widget. *The default value cannot contain an exclamation point because it is used as the parameter delimiter. Note: This field and it's value will be displayed on e-receipts. If you do not want this field displayed on e-receipts, the name of the field must contain the special reserved keyword "__FFP__hiddenvfield". Option 4th parameter is a numeric value. If present this value indicates that the POSTED value from the widget is comma delimited and needs to be tokenized and the nth (zero normalized) value displayed (instead of the entire value). In the example to the right ":Mirror:" indicates this is a text field with a size=10 and a max length of 200. The third parameter is option and if present is used as a default value if no other values have been entered by the customer. *Default text cannot contain HTML tags (it must be basic ASCII text only). The default value cannot contain an exclamation point because it is used as the parameter delimiter.	__FFP__Name[:Mirror:10!200!widgetname!Default Value!3]
HTML: <tr><td><input type= text readonly name="__FFP__Name" size="10" maxlength="200"></td></tr>
WIDGET TYPE: Numeric Field Widget - :Number:
Defines a field which will allow entry of integer numbers. In the example to the right ":Number:" indicates this is a text field with a size=5 and a max length of 8. The third parameter is option and if present is used as a default value if no other values have been entered by the customer. *Default text cannot contain HTML tags (it must be basic ASCII text only). The default value cannot contain an exclamation point because it is used as the parameter delimiter. If this field is flagged as required then the numeric entry MUST equal the max length value (in this example 8).	__FFP__Name[:Number:5!8!12345]
HTML: <tr><td><input type= text name="__FFP__Name" size="5" maxlength="8"></td></tr>
WIDGET TYPE: Radio button Widget - :Radio:
Defines a field which will create a set of radio buttons. This example creates a set of three linked radio buttons. Radio buttons are linked by the <INPUT> FIELD NAME which is derrive from the <formfieldname>. This will result in all radio buttons with the same <formfieldname> being comined into a slinked set of radio buttons with a single value. In the example to the right the parameters A,B,C indicate the value that will be assigned if the radio button is selected. This value parameter is required for all radio buttons.	__FFP__RadioFieldName[:Label=Option 1:RADIO:A] __FFP__RadioFieldName[:Label=Option 2:RADIO:B] __FFP__RadioFieldName[:Label=Option 3:RADIO:C]
HTML: <tr><td><input type= radio name="__FFP__RadioFieldName" value="A"> Option 1</td></tr> <tr><td><input type= radio name="__FFP__RadioFieldName" value="B"> Option 2</td></tr> <tr><td><input type= radio name="__FFP__RadioFieldName" value="C"> Option 3</td></tr>
WIDGET TYPE: Text Area Widget - :TextArea:
Defines a field which will allow entry of text into a Text Area box. In the example to the right ":TextArea:" indicates this is a text field with a rows=2 and cols=20. The third parameter is option and if present is used as a default value if no other values have been entered by the customer. **Default text cannot contain HTML tags (it must be basic ASCII text only). The default value cannot contain an exclamation point because it is used as the parameter delimiter.	__FFP__Comment[:TextArea:2!20!Default Value]
HTML: <tr><td><TEXTAREA rows=2 cols=20 id=textarea1 name=__FFP__Comment> </TEXTAREA></td></tr>
WIDGET TYPE: Text Area Widget - :QtyCalc:
Defines a quantity calculator function. The calculator function will display a button which when press will cause a calculation of the quantity needed for this item. Pressing the calculation button causes a reload to occur and the new value will be set into all displayed quantity fields. Sytax: [fieldMultiplier1,fieldMultiplier2]![fieldDivisor1,fieldDivisor2] fieldAdd1 = the entry field(s) which are added together as part of the calculation (does not include the FFP prefix "__FFP__" in the field name). fieldSub2 = the entry field(s) which are subtracted from the accumulator as part of the calculation (does not include the FFP prefix "__FFP__" in the field name). fieldMultiplier3 = the entry field(s) which are multiplied against the accumulator as part of the calculation (does not include the FFP prefix "__FFP__" in the field name). fieldDivisor4 = the entry field(s) which are are uses as divisors of the accumulator (in order of appearance) as part of the calculation (does not include the FFP prefix "__FFP__" in the field name). Set parameter to "none" if any of the above fields not used. Division resulting in a remainder will be rounded up. Illegal operations will result in error messages. Fields be a type of :NUMBER: or :TEXT: are often used along with a REQUIRED flag. The qtycalc logic will test for ZERO, null, or non-mumeric in every field and terminate the calculation if detected; so additional range checking is not required. The keycode ":QtyCalc:" indicates this is a quantity to purchase calculator widget. There can only be ONE QtyCalc per FFP. The :REQUIRED: Option: If this parameter is present THEN the calc function becomes required. This results in the QTY field defaulted to zero and readonly. So the only way the item can be added to the cart is if the calc function is used to set the quantity. This option is also used in conjunction with setting a dirtyflag on all the MUL and DIV fields which feed into the calculation. Note: For this field to assign a quantity value, the name of the field must be the special reserved keyword "__FFP__linkedQtyCalc". This field is used by the browser.inc.asp file to assign this value to the quantity field in the showcase page.	__FFP__QtyCalc[:label=MyCalc:QtyCalc:field1,field2|field3!field4!none]
HTML: n/a
WIDGET TYPE: Composite Picture Widget - :COMPOSITPIC:
Defines a PlugIn Display Object which builds a composite picture from the values entered into specially designated FFP Entry Fields. The anchor for the composite image is dropped by this FFP. Wherever this FFP is located on the webpage will be the X/Y origin to which all the composite image will be rendered. CSS floating boxes are used to render all images and text. The location of all the CSS floating boxes will be relative to this COMPOSITPIC./p> In the example to the right ":COMPOSITPIC:" indicates this is a composite picture with width=100 and height=150 and a location of the anchor dropped by this FFP. This widget must come before all other entry fields in an FFP dialog box definition or all other entry fields must have their position constrained inside table cells which do not overlap the location of the :COMPOSITPIC: floating box. Failure to the above can result in in this image floating box overlaying other dialog box controls. See also: See FFP Example Setup See also: See composite picture layout The composite picture is built from transparent CSS layers in a defined z-order. :IMGLOADER: FFPs are used to define the images that are loaded on top of each other to form the composite image. Text :FMTTEXT: fields are used to define custom text which appears over the image in specific locations. The z-order of the images and text is established by the order of appearance of each FFP individual field in the DB record. Typically an :IMGLOADER: FFP would be used to setup a background (color and shape first). This :IMGLOADER: FFP would then be followed by pictograms, symbols, and icons. The final image :IMGLOADER: FFP would typically be either user provided or a final layer of pictograms, symbols, and icons. After all :IMGLOADER: FFPs would come the :FMTTEXT: custom text fields. WIZARDGROUP tag is illegal for this widget. The :COMPOSITPIC: widget is displayed on all wizard pages.	__FFP__CustomSign[:Label=Custom Sign:COMPOSITPIC:100!150]
HTML: n/a
WIDGET TYPE: Formatted text Widget - :FMTTEXT: and :FMTPTEXT: and :FMTSTEXT:
Defines a PlugIn "Display Object" into which the customer can enter formatted text. The text is formatted WYSIWYG HTML in the :COMPOSITPIC:. Formatting includes: bold, italic, underline, font size, type face (arial, times) and alignment (Left,right,center). The text will automatically wrap within the display box area and a Best Fit function is included to automatically size the text to fit its designated area. There are two parts to this FFP Tag. The entry field shown below and the :COMPOSITPIC: image where the formatted text is dispayed. The text will be displayed within an area of the COMPOSITPIC defined by X Location,Y Location, box width, and box height. The X/Y location is relative to the upper left corner of the COMPOSITPIC (i.e. x=0 and y=0 will result in the text box's upper left corner overlapping the upper left corner of the COMPOSITPIC. HTML formatting tags such as font, bold, paragraph, etc. are allowed as embedded formatting tags. See also: See FFP Example Setup and FMTTEXT Internals There are three different versions of this widget: FMTTEXT, FMTPTEXT, and FMTSTEXT. The differece are: FMTPTEXT will display a preview radio button which controls whether the entry in this field will be previewed on the WYSIWYG screen object. Only ONE of N FMTPTEXT will have its content previewed at any one time. FMTSTEXT is a slave to FMTPTEXT and will display its data if the master FMTPTEXT is dusplaying data FMTTEXT will always display data. In the example to the right ":FMTTEXT:" indicates this text is displayed within an areas 100x150 pixels with its upper left corner located at X=0 and Y=10. For the optional parameters, all optional parameters preceding the parameters of interest must also be included. Optional parameters can be a single value or a comma delimited list: X Location = 0 (this is the horizontal position) Y Location = 10 (this is the vertical position) box width=100 box height=150 Entry Field char width=40 Entry Field line height=3 default text of "Text1" - This value MUST be set to something (if blank is desired: set to &nbsp;) Optional Comma delimited set of attributes: null = NONE (or leave out optional value) case folding = UPPER Vertical position = VERT Disable Resize to fit = NORESIZE Optional set list of fonts (comma delimited) or slave-dropdown Optional select font size min and max (comma delimited) Optional set list of colors (comma delimited) or slave-dropdown Optional set list of font weights (comma delimited) or slave-dropdown Optional set list of font style (comma delimited) or slave-dropdown Optional set list of decorations (comma delimited) or slave-dropdown Optional set list of alignment (comma delimited) or slave-dropdown Optional set max vertical position (offset) value (0=disable) or slave-dropdown Sytax: [LocX] ! [LocY] ! [boxwidth] ! [boxheight] ! [entrywidth] ! [entryheight] ! [Default text] ! [UPPER] ! [Arial,Times,Courier] ! [Min,Max] ! [black,white,red,green,blue] ! [normal,bold] ! [normal,italic] ! [none,underline,overline,line-through] ! [center,left,right] **The above X,Y locations are relative to the anchor dropped by the :COMPOSITPIC: FFP. **Default text cannot contain HTML tags (it must be basic ASCII text only). The default value cannot contain an exclamation point because it is used as the parameter delimiter. The default value cannot be empty. It must contain at the very least an HTML entity for space &nbsp; (if you want no text to be displayed). Slave-dropdowns can be specified instead of an Optional list of values. IF a slave dropdown is specified THEN the value set by that dropdown will be used for the FMTTEXT. The values are obtained from the slave during a POST (page reload); therefore it is recommended that that the slave have a :RELOADONCHANGE: parameter. Default initialization: The default will be the first entry in the {remapping table}. The default value for all slave dropdowns must match the default (initial) state of the WYSIWYG display; failure to do so will result in intial display synchronization errors. The default values in the dropdowns can be selected with the "+" prefix on the entry which will be the default value. The slave entry is a comma delimited string which includes the name of the <FORM> field followed by an assignment remapping table (a list of values recieved from the dropdown and a list of values to translate that dropdown-value into. Syntax: #<Name of dropdown without FFP Prefix>, {remapping table} dropdownval=valtoAssign, (also default value) dropdownval=valtoAssign, dropdownval=valtoAssign, dropdownval=valtoAssign Example taken from an IMGLOADER dropdown: #ColorCombsDropDown, en/images/CustomProducts/EPNP.Layer1.Red.gif=White, en/images/CustomProducts/EPNP.Layer1.Black.gif=White, en/images/CustomProducts/EPNP.Layer1.Blue.gif=White, en/images/CustomProducts/EPNP.Layer1.Green.gif=White The vertical position slave does not use remapping. This slave functions like "text size" (below) bubt without the box positioning. Vertical position is in pixels (css px values). Syntax: #<Name of dropdown without FFP Prefix>,default text size Example: #VPositionDropdown 12 *This drop must default to the zero position offset so that it is synchronized with the initial position on the WYSIWYG display. This default selection can be made using the "+" dropdown default prefix. The "text size" slave-dropdown is a special case with added power. This slave sets not only text size but also the position of the rendered floating text box (the WYSIWYG output) and its size. The slave-dropdown MUST contain the following comma deliminted values for each entry: <size of text>,<X Location>,<Y location>,<box width>,<box height>; more comma delimited entries are allowed and can be put to other use such as identifying the entry in English for human operator purposes OR vaues for other slaved widgets. There is no translation table so the dropdown must be dedicated to this purpose i.e. no mutli-taking of :IMGLOADER: or :SKUDROPDOWN: dropdowns. Syntax: #<Name of dropdown without FFP Prefix>,default text size Example: #TextSizeDropdown 12 Example of a slave dropdown setup for text size: __FFP__TextSizeDropdown[:Label=Font Size:RELOADONCHANGE:DROPDOWN:6,112,110,175,98=6 !10,112,110,175,98=10 !15,112,110,175,98=15 !20,112,110,175,98=20 !25,112,110,175,98=25 !+30,112,110,175,98=30 !35,112,110,175,98=35 !40,112,110,175,98=40] In the first dropdown entry example: 6 is the font size 112,110,175,98 are the coordinates =6 is the label (this entry is not comma delimited as are other entries. This entry must always be the last entry in the string. Note: the "+" sign used on entry "30" to set it as the default intialization value. This is very important. Internals: Each FMTTEXT field will result in a set of FFP automatic entires (instead of single entry like other FFP type). The set of automatic entries will all share the same "Form Field Name" with a postfix which indicates the data entry type for each of the parameters which were automatically created. The data types and formfield names are: <formfieldname> = Text entered by user <formfieldname>FontSize = The size of the font selected by user <formfieldname>FontWeight = The weight of the font selected by user (bold,normal,etc.) <formfieldname>Alignment = The paragraph alignment selected by user (left,right,etc.) <formfieldname>Decoration = The text decoration selected by user (underline,overline,etc.) <formfieldname>Style = The font style selected by user (italic,etc.) <formfieldname>color = The text color selected by user (red,blue,etc.) Aplication("FFPColorRGBLimiter") variable enables/disables color pallet limiting. If set true, the pallet is limited to black, white, red, green, and blue. FMTSTEXT fields are slaved to a FMTPTEXT field by matching FORMFIELD names. Slaves and Masters have the same label except for the last character of the slave. The length of every slave label = length of the master - 1. For example: __FFP__CPTextLine1[:FMTSTEXT:.....] is a slave __FFP__CPTextLine2[:FMTSTEXT:.....] is a slave __FFP__CPTextLine3[:FMTSTEXT:.....] is a slave __FFP__CPTextLine[:FMTPTEXT:.....] is the master which displays a preview control radio button	__FFP__CPTextLine1[:Label=Text Line 1:FMTTEXT:0!0!50!100!40!3!Text1]
HTML: n/a
WIDGET TYPE: Formatted text Widget - :HTMLFMTTEXT:
Defines a PlugIn "Display Object" into which the customer can enter HTML formatted text. This widget different from the :HTMLFMTTEXT: widget in that it can format individual words or even characters with full WYSIWYG in both the entry field and the COMPOSITPIC. This widget's operation is currenty limited to Microsoft browsers only. If other browsers are detected then the system will automatically replace this widget with a FTMTEXT widget. The text is formatted WYSIWYG HTML in the :COMPOSITPIC:. Formatting includes: bold, italic, underline, font size, type face (arial, times), background color, and alignment (Left,right,center). The text will automatically wrap within the display box area. There are two parts to this FFP Tag. The entry field shown below and the :COMPOSITPIC: image where the formatted text is dispayed. The text will be displayed within an area of the COMPOSITPIC defined by X Location,Y Location, box width, and box height. The X/Y location is relative to the upper left corner of the COMPOSITPIC (i.e. x=0 and y=0 will result in the text box's upper left corner overlapping the upper left corner of the COMPOSITPIC. HTML formatting tags such as font, bold, paragraph, etc. are allowed as embedded formatting tags. See also: See FFP Example Setup and HTMLFMTTEXT Internals In the example to the right ":FMTTEXT:" indicates this text is displayed within an areas 100x150 pixels with its upper left corner located at X=0 and Y=10: X Location = 0 (this is the horizontal position) Y Location = 10 (this is the vertical position) box width=100 box height=150 Entry Field char width=40 Entry Field line height=3 default text of "Text1" Optional case folding (i.e. leave out or set to UPPER). If set to upper, all text will be case folded to uppercase. Set to "none" to have no effect. Sytax: [LocX]![LocY]![boxwidth]![boxheight]!![entrywidth]![entryheight]![<font size=5 color=red>Default text</font>]![UPPER] **The above X,Y locations are relative to the anchor dropped by the :COMPOSITPIC: FFP. **Default text can contain HTML tags to set color, size, etc. for the text. The default value cannot contain an exclamation point because it is used as the parameter delimiter; other HTML limitions do exist such as CSS and JavaScript. **You should use only one HTMLFMTTEXT per layout. Though more can be used, some version of Microsoft Explorer will load slowly due to the large number of CSS floating elements required to render each field. The Aplication("FFPColorRGBLimiter") variable enables/disables color pallet limiting. If set true, the pallet is limited to black, white, red, green, and blue.	__FFP__CPTextLine1[:Label=Text Line 1:HTMLFMTTEXT:0!0!50!100!40!3!<font size=5 color=red>Default text</font>]
HTML: n/a
WIDGET TYPE: Image Loader Widget - :IMGLOADER:
Defines a PlugIn Display Object which loads an image from a fixed file with a dropdown selection. There are two parts to this FFP Tag. The entry field shown below and the :COMPOSITPIC: image where this component image is dispayed. The component image will be displayed within an area of the COMPOSITPIC defined by X Location,Y Location, box width, and box height. The X/Y location is relative to the upper left corner of the COMPOSITPIC (i.e. x=0 and y=0 will result in the component image's upper left corner overlapping the upper left corner of the COMPOSITPIC. See also: See FFP Example Setup See also: See composite picture layout In the example to the right ":IMGLOADER:" indicates the picture location and size specified below: X Location = 0 (this is the horizontal position) Y Location = 10 (this is the vertical position) width=100 height=150 default image of "images/picto1.jpg@Bob" where "images/picto1.jpg" = file name and "Bob" = display name dropdown options will be displayed: Bob,Jane, or Mary. If only one image is listed then no dropdown is rendered. Sytax: [LocX]![LocY]![width]![height]![Image1]![image2]![image3] **The above X,Y locations are relative to the anchor dropped by the :COMPOSITPIC: FFP. To disable the display of the dropdown box follow the steps below: Specifiy only one image file. Set the label to a null label i.e. [:label=:IMGLOADER:...] Typically the dropdown box would be disabled to use the IMGLOADER to load a static image over which text or images are overlayed OR to load am image for decorative or illustrative reasons. If you will be using this widget with reloads, please see FFP Reloads for important details.	__FFP__CPPictogram[:Label=Pictogram: IMGLOADER:0!10!100!150 !images/picto1.jpg@Bob !images/picto2.jpg@Jane !images/picto3.jpg@Mary]
HTML: n/a
WIDGET TYPE: Image Loader Widget - :FILEUPLOADER:
Defines a PlugIn Display Object which upload a file. See Custom Artwork Upload for details on how to configure the upload system and were files will go. This widget will create a unqiue directory for each customer and upload the files to that directory. This fule name and directory will be included in the FFP.	__FFP__Files[:Label=Upload special file:FILEUPLOADER:]
HTML: n/a
WIDGET TYPE: Image Loader Widget - :IMGBROWSERLOADER:
Defines a PlugIn Display Object which loads an image from a CSS browser pop-up window which may include custom uploaded file from the customer's computer (See Custom Artwork Upload for details). There are two parts to this FFP Tag. The entry field described below and the :COMPOSITPIC: image where this component image is dispayed. The component image will be displayed within an area of the COMPOSITPIC defined by X Location,Y Location, box width, and box height. The X/Y location is relative to the upper left corner of the COMPOSITPIC (i.e. x=0 and y=0 will result in the component image's upper left corner overlapping the upper left corner of the COMPOSITPIC. See also: See composite picture layout The entry field is a CSS Floating pop-box which will contain control buttons+dropdowns and a set of thumbnail images which are the image files as found in the selected directory. Scrollbars appear as needed. The images are displayed 1:1 in size. The names of the images are derived from the filename without extension. These files are directly accessed by the server. The names must follow standard naming conventions for internet files. The user selects a thumbnail by clicking on it. The image is immediately show as part of the composite image. There is also a directory selection dropdown, upload your own file button, and a close windows button. Browsers have limitations with CSS floating boxes. Even with a solid background on the floating box, form fields will show through. As a result, it is imperitive that the floating box open in an area of the devoid of standard <form> entry fields. The floating box can overlay a WYSIWYG text entry field. The CSS Popup will appear just to right of the COMPOSITPIC. If the composit pic is wider than 400px and taller than 100px THEN the CSS will go into narrow mode which will show one image per line in a single column next to the COMPOSITPIC. In the example to the right ":IMGBROWSERLOADER:" indicates the picture location and size specified below: X Location = 0 (this is the horizontal position) Y Location = 10 (this is the vertical position) width=100 height=150 Directory locations to find files for display; default image of the first file found in the first directory where "en/images/Pictograms/ANSI-Body" = directory name and "ANSI Body" = display name Names displayed for each directory (in the directory selection dropdown): ANSI Body, ANSI Machinery, Arrows, abd etc. Sytax: [LocX]![LocY]![width]![height]![ImageDirectory1]![ImageDirectory2]![ImageDirectory3] **The above X,Y locations are where the image will be dispayed relative to the anchor dropped by the :COMPOSITPIC: FFP. To disable the display of the dropdown box follow the steps below: Specifiy only one image file. Set the label to a null label i.e. [:label=:IMGBROWSERLOADER:...] If you will be using this widget with reloads, please see FFP Reloads for important details.	__FFP__Pictograms[:Label=Images:IMGBROWSERLOADER: 10!100!100!100! en/images/ANSI-Body@ANSI Body !en/images/ANSI-MAchinery@ANSI Machinery !en/images/Arrows@Arrows !en/images/Common-Hazars@Common Hazars !en/images/Electrical@Electrical
HTML: n/a
WIDGET TYPE: Image Loader Widget - :IMGLOADERSELECTOR:
Defines a PlugIn Display Object which loads an image from a fixed file (w/o selection options), a dropdown selection, OR a custom uploaded file from the customer's computer (See Custom Artwork Upload for details). IMGLOADERSELECTOR differs from IMGLOADER in that IMGLOADERSELECTOR creates two dropdown boxes. One box lists directories (specified in the IMGLOADERSELECTOR parameter list). The second box lists the files found in each of the directories listed in the first box. IMGLOADERSELECTOR provides a convient way to group image files. The directory structure and file browsing that is used, makes this widget very powerful and flexible./p> There are two parts to this FFP Tag. The entry field described below and the :COMPOSITPIC: image where this component image is dispayed. The component image will be displayed within an area of the COMPOSITPIC defined by X Location,Y Location, box width, and box height. The X/Y location is relative to the upper left corner of the COMPOSITPIC (i.e. x=0 and y=0 will result in the component image's upper left corner overlapping the upper left corner of the COMPOSITPIC. See also: See composite picture layout In the example to the right ":IMGLOADERSELECTOR:" indicates the picture location and size specified below: X Location = 0 (this is the horizontal position) Y Location = 10 (this is the vertical position) width=100 height=150 Directory locations to find files for display; default image of the first file found in the first directory where "en/images/Pictograms/ANSI-Body" = directory name and "ANSI Body" = display name Names displayed for each directory (in the directory selection dropdown): ANSI Body, ANSI Machinery, Arrows, abd etc. Sytax: [LocX]![LocY]![width]![height]![ImageDirectory1]![ImageDirectory2]![ImageDirectory3] **The above X,Y locations are relative to the anchor dropped by the :COMPOSITPIC: FFP. To disable the display of the dropdown box follow the steps below: Specifiy only one image file. Set the label to a null label i.e. [:label=:IMGLOADER:...] Typically the dropdown box would be disabled to use the IMGLOADER to load a static image over which text or images are overlayed OR to load am image for decorative or illustrative reasons. If you will be using this widget with reloads, please see FFP Reloads for important details.	__FFP__Pictograms[:Label=Images:IMGLOADERSELECTOR: 10!100!100!100! en/images/ANSI-Body@ANSI Body !en/images/ANSI-MAchinery@ANSI Machinery !en/images/Arrows@Arrows !en/images/Common-Hazars@Common Hazars !en/images/Electrical@Electrical
HTML: n/a
WIDGET TYPE: Price Field Widget - :Price:
Defines a specical case TEXT field which holds a price. This field will take part in any global percent updating of templates done using the admin bidding page. In the example to the right ":Price:" indicates this is a text field with a size=10 and a max length of 20. The third parameter is option and if present is used as a default value if no other values have been entered by the customer.	__FFP__PriceEach[:Price:10!20!Default Value]
HTML: <tr><td><input type=text name="__FFP__PriceEach" size="10" maxlength="20"></td></tr>
WIDGET TYPE: Total Price Field Widget - :TotalPrice:
Defines a specical case TEXT field which holds a total price replacement price for a line item. This field will be used in place of the Items.PriceEa for a bidded item when added to the shopping cart. This field is not displayed to the customer. This field will take part in any global percent updating of templates done using the admin bidding page. In the example to the right ":TotalPrice:" indicates this is a text field with a size=10 and a max length of 20. The third parameter is option and if present is used as a default value if no other values have been entered by the customer. Note: For this field to assign a price value to a bid placed in the shopping cart, the name of the field must be the special reserved keyword "__FFP__Total_Price". This field is used by the browser.inc.asp file to assign this value to the product.	__FFP__Total_Price[:TotalPrice:10!20!Default Value]
HTML: <tr><td><input type=text name="__FFP__Total_Price" size="10" maxlength="20"></td></tr>
CONTROL TYPE: End Request for Bid - :EndRFB:
Defines a point in an FFP at which the RFB questions end. Fields after this point are not displayed as part of bid or custom order questions. This field is never displayed directly but does result in a marker being displayed under some conditions.	__FFP__EOB[:EndRFB:]
HTML: <tr><td><hr></td></tr>
CONTROL TYPE: Rendering Control Marker - :RMarker:
Defines a point in an FFP at which rendering starts or ends. This function is controlled by a parameter passed to: ffpRenderRecordWCT(). This parameter can have one of three states: The states are: 0 - All FFPs are rendered and the RMarker is ignored 1 - All widgets are rendered up to the location of the RMarker 2 - All widgets are rendered after the location of the RMarker Rendering of the Customer MI information can be broken into two pieces. One displayed at the top of the MyAccount Page and one displayed at the botto on the MyAcocunt page.	__FFP__EOB[:RMarker:]
HTML: <tr><td><hr></td></tr>
CONTROL TYPE: FFP Comment - :Comment:
Defines a comment which is used to display static information about the FFP. This information is displayed on the e-receipts and the Bid Admin page. The comment can be optionally added to the OrderLineItem.Comment column of any lineitem. This will cause the comment to be displayed in the shopping cart basket and receipts for the line item as a comment (same slot as gift message). This special case displayable comment must be labeled "__FFP__BasketComment." The addition of this comment to the OrderLineItem.Comment column is handled by the function addItemToCart() when the item is initially added to the order. The OrderLineItem.comment is bracketed in the DB column with "<!-SYSCOMMENT->" non-displaying tags; these tags are stripped before the value is displayed and are used to ID the information as FFP System. Comments should never be used for items which will be given as gifts with a gift card. Conflicts will occur and this message will be overwritten by the gift message in the OrderLineItem.Comment column.	__FFP__COMMENT[:COMMENT:This is my comment] or __FFP__BasketComment[:COMMENT:This is a comment which will be displayed in the shopping cart]
HTML:n/a
WIDGET TYPE: Entry Group Boxes - :STARTEBOX:
Defines the start of a group or section box which will appear around a set of entry widgets. The format of the box is defined globally by the CCS entry TABLE.FFPEBox. Example of CCS: TABLE.FFPEBox { BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 5px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 5px; BORDER-LEFT: gray 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: gray 1px solid } The STARTEBOX command must be placed inside the FFP Containing <TABLE> the same as any other widget. If free-form HTML is included in the FFP, be sure to start the STARTEBOX inside a Containing <TABLE> which is part of the Free-Form HTML. __FFP__AltTable[:FREESTANDINGOUTSIDECONTENT:<TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0>] __FFP__EBOX[:STARTEBOX:]	__FFP__EBox[:STARTEBOX:]
HTML: <!--AN0--><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 Class="FFPEBox"><tr><td><TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0>
WIDGET TYPE: Entry Group Boxes - :ENDEBOX:
Defines the end of a group or section box which will appear around a set of entry widgets. The format of the box is defined globally by the CCS entry TABLE.FFPEBox. Example of CCS: TABLE.FFPEBox { BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 5px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 5px; BORDER-LEFT: gray 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: gray 1px solid } The ENDEBOX command must be placed inside the FFP Containing <TABLE> the same as any other widget. If free-form HTML is included in the FFP, be sure to start the ENDEBOX inside a Containing <TABLE> which is part of the Free-Form HTML. __FFP__EBOX[:ENDEBOX:] __FFP__AltTable[:FREESTANDINGOUTSIDECONTENT:</TABLE>]	__FFP__EBox[:ENDEBOX:]
HTML: </table></td></tr></table>
HTML TYPE: Free standing content w/o data entry - :FREESTANDINGCONTENT:
Defines content which is displayed without an entry field. This tag can be used for comments, statements, instructions, etc.	__FFP__Content1[:FREESTANDINGCONTENT: <p>This is my content.</p>]
HTML: <tr><td>This is my content.</td></tr>
HTML TYPE: Free standing content w/o data entry - :FREESTANDINGOUTSIDECONTENT:
Defines content which is displayed without an entry field and without table row formating. This tag can be used for beginning and end tables, for comments, statements, instructions, and etc. Note: If this field is being used to replace the standard FFP entry field tables then all the fields should be labled using the special reserved keyword "__FFP__AltTable" (i.e. see second example)	__FFP__Content1[:FREESTANDINGOUTSIDECONTENT: <p>This is my content.</p>] __FFP__AltTable[:FREESTANDINGOUTSIDECONTENT: <table>. . . . . . .</table>]
HTML: This is my content.

Example of an FFP Template of (recordid=0) which uses dropdowns and text field Widgets with labels:

__FFP__OfficeHours[:Label=Office Hours:TEXT:60!50]
__FFP__RetailPriceRange[:Label=Retail Price Range:TEXT:60!200]
__FFP__InterestedAreas[:Label=Interested in these areas for houses:TEXT:60!400]
__FFP__NotInterestedAreas[:Label=Not Interested in these areas for houses:TEXT:60!400]
__FFP__TypeHouseDoNotLike[:Label=Type of house you DO NOT like i.e. brick, wood, multistories etc.:TEXT:60!400]
__FFP__UseForHouse[:Label=Use for house i.e. retail, wholesale, rental:TEXT:60!400]
__FFP__SizeLimits[:Label=Limitations on the size of homes (sf):TEXT:60!400]
__FFP__HowLongDoing[:Label=How Long have you been doing this?:TEXT:60!50]
__FFP__HowManyHome[:Label=How many homes have you bought?:TEXT:60!50]
__FFP__LeadtimeFunding[:Label=Leadtime needed for funding?:TEXT:60!50]
__FFP__Funding[:Label=Main source of funding:Dropdown:+Line of Credit!Hard Money!Cash]
__FFP__HomesPerYear[:Label=How many homes do you wish to buy each year?:TEXT:60|50]

What is this?
If present, this param will cause the display of a help link titled "what is this?" which is displayed next to the entry field for the item. The link can be either a FULL URL or a relative URL. The link will be opened in the default SendSafe help box.

JavaScript = <a href=# onClick=""return(openHelpPopUp( 'URL#anchor', 400, 700))"">"

FFP Reloads
When an FFP is reloaded for any reason, all the parameters selected by the customer for the FFP are saved and then used in the freshly reloaded FFP dialog box.

Note: This data may be saved in POSTED FORM data, cookies, or a previously submitted matching item SKU in the DB.

If you want the values to remain between page reloads the FORMFIELDNAMES for those fields which are to remain must be the same.

Issues which will cause values to not be saved
1.The FORMFIELDNAMES for a value on a newly reloaded FFP does not match any label in the old FFP.

2. When the newly reloaded FFP has all the same FORMFIELDNAMES for the widgets BUT not the same options/values of the old FFP, THEN there is a possibility that some of these saved parameters may be invalid (i.e. no longer match an option for a widget).

This parameter mismatch can cause the incorrect display of an image controlled by an IMGSELECTOR from the previous FFP. This mismatch problem can be eliminated by changing the FORMFIELDNAME of a widget which can mismatch. This will prevent the saved parameters from be applied to the new incompatible widget. Example:

__FFP__CPPictogram[:IMGLOADER:0!10!100!150 !images/picto1.jpg@Bob !images/picto2.jpg@Jane !images/picto3.jpg@Mary] and
__FFP__CPPictogram[:IMGLOADER:0!10!100!150 !images/imm1.jpg@Bob !images/imm2.jpg@Jane !images/imm3.jpg@Mary]
These FFP widgets will have parameter mismatches because they contain different options.

__FFP__CPPictogram1[:IMGLOADER:0!10!100!150 !images/picto1.jpg@Bob !images/picto2.jpg@Jane !images/picto3.jpg@Mary] and
__FFP__CPPictogram2[:IMGLOADER:0!10!100!150 !images/imm1.jpg@Bob !images/imm2.jpg@Jane !images/imm3.jpg@Mary]
These FFP widgets will NOT have parameter mismatches because they have different FORMFIELDNAMES.

Dirty Flag
The FFP system maintains a dirty flag on some of the entry fields that have been flagged for tracking (see: :DIRTYFLAG:). The purpose of this flag is to control submit logic for times when a reload is needed before submission to perform price updating or some such similar need.

The most common reason for requiring a dirty flag reload is to force a recalculation because "SOMETHING" was entered into a TEXTBASE field.

This flag can be set by any text field which has been changed by typing. This flag is not set by dropdowns or radio buttons since these widgets have other means of triggering reloads "as needed."

The dirty flag is implemented as a hidden TEXT field labeled __FFPC__DirtyFlag. Note that __FFPC__ is a special reserved field label which must not be used by add on code.

These entry fields can set the dirtyFlag:

• :TEXT:
• :TEXTAREA:
• :NUMBER:
• :FMTTEXT:

Notes:

• A reload prompt JavaScript dialog is displayed when the addtocart button is pressed and dirtyflag = true.
• This reload request dialog will automatically reload the dialog when dismissed.
• A reload dialog will ONLY be active if the :DIRTYFLAG: TAG is present in one or more widgets.
• The text displayed by the dialog is defined by the :DIRTYFLAG: FFP widget. If different display text are set then the last text which has been defined will be displayed. You can really have only ONE text message per dialog.

Composite Picture Layout
:IMGLOADER: tags are used to define images that are loaded on top of each other to form a composite image (like photographic slides being sandwitched together). The z-order of the images is established by the order of appearance of each IMGLOADER tag in the FFP DB record.

Typically each layer contains an image based on a selection made by the customer as they build a custom product.

Here's an example... In this example we have four images that are layered on top of each other to form a complete composite image. Many of the images that are layered will require transparent areas through which parts of early images will show. The images do not need to be the same size. The images are positioned relative to the upper left hand corner of the :COMPOSITPIC: tag's location on screen. The :COMPOSITPIC: tag must come before all other entry fields in an FFP dialog box definition or all other entry fields must have their position constrained inside table cells which do not overlap the location of the :COMPOSITPIC: floating box. Failure to do the above can result in in this image floating box overlaying other dialog box controls.

	This is the composite image showing all the individual layers sandwidtched togther.
	This is the background layer which adds color to the composite. In this example it is white background layer. This image has a Z-Order = 1.
	This is the frame layer which adds a frame to the composite. In this example it is black frame layer. This image has a Z-Order = 2.
	This is a layer which covers the top 1/2 of the composite with a logo/message. In this example it is warning logo. This image has a Z-Order = 3.
	This is a layer which contains a small image or pictogram. In this example it is no fire pictorgram. This image has a Z-Order = 4.

FFP Example Setup
Below is a screenshot of a questionnaire dialog box used for the purchase of a custom sign. The questionnaire is created from an FFP record and displayed on a showcase ordering page. All the entry fields in the FFP areas of this example are configurable in location, effect, content, and quantity. You can have dozens of custom entry fields for a product or just one.

Below is the FFP DB Record which creates an entry form like the above example.

Each line listed above defines one of the fields in the dialog box or a block of decorative HTML (see templates for information on each entry type). The table below lists each line by itself with details and examples.

FMTTEXT Widget Internals

The FMTTEXT widget uses a floating box to display the text combined with a <TEXTAREA> entry field into which the text is entered.

Each keystroke event in the <TEXTAREA> is captured and handled by the JavaScript function showTextOnTemplate().

function showTextOnTemplate(textVal, objTagID )
textVal = "text string to be displayed in floating box."
objTagID = The ID for the Floating box in which the text will be displayed.

The "Best Fit" function works by rendering fully formatted text inside a hidden CSS sandbox without fixed size. The text is ressed up inside the sandbox in discreet steps. After each resizing, the size of the box is checked. Once the size of the box reaches the size of the area to be "Best Fit" the process is complete. The values calculated in this hidden sandbox are then used in the visible floating box.

HTMLFMTTEXT Widget Internals

The HTMLFMTTEXT widget uses a floating box to display the text in a program-like WYSIWYG editor.

The refresh hook goes into a function named: editor.js & moz/editor.js ? realtime(). The location in the function for the hook is the very end (approximately ln#2123). Look for the function _forceCEUpdate().

// SENDSAFE HOOK(1)
_forceCEUpdate( oName, oEditor.document.body.innerHTML );
// SENDSAFE HOOK(2)

The JavaScript variable ceEditObjName[] is an array of HTML Editor object linkage. This linkages is:

• oEditxxx - name/id of the WYSIWYG editor object.
• #CPLayerxxx - CSS Selector name of the visible floating box linked to this editor object.

See: function InnovaEditor(oName) for list of object control.

See: this.limitColorToRGB for customized color pallets.

See: this.restrictionCaseFoldUp for control over uppercase folding.

FFP Example of a Wizard

Below is the FFP DB Record which creates a simple wizard entry form.