🚀 MegaEdit Problem Solvers: MegaScripts, Form Builder & Data 🚀

Picture of 🚀 MegaEdit Problem Solvers: MegaScripts, Form Builder & Data 🚀

Fixing Missing Placeholder Values in MegaEdit Products Using Form Builder Scripts

If you're using the FormBuilderRefactor script to populate variable data in MegaEdit products and notice that some placeholder values (e.g. prices) are not displaying correctly, this guide will help you identify and resolve the issue. This commonly occurs when placeholder variables are not rendered due to layout formatting inconsistencies or missing layout assignments.

The issue may affect only specific users or layouts, and can be caused by a combination of script logic, font styling within placeholders, or incorrect layout configuration. This article outlines how to troubleshoot and fix these problems.

Use cases

  • Placeholder values not displaying for specific users in MegaEdit products
  • Text fields showing only partial or incorrect variable output
  • Layout changes not saving or reflecting for end users
  • Issues with default layouts not matching assigned layouts in Form Builder CSV
  • Inconsistent font styles within placeholder text causing variable mismatch

Key settings in Infigo

  • Form Builder Script Configuration: Admin > Dynamic Products > Edit Script Configuration
  • Global Additional Data: Admin > Additional Upload Data > GlobalData
  • Layout Assignment CSV: GlobalData > Flyers folder > e.g. HWB_FlyerA6_TeamEvent.csv
  • Layout Editor: Admin > Product > Edit > MegaEdit > Layouts
  • Resave Var Fields: Editor > Tools > Resave var fields (we updated variable values)

Step-by-step guide

  1. Open the MegaEdit product in the admin editor.
  2. Apply the layout you want to edit using the layout dropdown.
  3. Click into the text field containing the placeholder (e.g. [++KidsCelebrationPrice-OffPeak++]).
  4. Check for inconsistent font styles:
    • Highlight each character in the placeholder individually.
    • Ensure the entire placeholder uses the same font family and style.
  5. If styles differ, either:
    • Delete and retype the affected character(s), or
    • Select the entire placeholder, change to a different font, then switch back to the correct font.
  6. Click outside the text field to exit edit mode.
  7. Click Resave var fields (we updated variable values) in the editor toolbar.
  8. Save the layout using the Update Layout button.
  9. Ensure the user is assigned to the correct layout in the relevant CSV file (e.g. HWB_FlyerA6_TeamEvent.csv).
  10. If a user is not assigned a layout, the system will use the product’s default layout. Make sure the default layout is correctly configured.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

Managing Departmental Budgets with the Budget MegaScript

The Budget MegaScript is designed to automatically top up each user within a department with a set budget amount. This means that if you assign a budget of $500 to a department, every user in that department will individually receive a $500 budget.

This feature ensures that budgets are allocated on a per-user basis, rather than as a pooled total across the department. There is no aggregation of users' purchases toward a single department-wide budget.

If you need to assign individual budgets during user uploads, you can update user budgets in bulk without having to edit them one at a time. For more information, review the user upload documentation available in the academy.

Use cases

  • Automatically assigning a fixed budget amount to every user in a department.
  • Managing departmental budgets when budgets need to be tracked individually.
  • Utilizing bulk uploads to update individual user budgets efficiently.

Key settings in the Admin Interface

  • MegaScript Instances: Navigate to the Admin panel and select the MegaScript Instances section.
  • Budget Option: From the dropdown menu within the MegaScript Instances, select the Budget option to create a new budget script.
  • Access Control: Ensure that your account has the necessary ACL permissions, such as managing and using MegaScripts.

Step-by-step guide

  1. Log in to the Admin Interface.
  2. Navigate to the MegaScript Instances page.
  3. Select the 'Budget' option from the dropdown menu.
  4. Click 'Create' to enable the Budget MegaScript.
  5. Assign a budget amount; this amount will be automatically topped up for each user in the selected department.
  6. If needed, use bulk user uploads to set individual user budgets without manual editing.

Related links

For additional guidance, head over to the Product Academy or contact our Customer Support team.

Setting Up a Single Input for Multi-Page Signatures

This article explains how to configure a product so that a customer can enter their name once and have it automatically appear as a signature on multiple pages. The solution applies when using the Invent platform.

By using a variable placeholder, you can bind the same input field to text boxes on different pages. When the customer updates the field, the change propagates throughout the product.

Note that this setup is only supported when using Invent. If you are using MegaEdit FormBuilder, each page requires its own separate input configuration.

Use cases

  • Multi-page memo products for teachers where a single signature is displayed on every memo page.
  • Products designed with Invent that benefit from automatic variable updates across pages.

Key settings in Invent

  • Variable Creation: Create a variable in the Invent interface.
  • Text Box Properties: In each page’s text box, set the Type to Variable and select the created variable.
  • MEX File Export: Export the configuration as an MEX file and upload it to the ME product.

Step-by-step guide

  1. Create a variable in Invent that will store the customer’s name.
  2. Add text boxes to each page where the signature should appear. Note that you do not need to pre-fill these boxes.
  3. For each text box, open its properties and set the Type to Variable. Then, choose the variable you created earlier.
  4. Export the MEX file from Invent and upload it into your ME product setup.
  5. Test the configuration by entering a name into the variable field to ensure it automatically updates on every page.

Related links

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.

How to Use Barcodes in MegaEdit

MegaEdit is compatiable with the use of barcodes whether there is a static data value you wish to add to it in the editor or whether you need to inject some data into a barcode on output creation (PDF creation) like for instance a shipping address of the user to be used with a barcode scanning device etc.

Firstly you will need to assign the the Barcode script against your dynamic product under the scripts tab against the product. (Speak to the Helpdesk if the script is not avaliable to select from the lists of scripts)

Screenshot_2018-07-02_10.52.20.png

Once the script is enabled and assigned against the product you will see an "Add Barcode" button in the editor.

Screenshot_2018-07-02_10.53.13.png

Clicking this button will create a Barcode field on the canvas area. A shown below:

Screenshot_2018-07-02_11.06.52.png

This is the default start point of your barcode field.  There are 2 tabs on the Barcode field pop up options, Configuration and Details.  Details will list the same options as you see on the text/image field deatils so X/Y coordinates, Height/Width, tags allow/deny restrictions etc.

Configuration tab as displayed above shows a number of configurable settings, we shall briefly explain each one detailed below:

Type = What type of barcode you which to create, example STD-25/INT-25/QR Code/Data Matrix (see dropdown in editor for full list)

Value = The data you add here will be what is created via the barcode.

Encoding Mode = Only displays when Data Matrix is selected - options are BASE256/ASCII/C40/TEXT/X12

Auto Scale = Scales the barcode to fit the barcode field

Show Human Readable = This simply displays the value input below the barcode (as shown in above image with 123456789)

Margin Human Readable = This is a pixel value that adds space/padding between the base of the barcode and the Human readable value displayed below it.

Font Size = This will dictate the size of the text being displayed for the Human readable value.

Barcode colour = click the icon colour picker to enable the Megaedit colour pop up deatails where you can now assign a diffierent colour for the barcode to be displayed in.

If you wish to inject any other data from within catfish into a barcode on output creation or editor etc then this is possible but there would need to be a "MegaScript" written and applied to your storefront which is a chargeable development request, please contact the helpdesk for an explanation of your workflow requirements so a quote can be formally drafted for your approval.

How to Configure Autofill in MegaEdit

MegaEdit has a number of default scripts available (MegaEdit PRO version ONLY) - here we go over the setup for using and applying the Free Autofill script. 

NOTE: If you require scripting to be enabled, please contact the support desk. 

Navigation

To navigate to the MegaEdit scripts, go to Catfish > Infigo Variable Data > Dynamic Products. Then click the 'Products Tab' in the upper right-hand corner, this will show all of your Dynamic Products. Press 'Edit' on the product you want to work with. Navigate to the 'Scripts' tab on the upper right-hand corner. 

Requirements

First, enable the Free Autofill script by checking the box within the product's script tab. Then press 'Save Changes'.

FreeAutofill01.PNG

This script sets the autofill functionality for the assigned product. There are 2 script versions for the autofill - Free Autofill and Layout Based Autofill. 

Free Autofill allows the images to auto update empty image fields across pages of the product.

How do I Configure Prepopulate Data?

MegaEdit has a number of default scripts available to use.  Here we look at the Prepopulate Data Script and how to apply it to a product.  The script allows you to set a template to autofill with a users Catfish data based on their login info. Examples: Username, email, phone, custom fields 1, 2 and 3. etc

1. To enable this, navigate to Catalogue > Product Types > MegaEdit > MegaEdit Products > Edit > Scripts tab of an existing product and add the script as below.

mceclip0.png

The prepopulate data script is used to populate a dynamic product with some information from the end users' Infigo signup data.

