User Manual Quickstart General Concepts Frame Features Resources Style Reference Change Log Glossary Acknowledgements Api Reference Authorization Iframe Api Js Api Getting Started Load options Load in Headless mode Form Fields Access Populating on load Receiving updates Save and Load Work Creating a Thumbnail Image Backend Api

Form Fields Access

Printess has the concept of Form Fields which can be created by the designer and changed by the buyer.

Populating on load

Lets say you want to pre-populate those form fields with customer data when showing the printess editor, you can do it like so:

api = printess.attachPrintess({
    ...
    formFields: [
      {
        name: "Name",
        value: "Peter Meyer"
      },
      {
        name: "Email",
        value: "peter.meyer@printess.com"
      }
    ]
  });

Just pass an array of objects to the attachPrintess method. Each object needs to address a form-field by its name and set its value as string. Even if the form-field type is number, you need to pass the value as string. The above example could be the pre-population of a business card template.

Receiving updates

Those Form Fields can contain information which are price relevant like material or color. The Sign template which you see when running index.html from the git-hub repo exposes a couple of such Form Fields. Material, Size - and if a solid material is selected - Drill Holes and Varnish. All 4 Form Fields are possibly price relevant so the eCommerce application must know if any of this values has been changed. To achieve this, you can pass a very simple callback to attachPrintess, where you then can adjust your basket settings to the users choices.

const formFieldChanged = (name, value) => {
  alert('Form Field: [' + name + "] changed to '" + value + "'");
};
printess.attachPrintess({
  /* ... all other properties ... */
  formFieldChangedCallback: formFieldChanged,
});