When you have enabled the script there will be a button in the editor marked 'prepopulate data' - this will be greyed out to start with with until you select a text field.

When you have selected a target text field - click the button and you will see a pop up of selections. Please note you can ONLY have 1 selection per field - these do not act as placeholders.

Screenshot_2020-12-02_at_16.58.58.png

The list of prepopulate data fields are:

Job Id

Product Id

Customer Title

Customer Full Name

Customer First Name

Customer Last Name

Customer Email

Customer Address Line 1

Customer Address Line 2

Customer Street Address

Customer Street Address 2

Customer Date of birth

Customer Gender

Street

City

Company Name

County

Country

Fax Number

Mobile Number

Postal Code

Language

Phone number

 

Selecting any of the above will assign that 'tag' to the field which would look like below:

Screenshot_2020-12-02_at_17.04.10.png

 

We also support the custom fields from registration (if enabled), Custom field 1, 2 and 3. (How to enable custom registration fields) To use these fields in your template you need to add a "tag" to a text field and use this tag: prepopulate_Custom1

This also includes the use of an Avatar image if assigned to a user account.  You can use this tag: prepopulate_avatar.

Once you have completed your setup of fields, save the product default for that product under Menu > Save product default.

 

To view the data being pulled in successfully you will need to launch a new window and login in as a registered user - you cannot view the data as a storefront admin user even if you emulate user mode.

Example using Job Id:

Screenshot_2018-01-03_15.29.22.png

 

MegaScripts: Form-to-Order Automation

 

The Form-to-Order Automation enhancement extends Infigo’s MegaScripts system to support order creation from standalone web forms.

When a form is submitted, the MegaScript collects the submitted data, creates a customer (if needed), and places an order automatically.
This allows storefront managers to build custom workflows — for example, product request forms, branded portals, or marketing landing pages — that feed directly into Infigo’s production flow.

This automation removes friction for users who don’t need to browse or check out, while still maintaining full tracking and reporting within the platform.


What’s included

  • Ability to trigger MegaScripts from form submissions

  • Automatic customer creation if the user doesn’t exist

  • Full order placement via API

  • Support for field mapping between form data and order models

  • Configurable success and error pages for user feedback

  • Variable substitution for flexible, reusable script configurations


Key settings

  • Trigger Event:
    Set to Place Order or Form Submit to initiate order creation on form submission.

  • Variable Mapping:
    Defines how form field names map to order data (e.g., ${email}, ${first_name}, ${quantity}).

  • Default Variables:
    Allows preset values or fallback behaviour for missing inputs.

  • Success/Error Pages:
    Optional redirect URLs displayed based on whether the API call succeeds or fails.

  • MegaScript Configuration JSON:
    Used to define field mappings, default variables, and customer/order logic.


Use cases

  • Sample request forms: Visitors can request free samples that are logged as orders automatically.

  • Internal job requests: Internal users can submit forms that generate production tickets without going through checkout.

  • Marketing campaign pages: Capture orders directly from microsites or promotions.

  • Automated B2B workflows: Create templated forms for recurring business customers.


Step-by-step implementation

Step 1 – Create a MegaScript

  1. Go to Admin → MegaScripts → Add New.

  2. Set Trigger Type to On Event and choose Place Order.

  3. In the configuration JSON, define your mappings. Example:

     
    { "pluginSystemName": "mis.scripting", "hubSpotProperties": {}, "customerMapping": { "username": "${email}", "email": "${email}", "firstName": "${first_name}", "lastName": "${last_name}", "fullName": "${first_name} ${last_name}" }, "defaultVariables": { "country": "GB" } }
  4. Save the MegaScript.


Step 2 – Attach the MegaScript to your storefront

  1. Navigate to Connect → Scripting.

  2. Select your storefront and add the MegaScript you just created.

  3. Set the Trigger Event to Place Order or Form Submit.

  4. Save changes.


Step 3 – Build or connect your web form

  1. Create a simple HTML form that collects order information (e.g., name, email, quantity, product).

  2. Ensure form field names match your variable mappings (e.g., first_name, last_name, email).

  3. Configure the form action to post data to the MegaScript endpoint.

💡 If you’re using Infigo’s front-end form tools, map each form field to its variable in the MegaScript configuration.


Step 4 – Define response pages (optional)

  1. In your MegaScript configuration, specify URLs for successPage and errorPage.

  2. Users will automatically be redirected to these pages depending on the outcome.


Step 5 – Test the flow

  1. Submit your form with sample data.

  2. Verify in Admin → Orders that a new order has been created.

  3. Check that customer data, product details, and quantity fields match the form submission.

  4. Review MegaScript logs to confirm successful API responses.


Tips & best practice

  • Keep field names simple and consistent across forms.

  • Use default variables to provide fallback values for optional fields.

  • Enable logging (logLevel: 4) for detailed troubleshooting.

  • Test error handling thoroughly to ensure smooth user experience.

  • Combine with other integrations (e.g., HubSpot or CERM) to extend automation chains.

Variable Replacement Script

 

Using Catfish MegaEdit you can create text fields which use forms to replace variables which allows for a more user-friendly input process.

To start, you need to create a dynamic product, this article will explain how to do this.

 

Once you have made sure that ScriptingEnabled is turned you, navigate to Catfish -> Infigo Variable Data -> Dynamic Products -> Scripts as seen in the screenshots below.

Dynamic_Products_path.pngScripts_link.PNG

We can enable the Variable Replacement hardcoded script if you require it.

Now that the script is enabled, you need to navigate to Catfish -> Infigo Variable Data -> Dynamic Products and click "Edit" beside your dynamic product. Once here, you need to navigate to the Scripts tab, find Variable Replacement in the script list and enable it by double-clicking on the checkbox beside it and clicking the green tick.

Variable_Replacement_script_enabled.PNG

In the same section you'll find the Config column to the right of the Order column, the order column being visible in the screenshot above. In order for the script to work properly, you need to copy and paste the code below into the Config column of the Variable Replacement row.

{
VariableTag: "form-ph",
Placeholder: {
Start: "[++",
End: "++]"
},
Mode: "UI",
SelectArea: {
NormalFormat: {
fill: "",
stroke: ""
},
HoverFormat: {
fill: "rgba(255, 255, 0, 0.2)",
stroke: "black"
}
},
TextAreas: ["Footer", "Body"],
ProportionalScaling: {
SeparatorRegExp: "\s*:\s*",
MaxFontSize: 40,
MinFontSize: 20,
Tag: "form-ps"
},
CombineTag: "form-region-"
}


Your Variable Replacement config column should now look like the screenshot below.

Variable_Replacement_script_default_config.PNG

Now you'll need to find your dynamic product on your storefront and open it in megaedit (make sure you're still signed in as a storefront admin).

Create a text field and increase the size to fit the page (this is for demonstration purposes, the text field can be any size)

For the same text field, navigate to the Details tab of the Text Options popup (the far right tab) and find the Tags field. In this field, type in "form-ph" without the "s then type the following lines in the text field itself:

[++Header++] [++Body++] [++Footer++]

This is what you should end up with:

Variable_replacement_text_field.PNG

Still in MegaEdit, navigate to Show Menu -> Admin Links and click on Save as product default. Once this is done, the script will be set up and an easy way to test this is to open an incognito/private window and navigate to your product without signing in, which is the method I will be using, however signing out of your account and navigating there will also work.

Once you've found your product, open it in megaedit and you will be face with a nearly identical screen, however if you hover your mouse over the field you made you'll see it become highlighted in yellow. Clicking on this field will open the below form which allows you to edit the field itself.

Variable_replacement_form.PNG

Anything you put in the fields will replace the respective variable placeholders as soon as you hit OK. For example, if you put "This replaces the header" in the Header box and click OK, the text field will change to what is in the screenshot below.

Header_replaced.PNG

[++Header++] was replaced with the text given in the Header field while both [++Body++] and [++Footer++] were replaced with what was in the Body and Footer fields, which in this instance is nothing.

 

Returning to the config that was pasted in earlier, there are a lot of customisation options which can be controlled by editing different parts of it. 

Config.PNG

VariableTag

This is the tag you use to assign text fields which you want to be affected by this script. Whatever you put in the quotation on this line will be used as the tag.

Placeholder

You may have noticed that when you were filling out the text field in megaedit the fields which were replaced started with [++ and ended with ++]. This is because these are what is used to define placeholders (placeholders being the fields which get replaced through the use of the form. You can change these to whatever you want by changing what's in the quotation marks, for example you could have your placeholders be define by surround them with < and > or even PlaceholderStart and PlaceholderEnd.

Mode

There are four separate modes available to this script. You can change which mode the script runs by filling the quotation marks on this line with one of the following names:

UI - This is the default mode and will produce the form shown previously in this article.

No Ui - This disables the form and allows the field to be edited as if it were a regular text field, however the placeholders will still be there.

UI with opt out - This option adds a third button to the form; Dismiss Dialog. When this is pressed, the form will disappear and won't re-appear until the webpage is refreshed, allowing the user to click on the field and edit it without the usage of the form

Sidebar - This allows the user to manually edit the text field as they would without the use of the form, however a sidebar appears on the right of the screen which can be used to edit the placeholders directly.

TextAreas

The placeholders used in this example aren't fixed, you can add or remove placeholders as you see fit using this section of the config. For example, if you wanted to add a field named "Limb" you would need to change what's in the square brackets from [ "Footer", "Body" ] to [ "Footer", "Body", "Limb" ]. Note: In order to make use of this new variable, you will need to put a placeholder with the appropriate syntax around it in your text field I.E. [++Limb++]

ProportionalScaling

The text input from the form will try and automatically scale to fit the text given on the page better, however it is possible to limit this using this setting. You can set a minimum font size and a maximum font size which the scaling will have to obey.

You can also manually set a factor for each field to scale to when you are inserting the placeholder variables into the megaedit field by using the format [++Placeholder:Factor++]. For example, to increase the size of the header by 50% you would need to write [++Header:1.5++] in the text field instead of [++Header++]. This will still obey the minimum and maximum sizes you have set however.

 

MegaEdit batch upload validation

 

We have now added the ability to validate records uploaded against a MegaEdit product which uses the Standard Batch Script. This validation is all powered through the use of Regular Expressions, commonly referred to as Regex.

A regular expression is a string of characters which are used to define criteria for the system to check against when validating input. One of the most common uses of this is to validate email addresses in email input fields. Below is an example of a regex to validate an email address:

(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))

This is the one our system uses, and as you can see, a regex can quickly become quite complex.

Below is a far simpler example, which simply checks to ensure that the word starts with a capital letter:

/([A-Z])\w+/

The above examples are just proof of how easily customised regular expressions are, and below is a link to a website which allows you to test your regex in real time:

Live Regex Editor

These expressions can be used to validate the record entries for a batch upload with MegaEdit and either prevent the user from adding the product to the basket, or simply warn them that some records will not be processed - this is controlled in the configuration.

To enable this functionality, you need to ensure that the "Standard Batch Script" is enabled in your MegaEdit product's "Scripts" tab (this is done by checking the box next to the script and clicking the green tick). You must also ensure that the "Batch Source" setting is set to "CSVPlugin" under the "Product Properties" tab, as seen in the screenshots below.

Standard_Batch_Script.png

CSVPlugin.png

Once you have enabled both of these settings for the product, you then need to add the following snippet of code to the "CONFIG" column for the Standard Batch Script:

{
validateData: true,
disableAddToBasket : false
}

You can place this in the configuration section by clicking the field with your mouse, which will then bring up an editor. Once you have entered the code in the field, you will need to click on the green tick again to save the configuration. See the screenshot below for an example of how this should look once copied in.

Script_added.png

Simply adding the code in will enable the regex function, however you can edit the config to tweak its behaviour to your liking.

You can change "validateData: true," to "validateData: false," to disable the feature, and you can change "disableAddToBasket : false" to "disableAddToBasket : true" to prevent the user from being able to add the product to the basket if there were any erroneous records in the csv uploaded.

Once you have configured the plugin to your liking, the rest of the setup takes place in the MegaEdit product itself, so to continue setting this up you will need to sign in as a storefront administrator, or someone with equal rights, and launch the product in the editor.

By default, there will already be a "FirstName" placeholder as an example of what the placeholders should be called. If you click "Use" beside it, MegaEdit will create a text field on the page and populate it with the placholder to allow you to use it with the batch upload. However, you can also manually type the placeholder in so long as it follows the format "[++PlaceholderName++]".

You can also add your own by clicking the "Add" button and naming the variable whatever you would like, however this name must correspond to a column header for the CSV you wish to upload. 

Add_placeholder.png

As you can see below, I have added some basic placeholders to demonstrate different types of regex.

Placeholders.png

Now that there are some placeholders to work with, you can start applying regex validation to them. To do this, click the "Manage Placeholders" button in the top left menu of the editor:

Manage_Placeholders.png

Once you click this button, a menu will pop up which will show all the placeholders present on the product and allow you to assign regex validation to it.

Manage_Placeholders_popup.png

If you click on the edit button in the "Actions" column next to a placeholder, you will be able to edit both the action and the verification field.

The action field contains a dropdown list which will allow you to "trim" the CSV fields before validating them. The three options are: "Trim", "Trim Left", and "Trim Right", which will delete blank spaces either from both sides of the field's entry, or the left or right respectively. This will allow you to write your regex without having to account for blank spaces.

Action_Dropdown.png

The dropdown in the "Verification" column will allow you to select from any of the regular expressions currently present in the "Verification Items" tab. There are a handful of pre-set ones which are added by the script, however you can add as many as you would like so that you can have full control over your regex.

Verification_Dropdown.png

Under the "Verification Items" tab, you can see a list of the pre-set expressions, with both their name and their expression, as well as a button to add new ones to be used in the "Placeholders" tab.

Verification_items_tab.png

As you can see in the screenshot below, I am adding a simple regex to check that the first letter of the word is capitalised. I will be using this for the "Username" placeholder. 

Capitalised_Word.png

After clicking the tick in the "Actions" column and clicking "Confirm" I then navigated to the "Placeholders" tab and selected my new regex from the dropdown for the "Username" placeholder.

I then selected the "Telephone UK" regex and the "Email" regex to the respective rows, as well as adding the "Trim" feature to all three fields.

Final_config.png 

Now, using the "Upload CSV" button, I am going to upload a CSV which contains three records. The first will have one invalid field, the second will have no valid fields, and the third will be perfectly valid.

Fields_to_upload.png

When I upload this, I will receive an error in the top right saying that there were 4 invalid values, which is correct. It also allowed me to download a CSV which identifies the issues.

4_invalid_values.png

Provided_CSV.png

As you can see in the screenshot below, there is only one output previewed as there is only one record which is completely valid.

Preview.png

However, since I have left "disableAddToBasket" as "false" I am still able to add this product to the basket, however there will only be one record output. If I were to set this to "true", the "Add to Basket" button will be greyed out.

 

 

Mask support script

 

MegaEdit has a number of default scripts avaliable to use (MegaEdit PRO version ONLY).  Here we look at the Mask support script and how to apply to a product.

Firstly enable the script against your chosen dynamic product under the dynamic products setup displayed below.

Screenshot_2017-12-19_14.53.55.png

You are now required to set a tag of "mask" against a field under the options tab of a fields pop up which will activate the script and that chosen field will remain the top layer when new text or image fields are added.

Screenshot_2017-12-19_14.57.04.png

Below I have added a single image field and that is automatically placed behind my mask tagged field.

Screenshot_2017-12-19_14.57.33.png

Then below I have added a second image field and that is placed behind my mask field, but, atop of the previous image field.

Screenshot_2017-12-19_14.57.48.png

All subsequent fields are placed behind the mask layer.

 

Text Flow

 

 

It is possible within MegaEdit to link a number of text fields on a page or spread so when text is entered into one field it flows into another. This is done by simply giving the fields a name, and then under the advanced text tab assigning the field you wish text field x to flow into text field y etc.

Firstly, set out your fields you wish to flow into, here we show four text fields across a spread:

 

Then name your text fields, in text properties under the details tab at the end - under the general section.

 

This will activate the text flow option under the advanced text tab. Here, you now select which field you want the selected field to flow into. You will be required to map the flow for each text field that requires text flow.

 

Once the names are done and you have mapped the flow, save the product default or switch pages to register the "data saved" pop up to make sure that the text flow mapping is saved.

Then simply type or paste in the text you want to use and it will flow across your fields.

 

You will be required to save the default format for each text field - but the format from the first text will be used across the fields that have been mapped.  Therefore, you cannot have different fonts for each field.

 

PLEASE NOTE: 

As standard, text flow doesn't work across multiple pages. If you would like to do this please raise a ticket and reference "Advanced Product layout script" 

 

Bullet Point List Script

 

MegaEdit supports dynamic bullet points that can be a text character or an image. (Blue circle example shown below is using the text method). Here we go over the setup for using and applying the Bullet Point List script. 

NOTE: If you require scripting to be enabled, please contact the support desk. 

mceclip4.png

The Bullet Point List script applied

Navigation

To navigate to the MegaEdit scripts, go to Catalogue > Product Types > MegaEdit > MegaEdit Products. Press 'Edit' on the product you want to work with. Navigate to the 'Scripts' tab.

 

mceclip0.png

Requirements

First, enable the Bullet Point List script by checking the box within the product's script tab. See Figure 1. Then press 'Save Changes'. 

mceclip1.png

Figure 1

 

Configuration

By using a Configure against the script, you can apply various settings.

Example Config code:

 

{
mode: "text",
image:
{ clipartAlbum: "clipart album name", clipartName: "clipart file name" }

,
position:
{ x: -10, y: 6.5, width: 4, height: 4}

,
text:
{ font: "FontName", fontSize: 12, color: "#3affef", character: "•" }

}

 

 

You need to decide which mode you wish to use, an image or a text character, and change the mode setting at the top of the Config.

Mode:

“image” will reference an image from a clipart category, you must specify the clipart album name first then the name of the image file to use, do not include the file type (.jpg / .png etc) and ensure the category and file names are exact named matches, including any capital letters etc.

Mode:

“text” will reference a character using a specified font name, font size (pts), colour (use hex #------ or CMYK using c:m:y:k eg. 8:44:56:9) and text character (you must ensure the character to be used is within the chosen fonts glyph set)

Position: x and y measurement is how far from the text field you wish to position the bullets

Position: Width and height - this is the size of the image field (in pts) that will display the image or text character.

 

Applying to a Text Field

The Text Field you want to use the bullets with is required to have a tag applied to it for the script to initiate. The tag is “bulletpointlist” (see Text options image below Figure 2)

 

mceclip2.png

Figure 2

The bullets will appear on the left hand-side of the chosen text field when a line return is registered for that line of text once you have clicked focus away from the text field using bullets.

mceclip3.png

Figure 3

Please note: Bullets will be displayed outside of the text field - you may be required to adjust the positioning of your text field to suit any page formatting. See Figure 3. 

 

Batch Data

 

MegaEdit has the functionality to allow batch uploads using variable placeholders in a template that users can upload their batch data against. Here we look at the Standard Batch Script and how to apply to a product.

Setup

Firstly, enable the script against your chosen dynamic product under the dynamic products setup displayed below.

Screenshot_2018-01-03_13.32.44.png

This script is to used in conjunction with a dynamic product that is using the CSV Plugin option.  It enables the dynamic product to read a CSV or TXT upload file.  You can also tick the script for "Standard Batch Upload options" which allows for .xls and .xlsx files to be used on a dynamic CSV product.

Screenshot_2018-01-03_13.37.57.png

Once you have applied these settings, you can move to the editor and set up your placeholders for a batch template.

When you are inside the editor, you will see some buttons for the Placeholder options

Screenshot_2020-12-11_at_00.53.49.png

Once you click on the 'Add' button, it will give you a pop up that allows you to create your own placeholder:

Screenshot_2020-12-11_at_00.56.27.png

This will then add a placeholder to the canvas with this format: [++LastName++].... this enables the user to match their data with the placeholder using the mapping option when the batch data is submitted.

Screenshot_2020-12-11_at_00.59.54.png

As you add in placeholders a dropdown list will be created - this is so you can re-use the placeholders on other text fields and pages of a template.  You click the button 'Use' to apply the placeholder selected to the canvas. 

 

Once you have finished adding your placeholders, you can then upload your data file using the Upload buttons.  This will give you a pop up where you can map your batch data to the placeholders.

Screenshot_2020-12-11_at_01.05.14.png

MegaEdit will try to auto map the placeholder name to a column name from the batch data.  Or you can uncheck the the blue tick and manually map the placeholders to the batch column data.

Screenshot_2020-12-11_at_01.16.51.png

Screenshot_2020-12-11_at_01.18.10.png

Once the data is mapped, you need to click 'Preview' to see the batch data in place.  You will be able to search through the first 5 records by default - and then add to basket to order your job.

Screenshot_2020-12-11_at_09.14.10.png

 

Full list of configuration options:

 

{
//startTag: "[++",
//endTag: "++]",
hidePlaceholder: [],
additionalPlaceholder: [],
display: "top", //"right" or "top"
useOnlyCSVUpload: false, // flag that force the use to load the CSV and map it automatically
useOnlyCSVUploadAndDoNotSkipImagePreparing: false, // do not skip image preparing
validateData: false,
autoExecute: false, // will automatically validate the barcode based on his type. Add barcode, add name, save product as default.
autoExecuteMapping: {}, // ie: "upce": "TenCommandments"
disableAddToBasket: false,
hideBatchUi: false,
hideBatchPlaceholderUi: false,
hideUploadButton: false,
configDataSource: false, // flag that if is true will open a popup with settings for parsing the CSV file,
mapping: {
allowStatic: true, // hide static fields in the mapping dialog
dialogTitle: 'Placeholder Mapping', // mapping dialog title
dialogTopInfo: '

There are %% records.

Select the checkbox to type your own data or uncheck to select a column from your csv.

',
specificTypes: [], // map only specific field types [Text, Image, Barcode], by default map all types
caseInvariantReplacement: false, // invariant replacement
textSuppressionMode: null // text suppression mode: 'Left', 'Right', 'Full' or 'Tag' (Tag: script will check for a "LeftSuppression", "RightSuppression", "FullSuppression" tag)
},
csvOptions: {
maxLinePreview: 3, // Rows without the header
customColumnName: 'Column',
defaultQuotingChar: '"',
defaultDelimiterChar: ',',
autoBatchDataDetection: {
minNumberOfRows: 2,
minNumberOfColumns: 2
}
},
images: {
support: false, // flag that allow the batch script to support images or not
albumName: "Default", // configure the selected media album, if not configured, it will choose the default album
validate: false, // flat that indicates to validate images (exists or not)
overrideStaticImages: "", // "off" / "empty"(previus config behavior), "Always", "WhenBatchDataExists"
},
minimumRecordCount: 0,
requiredMapping: {},
layoutBatch: {
columnName: 'layout', // The name of the column to check
defaultLayout: 'defaultLayout', // An optional default layout (in case the layout is missing)
defaultCategory: 'Designs', // An optional layout category (as the base)
handleMissingLayouts: true // A flag how to handle invalid/missing layouts (with a reasonable default)
// SET handleMissingLayouts: true stop the execution when missing layout
}
}

 

 

 

 

 

Layout Based Autofill Script

 

MegaEdit has a number of default scripts avaliable to use (MegaEdit PRO version ONLY).  Here we look at the Layout Based Autofill script and how to apply to a product.

Firstly enable the script against your chosen dynamic product under the dynamic products setup displayed below.

Screenshot_2018-01-03_15.41.56.png

This script has 2 functionalities, primarily it will use saved layout designs to auto populate the max amount of images in a the specified media album for the dynamic product with one of each the layout designs and fill each of the empty image placeholder fields on the pre saved layouts contained on the canvas. 

If the canvas being used has NO layouts saved at all then it's secondry functionality will be to auto fill any empty image placeholder fields on the canvas from a selected media album of your choice.

Using the first functionality (layout designs are being used) as an example: You would start with a blank document and some predesigned layouts as illustrated below.

Screenshot_2018-01-03_16.31.20.png

You would then click the Autofill button to get the pop up prompt as displayed below.

Screenshot_2018-01-03_16.31.38.png

You are required to select a media Album from the dropdown, the images in this album will be used once across the canvas pages.  The Start Fresh tick box, if ticked any images currently placed in any of the image fields will be "replaced" by a new image from the media album.  If left unticked then the images currently be used in the placeholder fields will remain. As stated in the pop up the book/product will be filled using the layout designs, repeated if neccessary until either all images from the album have been used or the max page count has been reached as displayed below.

Screenshot_2018-01-03_16.44.04.png

Then using the secondary option, no pre-saved layouts, the sequence of steps would be as follows:

Below the canvas has been prepopulated with 4 image placeholder fields and 1 has already been filled with a media image.  AutoFill has been clicked and the pop up is displayed. 

Screenshot_2018-01-03_16.16.22.png

I have selected as an example an album called "Preview size 4000" - I have set the start fresh box as not selected - so my current image on the canvas in the image placeholder should remain when we click ok - all other empty fields will be filled ONLY.  No extra layouts will be used as in this example there are not any saved against the canvas.

Screenshot_2018-01-03_16.16.35.png

As you can see the top left image placeholder has remained and the remaining empty fields have been placed with an image.

 

 

Copy Content Script

 

This article is going to explain how to use the Copy Content Script in MegaEdit. This script is extremely useful if you have multiple image fields and/or text fields that need to be automatically populated across your canvas. The article will show how both function, both image and text fields will have the same configuration. 

 

After you have read this article, you will also be able to use the Auto Fill Script with this to streamline image population. 

 

Administration Setup

1. Navigate to Catalog > Product Types > MegaEdit > MegaEdit Products

2. Press Edit on your product

3. Navigate to the Scripts tab, check Copy Content and save. If Copy Content is not available, please raise a support ticket. 

mceclip0.png

 

MegaEdit Setup

1. Add an image or text field to your canvas. In this example I have two images and two text fields. 

 

2. Double click the field, navigate to the Details panel, and scroll down to the General section.

3. Give the field a name, this name will be the same for all the fields where the image or text will be copied. In the Tags, type in source. This tag will only be used for the master field. 

mceclip1.png

4. Name the other fields exactly as above, remember to not include source for subsequent fields. 

mceclip2.png

5. The naming convention works EXACTLY the same for Image and Text Fields. 

6. Once these changes are made, please refresh your browser. 

7. Drag an image to the field. It will now populate all image fields that have the same name. Type in a text field, the text will also copy over. 

 

Congratulations! You now have this script functioning!!

 

*Amendment

We have also added some new functionality where its now possible to wipe the formatting of the source image/text (size, rotation or Text style weight, size etc) using a tag for the target fields.

You simply add contentOnly as a tag to your target/child fields and the text or image will adhere to that fields formatting settings.

 

Please view this article on how to use this with the Auto Fill Script to streamline your image population!!

 

Using Copy Content and Auto Fill Script for Streamline Image Population

 

You can also pair the Copy Content Script with the Auto Fill Script that utilizes Layouts to streamline image population. 

If you have many images that need to be copied and you want to use the Auto Fill Script, follow this simple formula:

X = Y

 

X = Amount of Pictures in the album

Y = Amount of Image Fields that need uniquely named WITH the source tag

 

These have to be at the top (left to right) of the canvas as they are the first images filled with the Auto Fill Script. 

 

The way this will work is, you will have to name the first images or text (from top, left to right) with the naming convention above. For example, if you have a canvas that needs 40 images, with only 5 images to copy, you will name the top (left to right) 5 images like this:

Name: ImageMaster1 

Tag:    source

 

Name: ImageMaster2

Tag:    source

 

So your first 5 images will be the source. All the other images will have the name (ie ImageMaster1, ImageMaster2, etc) without the source tag to automatically populate. These can be in any order. 

 

Steps:

 

1. Create a Layout or, if your product is static, add the image fields and save as product default. 

2. After the Layout is created, define your source images from the top. This example has 40 images with the first 5 (in red) named as the source. 

3. Define the other image fields with the same names, minus the source. Here I will name 35 images. Save this layout. Below I have color coded which images will link with the source: 

 

4. Refresh the browser for the changes to apply. 

5. Press Auto Fill 

6. Select the album you have your images in. Check Start Fresh. Then press Ok. 

7. The images have now populated accordingly!

 

Troubleshooting:

If the images are not populating after you have applied the copy content script, and press the Auto Fill Function, you will have to start completely new. Add the layout back to the canvas, REFRESH the browser, then repeat the process. If you are still having issues please raise a support ticket with your storefront URL, and a URL to the product landing page of your MegaEdit product. 

 

 

 

Dynamic Form Builder

 

This feature has been developed over a period of time to enable our users to create and manage forms to drive the personalisation experience in MegaEdit. Under the hood it is a MegaEdit script that, through a series of field tags, lets you dynamically control the form that is displayed to users based on what content is being shown on the canvas.

The configured form can control the following aspects of your product:

  • Field (per field control)
    • Image field
      • Image Upload with image position controls 
      • Clipart Select
      • Mask Select
    • Text field
      • Single line input with Font, Size, Bold and Italic options
      • Multi line input with Font, Size, Bold and Italic options
      • Dropdown text select for predefined text
      • Alternative background selector which allows the dynamic changing of text color for all text fields.
    • Custom field (Barcode)
      • Single line input for entering the custom data value (ex: barcode nr). Currently there is no validation.
  • Page
    • Layout (per page control)
    • Background (per page control)
  • Canvas
    • Size (global control, affects all pages)

 

Below we talk through the steps in order to set this up and start using it on your products right away.

Please note: All fields should be controlled using the form for the product.  We do not advise use of some form fields and some standard fields.  This could cause data replacement issues

 

Setup

Step 1 - Enabling the script

Firstly you need to enable the Dynamic Script 'Dynamic Form Builder', you should find this in your list of scripts against the dynamic products where you assign canvas, stock, clipart assets etc.  If it is not showing then please contact the helpdesk to get this enabled on your storefront or platform.

This is done within Catalogue > Product Types > MegaEdit > MegaEdit Products > Edit > Scripts tab. 

 

Step 2 - Setting up the tags and script config to build up your form

Deciding on where to display the form

Form can be displayed on the right side in it's own are or as a tab along with the gallery / cliparts / layouts. By default the script will load on the right side of the canvas in its own dedicated area. (This form works best with the Arone theme in place)

Script option Default Value Possible Values Usage
RenderFormInCustomTab false true / false Setting this to true will generate the form as a custom tab along with the gallery / cliparts / layouts.

Field Tags:

The script works by tagging fields with specific values, below is a list of the available tags and how they should be used.

To add a field tag, simply add the field to the canvas and then open the Text or Image options dialogue. As an admin you should see a 'Details' tab where you can configure your field restrictions and exact coordinates, scroll down until you see the 'Tags' property under the 'General' header.

NOTE: When adding multiple tags, please do not add any spaces but delimit the different tags using a pipe delimiter '|'

 

Field Tag value Info Usage
Image ImageField This will create an image control, allowing users to upload images and then edit and control them For all image fields
Image ClipartField This will create a clipart selection when tag is enabled but on certain fields you may want to restrict the clipart ui, allowing users to select a predefined image from a clipart category. For all image fields
Image ClipartAlbums_XXXX Restrict access to the defined Clipart albums. Replace XXXX with the album name. Ex: You have Album1, Album2, Album3 and you want to limit the shown cliparts to Album1 you would add "ClipartAlbum_Album1". If you want to give access to multiple albums the album names are delimited by the ; character. "ClipartAlbum_Album1;Album3"

For image fields

with the ClipartField tag.

Image MaskField This will create a mask select ui, allowing users to select a predefined mask from a mask category. For all image fields
Image MaskCategories_XXXX Restrict access to the defined Mask categories. Replace XXXX with the category name. Ex: You have Category1, Category2, Category3 and you want to limit the shown cliparts to Category1 you would add "MaskCategories_Category1". If you want to give access to multiple albums the album names are delimited by the ; character. "MaskCategories_Category1;Category3"

For image fields

with the ClipartField tag.

Image NoOptions Restricts image position options being shown for specific text fields. When useImageOptionsis enabled but on certain fields you want to restrict this
Text TextField Generates a simple text input, single line only When you want to collect simple information, like 'Firstname', 'Lastname' etc.
Text TextArea Generates a multi line text area input that will allow your users to enter in paragraphs of text with carriage returns When you want to capture larger amounts of text.
Text PredefinedText This will generate a drop down list of pre-defined content See Advanced configuration section below
Text BackgroundColor

Generates a colour swatch which lets the user select the background colour of all the fields tagged with TextField, TextArea, PredefinedText.

Supports CMYK: #hexcodeSwatchColor,Background C 1-100:Background M 1-100:Background Y 1-100:Background K 1-100,Text C 1-100:Text M 1-100:Text Y -100:Text K 1-100

BackgroundColor|#ffffff,0:0:0:0,0:0:0:100|#000000,0:0:0:100,0:0:0:0

 

Supports RGB: #hexcodeBackgroundColor,#hexcodeTextColor

BackgroundColor|#ffffff,#000000|#000000,#ffffff
Can be used as a full canvas spanning text field that sits in the background to allow a background colour change easily.
Text NoOptions

Restricts advanced text options being shown for specific text fields.

When useTextOptionsis enabled but on certain fields you want to restrict this

 

Field related script config:

Script option Default Value Possible Values Usage
useImageOptions true true / false Setting this to false will disable image controls for all fields. Please use NoOptions field tag if you need to disable it for only specific fields.
useTextOptions false true / false Setting this to true will enable the text options: Font Select / Font Size select / Bold / Italic. Please make sure that your fonts support both bold and italic options. Font size select will not show up if "Fit to box" under advances text options of fields is enabled. Please use NoOptions field tag if you need to disable it for only specific fields.
predefinedText [] User controlled objects, please see instructions under Advanced configuration further down the article.

Configure predefined text options.

Value and label shown in the dropdown.

 

Page Tags:

The script works by tagging pages with specific values, below is a list of the available tags and how they should be used.

To add a page tag, simply go to the product menu and select edit page data. Once page tags have been added please save as product default.

NOTE: When adding multiple tags, please do not add any spaces but delimit the different tags using a pipe delimiter '|'

 

Tag value Info Usage
AllowLayoutSelect This will create a layout select button Allow layout selection for the specific page
LayoutCategories_XXXX Restrict access to the defined Layout categories. Replace XXXX with the category name. Ex: You have Category1, Category2, Category3 and you want to limit the shown Layouts to Category1 you would add "LayoutCategories_Category1". If you want to give access to multiple albums the album names are delimited by the ; character. "LayoutCategories_Category1;Category3"  
AllowBackgroundSelect This will create a background select button For all image fields
BackgroundCategories_XXXX Restrict access to the defined Background categories. Replace XXXX with the category name. Ex: You have Category1, Category2, Category3 and you want to limit the shown cliparts to Category1 you would add "BackgroundCategories_Category1". If you want to give access to multiple albums the album names are delimited by the ; character. "BackgroundCategories_Category1;Category3"  

 

Page related script config:

Script option Default Value Possible Values Usage
AllowCanvasSizeSelect false true / false Setting this to true will create a dropdown allowing the users to select the canvas. This is a global setting so on change it will update the size of all pages. 
SizeControlAttribute false false / "AttributeName"

Ex: If you have a product attribute called Product size (this is the name, not the friendly name) and you wish to control the canvas via this attribute, you will need to set the config to: SizeControlAttribute : "Product size"

In this attribute the values have to be the same as the Canvas Size name (not Canvas name).

How to configure canvas size name:

Once a canvas is created in admin, access it and under the sizes tab you will have all the availiable sizes. Scroll to the riigh side of the table click edit and change the value in the first column to define the Canvas Size name (named Default by default)


Step 3 - Controlling your form inputs friendly labels

Fields:

Set the text that is shown as the label for each field in the UI by adding the text to the fields Name input. (Similar to how you input the tags, just as the field name)

 

Page layout and background:

The labels for these are controlled via language string and are shared across all products that use the script.

dynamicui.layoutselecttitle

dynamicui.backgroundselecttitle

 

Canvas size:

The label for this is controlled via language string and are shared across all products that use the script.

dynamicui.canvasselecttitle

 

All language strings relating to the form builder contain: dynamicui

 

 

Step 4 - Control the order in which your form elements are presented

If you want to be able to decide on the order in which the field controls appear within the form then you can use the Sequence number property.

(Similar to how you have been inputting the tags and names, just look for the Sequence number setting and add your numbers going low to high here)

 

At this point you have all the simple steps in place in order to start using this functionality. However, if you want to see and control more about how the script works then read on for more advanced configuration options.

 

Step 5 - Controlling the content

Using the Form Builder script means that you are controlling the content of fields via the form. Therefore it is important to ensure that certain field properties are set when building your products.

  • Do Not Select - This is something we suggest you assign to all your fields and should most definitely be used when you have a fixed layout and do not want the users to be able to move or resize the fields. This way all the control and content is handled by the form.
  • Fixed Text - If you want to allow users to be able to move and resize the fields then we recommend ensuring the field property Fixed Text is enabled against the field. This means that they are not able to enter text into the Text Field directly and it is controlled by the form.

 

Step 6 - Advanced configuration

Every MegaEdit script has a configuration that can be assigned to it, generally if nothing is set against the product then it will use whatever default configuration is pre-defined in the script.

Below we talk through all the possible advanced configuration options you have available and how you can use them.

 

Field Zooming - Enabling this will make it so that when you are entering information into a form field the editor will zoom into the specific field you are editing.

Default: disabled

zoomEnabled: false

 

Enable/Disable Image gallery usage - Allow for the gallery to be used and displayed as part of the form for image controls. When disabled it will not be visible and users will have to upload an image from an image source each time.

useGallery: true

 

Layout handling feature -  Will create a new 'Select Layout' button in the top bar that when clicked can provide layout support based on additional configuration (below). When clicked a popup will appear with layout options.

useLayoutQuickSelect: true

Create a layout mapping as an array to control what options are presented to the user, if they should be driven by an attribute selection on the product landing page, and then what layout should be used once ready.

layoutMapping: [{ name: 'Design 1', // Name shown in the UI when selecting attributeValue: 'Yes', // This needs to be defined only if we map it to a product attribute value pages: [{ nr: 1, // page number (not index) layout: 'Design 1 page 1' // Layout name to be applied }], thumbnailUrl: '/-383467866/Handler/CSSOverride/GetImage/3/layout_thumb_logo.jpg' // allows to have a css override image shown for the layout selection }]

To enable the Layout selection popup to appear when the editor loads you can set the below configuration

startOnLoadLayoutQuickSelect: true

 

Enable multi language support - Create your own language strings to be used on the form field titles (languagestrings start with: me2k.editor.)

Example: me2k.editor.{customprefix}_{fieldname} - me2k.editor.rickysstore_firstname

In this scenario we recommend adding a prefix to ensure it is unique and then the field name should read exactly as 'rickysstore_firstname'.

useLanguageStringsForFieldTitles: true

 

Field Groups - Allows you to group fields by name to then generate a single form input for all in that group.

fieldGroups: true

 

Pre-defined Text configuration - As mentioned in the table above you can offer a drop down list form input with pre-defined selections.

You can create multiple mappings with multiple options depending on how you want to use it.

This example below is for a text field with the following tags "TextArea|PredefinedText|Predef1" and using field Name "My Selections".

It will add a dropdown form element in the editor with a label of "My Selections" and will have 3 options (Dropdown option name 1, Dropdown option name 2, Custom)

Dropdown option name 1 will populate the field on the canvas with the contents of an editable content area called 'PredefinedText_Option1'. This is a custom editable content block created in admin.

Dropdown option name 2 will populate the field on the canvas with the text 'This is the simple predefined text for option 2'

Custom will create a free type text box (TextArea or TextField tag needs to be added to the text field) In the form for the user to add their own text'.  Only the title Custom works here - any other name will not allow a textarea field.

 

predefinedText: [{ customTargetTag: 'Predef1', //Define the unique tag for the field you want to use this on options: [{ title: 'Dropdown option name 1', // Option name, to be shown in the dropdown isEditableContent: true, // Define if the options source is editable content. editableContent: 'PredefinedText_Option1', // Define the name of the editable content value: '' // You can use this if you dont wish to use editable content as you have a non formated string that should be added to the text field. }, { title: 'Dropdown option name 2', isEditableContent: false, editableContent: '', value: 'This is the simple predefined text for option 2' }, { title: 'Custom', //Use this name only to create a custom freetext area
isEditableContent: false,
editableContent: '',
value: 'Add your own' }] }]

 

Step 7 - Loading data from attributes:

The script has the ability to load the following based on attributes:

 

Setting canvas size:

Configured via script config: SizeControlAttribute

  • Default value: false
  • Possible values: false / "AttributeName"

Ex: If you have a product attribute called Product size (this is the name, not the friendly name) and you wish to control the canvas via this attribute, you will need to set the config to: SizeControlAttribute : "Product size"

In this attribute the values have to be the same as the Canvas Size name (not Canvas name).

How to configure canvas size name:

Once a canvas is created in admin, access it and under the sizes tab you will have all the available sizes. Scroll to the right side of the table click edit and change the value in the first column to define the Canvas Size name (named Default by default)

 

Setting page and field data:

Configured via tag: LoadFromAttribute_AttributeName~PropertyTarget;AttributeName~PropertyTarget

  • Tag starts with: LoadFromAttribute_
  • AttributeName is the attribute from which the value should be pulled.
  • ~ character separates the attribute name from the property target
  • PropertyTarget is what defines what the attributes value should be used for
    • PropertyTarget can be set for pages as:
      • Layout
        • Attribute value needs to be LayoutCategoryName:LayoutName and in case this has to apply to a spread the layout needs to be saved as a spread.
        • Ex tag: LoadFromAttribute_AttributeName~Layout
      • Background
        • Attribute value needs to be BackgroundCategoryName:BackgroundName and in case this has to apply to a spread the layout needs to be saved as a spread.
        • Ex tag: LoadFromAttribute_My background Attribute~Background
    • PropertyTarget can be set for
      • all fields as:
        • Background 
          • Attribute value needs to be a hexcode or cmyk code: #000000 or (100:100:100:100)

          • Ex tag: LoadFromAttribute_My field background Attribute~Background
      • image fields as:
        • Clipart
          • Attribute value needs to be ClipartAlbumName:ClipartName.

          • Ex tag: LoadFromAttribute_My clipart Attribute~Clipart
        • Tint
          • Attribute value needs to be a hex code: #000000

          • Ex tag: LoadFromAttribute_My tint Attribute~Tint
        • Mask
          • Attribute value needs to be MaskCategoryName:MaskName.

          • Ex tag: LoadFromAttribute_My mask Attribute~Mask
      • text fields as:
        • Colour
          • Attribute value needs to be a hexcode or cmyk code: #000000 or (100:100:100:100)

        • Value
          • Attribute value will be taken as a string and added to the field

  • You can set multiple aspects for a field or page by using the ; character to delimit them
    • ex: LoadFromAttribute_My Clipart Attribute~Clipart;My Mask Attribute~Mask;My Tint Attribute~Tint

 

Step 7 - Saving data to attributes:

  • Field values can be saved against an attribute by adding the tag

    • SaveToAttribute_{Attribute Name System name}

    • Use SaveFieldsToAttributes: true in script config to enable the feature.

    • This can be used without creating an attribute beforehand as the script will create a new attribute if it can not find an existing match

 

 

 

Example of full script config:

{ RenderFormInCustomTab: false,
ShowFieldsAllPages: false,
AllowCanvasSizeSelect: false,
SizeControlAttribute: false,
IgnoreMegaEditLayoutHandling: true,
SaveFieldsToAttributes: false,
fieldGroups: false,
paddingFactor: 0.0,
zoomEnabled: false,
useGallery: true,
useTextOptions: false,
useImageOptions: true,
useLayoutQuickSelect: false,
useLanguageStringsForFieldTitles: false,
layoutCategoryFilter: 'Layout',
startOnLoadLayoutQuickSelect: false,
layoutSelectTitle: 'Select Layout', syncLayoutWithAttribute: false, syncLayoutWithAttributename: 'Design', layoutMapping: [{ name: 'Design 1', attributeValue: 'Design 1 Option', pages: [{ nr: 1, layout: 'Design 1 page 1', }, { nr: 2, layout: 'Design 1 page 2', } ], thumbnailUrl: '' }, { name: 'Design 2', attributeValue: 'Design 2 Option', pages: [{ nr: 1, layout: 'Design 2 page 1', }, { nr: 2, layout: 'Design 2 page 2', } ], thumbnailUrl: '' } ], predefinedText: [{ customTargetTag: 'Predef1', options: [{ title: 'Dropdown option name 1', isEditableContent: true, editableContent: 'PredefinedText_Option1', value: '' }, { title: 'Dropdown option name 2', isEditableContent: true, editableContent: '', value: 'This is the simple predefined text for option 2' }, { title: 'Dropdown option name 3', isEditableContent: true, editableContent: 'PredefinedText_Option3', value: '' }, { title: 'Dropdown option name 4', isEditableContent: true, editableContent: 'PredefinedText_Option4', value: '' } ] } ] }

 

Script default config:

{ textAreaTag: "TextArea",
textFieldTag: "TextField",
customAreaTag: "CustomArea",
customFieldTag: "CustomField",
imageFieldTag: "ImageField",
clipartFieldTag: "ClipartField",
maskFieldTag: "MaskField",
predefTextTag: "PredefinedText",
backgroundColorTag: "BackgroundColor",
RenderFormInCustomTab: false,
ShowFieldsAllPages: false,
AllowCanvasSizeSelect: false,
SizeControlAttribute: false,
IgnoreMegaEditLayoutHandling: true,
SaveFieldsToAttributes: false,
fieldGroups: false,
paddingFactor: 0.0,
zoomEnabled: false,
useGallery: true,
useTextOptions: false,
useImageOptions: true,
useLayoutQuickSelect: false,
useLanguageStringsForFieldTitles: false,
layoutCategoryFilter: 'Layout',
startOnLoadLayoutQuickSelect: false,
layoutSelectTitle: 'Select Layout',
layoutMapping: [],
syncLayoutWithAttribute: false,
syncLayoutWithAttributename: 'Design',
predefinedText: [] }

Preview Handling Script

 

This is a Megaedit script that enables an admin to hide/show/print/not print certain pages of a document based on key tag words that are applied to speific pages.

 

Setup

You'll need to make sure that the Preview handling script is enabled on your storefront and appears in the script list against your dynamic products.  (please raise a ticket with support helpdesk if this needs enabling).  Once enabled against your chosen product the rest of the configuration is done directly in the MegaEdit editor.

Screenshot_2021-01-13_at_13.44.04.png

The script is set to work against 'tags' being used at page level in the editor.  The key tags to use are 'print' or 'preview'.

print = page will appear on output but not show in editor

preview = page will show in editor but not appear in output.

 

Open the editor of your product and go to the Menu section and acces the Edit page data section

Here you are required to use the tags mentioned above for each page example shown below:

Screenshot_2021-01-13_at_16.34.28.png

You will need to click save and save the product default to make those tags save against the product.

 

This will mean that page 1 will be hidden from view of the end user but still appear in the output print file - Page 2 will show in the editor but not appear in the output file.  Page 3 will be seen in editor and in the output print file as it has no tags.

 

 

 

 

Limiting Text Field Content

In MegaEdit, we have the ability to limit the amount of text allowable by the size of the text field. This can be useful if you want to limit users specifically to the text field box instead of having text bleed out of the box - which is the default behavior. 

This article will show you how to configure this, there is no extra setup as each MegaEdit product can run this functionality out of the box. 

*Please Note: This limitation does not take character count into consideration, this is only a text field limit. 

1. Click on your text field, and navigate to the furthest right menu option:

mceclip17.png

2. Scroll down until you see Movement Restriction. Set it to Fixed.

mceclip6.png

3. Now, go to the second tab from the left.

mceclip11.png

4. Under Text Type Mode, change it to Restricted:

mceclip14.png

5. Now, when you type too much in the text field, you will get a warning message:

mceclip15.png

 6. For these changes to stay in effect, please go to Show Menu (at the top of the screen) and press Save as Product Default.

Barcodes - Link to Form field for data entry

It is possible to link a custom barcode field to a form field so an end user can simply add in a value and a barcode will get updated by that data entered.

Enable the barcode field

If not already previously enabled you will need to ask the Helpdesk to enable this on a specific storefront OR at platform level so it is then available on all storefronts current and newly created.

Form Builder Refactored script

If not already on a storefront you will also need this uploaded on a specific storefront OR at platform level so it is then available on all storefronts current and newly created. Again please request this via the Helpdesk.

Once these are enabled you can program the necessary parts to enable this functionality.

Product setup

Create a MegaEdit product and go to the MegaEdit product section to apply the 2 scripts.

Screenshot 2024-01-23 at 12.14.34.png

Now navigate to the editor where you can setup the barcode functionality

Firstly you need to a barcode field to the canvas

Screenshot 2024-01-23 at 11.41.38.png

Click the barcode itself and turn off any features like AutoScale or Human readable value options

Screenshot 2024-01-23 at 11.56.06.png

Go to the Custom tab (which you will need to 'Form Builder Refractured' script to see) to set the rest of the features for the field.

Screenshot 2024-01-23 at 11.43.05.png

The area marked out in green control field elements like Allow selection, do not delete and do not print to name a few, in general most clients wish to lock the field down entirely and just allow the end user to add a value in the form field.  These marked icons control this behaviour.

Once that has been set you need to click the cog icon to set the Barcode field as a field entry.

Screenshot 2024-01-23 at 11.43.43.png

From here you can set the barcode field to allow a form input on the right-hand side but turn on the "Barcode field" switch

Screenshot 2024-01-23 at 11.44.18.png

The "Fixed Barcode field" switch sets the barcode to a single barcode format.  The form builder script allows for a number of barcode types - by default the full list of options is restricted to just the QR code.  You can control what barcodes you wish to use/offer by setting up a snippet under the script config at product level or set a global config for all products. Then simply set the "Active part to 'true' to turn on a particular barcode type.

barcodeFieldOptions: [
{
Label: 'STD-25',
Value: 'std25',
DefaultValue: '1234567890',
Active: false
}, {
Label: 'INT-25',
Value: 'int25',
DefaultValue: '0123456789',
Active: false
}, {
Label: 'EAN-8',
Value: 'ean8',
DefaultValue: '12345678',
Active: true
}, {
Label: 'EAN-13',
Value: 'ean13',
DefaultValue: '1234567890123',
Active: true
}, {
Label: 'UPC-A',
Value: 'upc',
DefaultValue: '123456789012',
Active: false
}, {
Label: 'UPC-E',
Value: 'upce',
DefaultValue: '123456789012',
Active: false
}, {
Label: 'Code 11',
Value: 'code11',
DefaultValue: '12345678901',
Active: false
}, {
Label: 'Code 39',
Value: 'code39',
DefaultValue: '1234567890ABC',
Active: false
}, {
Label: 'Code 128',
Value: 'code93',
DefaultValue: '1234567890ABC',
Active: false
}, {
Label: 'Codabar',
Value: 'codabar',
DefaultValue: '0123456789ABC-$:/.+',
Active: false
}, {
Label: 'MSI',
Value: 'msi',
DefaultValue: '12345678901234',
Active: false
}, {
Label: 'ITF-14',
Value: 'itf14',
DefaultValue: '12345678901234',
Active: false
}, {
Label: 'QR Code',
Value: 'qr',
DefaultValue: '1234567890ABC-$:/.+',
Active: true
}, {
Label: 'Data Matrix',
Value: 'datamatrix',
DefaultValue: '1234567890ABC',
Active: true
}
],

A shorter version example to allow QR, Data Matrix and EAN-13 is illustrated below;

Screenshot 2024-01-23 at 12.34.51.png

Screenshot 2024-01-23 at 12.33.43.png

Once all the above has been updated you can then click "Prep and Save" to save the template and the form field will allow you to type in data and the barcode updates dynamically.

Screenshot 2024-01-23 at 12.37.01.png

Layer Support Script - MegaEdit

MegaEdit has a number of default scripts available - here we go over the setup for using and applying the Layer Support script. 

NOTE: If you require scripting to be enabled, please contact the support desk. 

Navigation

To navigate to the MegaEdit scripts, go to Catfish > Infigo Variable Data > Dynamic Products. Then click the 'Products Tab' in the upper right-hand corner, this will show all of your Dynamic Products. Press 'Edit' on the product you want to work with. Navigate to the 'Scripts' tab on the upper right-hand corner. 

Requirements

First, enable the Layer Support script by checking the box within the product's script tab. Then press 'Save Changes'. 

LayerSupport01.PNG

Using the script in MegaEdit

The main purpose of this script is to allow the user to keep certain objects on their own layer without affecting the positioning of objects on other layers. The arrangement on 'layer_1' will not affect the arrangement on 'layer_2', 'layer_3', etc. 

The script automatically defaults each object to 'layer_1' anytime you add an object to your canvas. You can change the layer tag at anytime, simply by deleting the '1' and adding '2', '3', etc., by double-clicking on the object and navigating to the Details tab. 

*NOTE* The Sequence Number does not affect the positioning of the layer. A sequence number of 1 means this is the first object to be added to the canvas, 2 is the second, 3 the third, etc. See Figure 1. 

 LayerSupport02.PNG

Figure 1: The script within the details tab of an object's properties (double-click the object)

However, the order that an object was added to your canvas will affect its positioning within the layer. For example, if you add two image objects to your canvas, each will default to layer_1. The first object added will be positioned on the bottom, the second image on the top. In Figure 2 below, there are two images, a Number 1 and a Number 2. The Number 2 image rests on top of the Number 1 image because it was the last image to be added. 

LayerSupport03.PNG

Figure 2: Layers stacked based on the order they were added

Below is an example, the objects with '1' are on 'layer_1', and the objects with '2' are also on 'layer_1'. This example shows how each object is initially on layer_1, and by changing the layer tag, the arrangement is not affect across layers. 

1.  Red border object is tagged on layer_1 (ALL objects are on layer_1 in the start)

LayerSupport04.PNG

2. Red border object is sent to the front (it is now arranged to the front of all objects)

LayerSupport08.PNG

3. Number 2 object is tagged in layer_2

LayerSupport10.PNG

4. Number 2 object is sent to back

LayerSupport09.PNG

5. Number 2 object now rests on top of red border object (this is because layer_2 is arranged OVER layer_1.) The larger the layer number, the higher it will arrange, lower layer numbers will arrange below. Sending the '2' object to the bottom puts it to the bottom of layer_2 without sending it behind any object in layer_1 

LayerSupport11.PNG

Fit Width by Tracking — Keeping MegaEdit Text at a Fixed Size

Keep Text at a Fixed Size with Fit Width by Tracking

What it does

Normally, when text is too long for its field, MegaEdit's "Fit to Box" auto-fit shrinks the font until it fits. Fit Width by Tracking adds a smarter first step: instead of shrinking the letters, it gently tightens the spacing between characters so the text fits at its original size. A long email address, for example, stays on one line at the same font size, just slightly condensed rather than smaller.

It is an extension of Fit to Box and only works together with it: tracking condenses the spacing first, and the classic font resize steps in only when spacing alone is not enough. It is off by default and enabled per text field.

Enabling it in the MegaEdit editor

  1. Select the text field and open Text Options > Advanced.
  2. Switch Fit to Box on (the master auto-fit — required).
  3. On the same row as Text Wrap, switch Fit Width by Tracking on.
  4. Set the Min / Max / Target Character Spacing inputs that appear. While the feature is active, the manual character/word spacing inputs are hidden. Spacing is managed automatically.
ac436_fit_width_by_tracking.png

The three values

All values are in points per character (negative = tighter than normal, 0 = normal spacing).

  • Max Character Spacing — the loosest spacing allowed, usually 0 (normal). Text is never spread wider than this.
  • Min Character Spacing — the tightest squeeze allowed before the font is allowed to shrink; protects legibility.
  • Target Character Spacing — the comfortable spacing the text settles at once the font does have to shrink; sits between Min and Max.

How the fit works (in order)

  1. Spacing first: character spacing is adjusted between Min and Max so the text fills the field width. Word spacing tightens with it. The font size does not change.
  2. If the text fits within that range, the font stays exactly as designed.
  3. If the text is too short to fill the width even at Max spacing, Fit to Box grows the font as usual.
  4. If the text overflows even at Min spacing, the font must shrink: the spacing settles at the Target value and the font shrinks just enough to fit there. Only if the font reaches its minimum does the spacing condense further, from Target toward Min.

Tip — to keep the font completely fixed, set Fit to Box Min Font Size = Max Font Size. The font then never changes; only the spacing adapts.

Recommended starting values

Spacing is proportional to the font size. A good rule of thumb is Min ≈ -10% of the font size, Target ≈ -5%, Max = 0:

  • 7.5pt → Min -0.75, Target -0.35, Max 0
  • 12pt → Min -1.2, Target -0.6, Max 0
  • 24pt → Min -2.4, Target -1.2, Max 0

Fine-tune by eye — a condensed typeface tolerates less tightening, a wide one more. Setting Target = Min reproduces the simple "condense fully, then shrink" behaviour.

Setting it up in Infigo Invent (InDesign)

  1. In InDesign, select the text field and open its properties in the Invent panel.
  2. Enable Fit to box.
  3. Below it, enable Fit width by tracking (only visible while Fit to box is on).
  4. Enter Min / Max / Target values (in pt).
  5. Export the template (.mex) as usual — the settings are carried into the file and applied to the field when the template is imported into your storefront.

Good to know

  • Requires Fit to Box — the tracking option is hidden/disabled while Fit to Box is off, in both MegaEdit and Invent.
  • Condense-only — tracking never spreads letters wider than the spacing you designed; filling a too-wide field is always done by growing the font.
  • Print matches the editor — the condensed spacing entered in the editor is stored with the field and reproduced exactly in the PDF output.
  • Off by default — fields without the option behave exactly as before.

Search Terms

Fit Width by Tracking, character spacing MegaEdit, Fit to Box tracking, text tracking auto-fit, condense text spacing, Min Max Target Character Spacing, text field auto-fit font size

Blocking full email address paste in a MegaEdit email-prefix field

Summary

When a MegaEdit field is meant to hold only the username part of an email address, with the domain appended automatically elsewhere in the product setup, a shopper pasting in a full email address causes the domain to appear twice. Adding a regex validation that blocks the @ symbol and whitespace on that field prevents this.

Problem

A MegaEdit field is set up to accept only the local part (username) of an email address, with the domain appended automatically by the product's own configuration. When a shopper pastes their whole email address into that field instead of just the username, the domain ends up appearing twice: once from the pasted text and once from the automatic append.

Environment

MegaEdit field used for shopper personalisation, such as on a business card product, where only the email username portion should be entered.

The domain is appended automatically elsewhere in the product's own setup, outside of this field.

The fix is applied using Invent's Regex Text Manipulation feature, which attaches a custom validation pattern to the field.

Cause

No validation was in place on the field, so it accepted any text, including a full email address containing the @ symbol. Because the domain is also appended automatically, pasting in a full address results in the domain appearing twice.

Resolution

  1. Identify the MegaEdit field that should hold only the email username, where the domain is appended automatically elsewhere in the product setup.
  2. In Invent, apply a Regex Text Manipulation validation to that field using the pattern: ^[^@\s]+$
  3. Save the validation. This blocks the @ symbol and whitespace from being entered, so a shopper can no longer paste in a full email address and duplicate the domain.

Alternate search terms

MegaEdit email prefix field, block at symbol in email field, prevent full email address paste, duplicate email domain MegaEdit, regex validation MegaEdit field, Invent regex text manipulation, stop double domain email field, restrict field to email username only, disallow whitespace in text field, email username only field, domain appended automatically MegaEdit

Incomplete
🔎
Loading…
    Select a Problem Solver