Doogma Designer™ Creating & Editing– Training 1

© 2014 – Doogma Tec Ltd. – Proprietary and Confidential

Customization“Customization isn’t just a trend…It’s the new way Americans are going to do business...”Anthony Flynn, Author of Custom Nation

“Incorporating customization into your product strategy will enhance current customer relationships and attract new customers…”JP Gowender, Forrester

© 2014 – Doogma Tec Ltd. – Business Confidential

Headings

Options(assemblies

)

Sub-Options (attributes)

© 2014 – Doogma Tec Ltd. – Business Confidential

The numbering system in the CSV makes it easy to understand which corresponding UI element is being managed by any specific row.

The menu structure can be described as follows

1. First Heading1. First Option of Heading 1

1. First Sub-Option of Option 1.12. Second Sub-Option of Option

1.22. Second Option of Heading 1

2. Second Heading1. First Option of Second Heading

1. First Sub-Option of Option 2.1

Heading 1

Option 1.1

Option 1.2

Heading 2

Heading 4

Sub-Option 1.1.1

Sub-Option 1.1.4

© 2014 – Doogma Tec Ltd. – Business Confidential

Headings

Options

Sub-Options

The MainWindow AreaDisplays the current

design. It holds a series of layers that coincides with the selected options

Working with the Doogma CSV> Image files will typically be placed in a

directory on your own servers> The CSV file can also be placed in this

directory for easy editing by you> The filename may be “main.csv” or any

other name with the suffix “.csv”> To save an Excel file as a “.csv” file you

need to choose this option when saving the file within the Excel “Save As” dialog

© 2014 – Doogma Tec Ltd. – Business Confidential

CSV Structure

© 2014 – Doogma Tec Ltd. – Business Confidential

General Parameters Area

Elements Area

Headings

© 2014 – Doogma Tec Ltd. – Business Confidential

The Heading Number refers to the number of the heading for easy identification. It actually indicates the order in which the headings are to be displayed. It will be automatically populated.The Title is the name for the heading that you are adding. Enter the title for the heading in the Title text entry box. The Tool Tip is the text displayed whenever the mouse is hovered over the heading. You can give a description about your heading here. Enter the tooltip for the heading in the Tool Tip text entry box. The Hide specifies whether the heading is hidden or visible to the user. It is useful whenever you want to hide the unused heading and all its assemblies. Specify whether the heading is hidden or visible to the user by checking or un-checking the Hide field.The Initial Configuration indicates whether you want this heading to be automatically selected when the designer is launched. By checking this box for a heading, you set that heading as the default heading. Note that you can check this box for only one heading. Specify whether you want this heading to be automatically selected when the designer is launched by checking or un-checking the Initial Configuration field.Enter the category of the heading in the Category text entry boxes.The Save button will save your heading

Options (sometimes called Assemblies)

© 2014 – Doogma Tec Ltd. – Business Confidential

The Assembly Number refers to the number of the assembly for easy identification. It actually indicates the order in which the assemblies are to be displayed. It will be automatically populated.The Title is the name for the assembly that you are adding. Enter the title for the assembly in the Title text entry box.The Tool Tip is the text displayed whenever the mouse is hovered over the heading. You can give a description about your heading here. Enter the tooltip for the heading in the Tool Tip text entry box. The Thumb Image helps to upload thumbnail picture of the assembly to be displayed. To Set a new Thumb Image, drag and drop the image from the Image GalleryThe Pic Image enables uploading of the picture of the assembly..Note: All Pic Images should be the exact same size i.e. number of pixels wide and high. (except for Drag & Drop functionality in your designer. In this case images should be smaller than the MainWindow area. The size of the MainWindow area on your Designer is determined by the size of the first PIC that is used in your designer (typically Option 1.1 or Sub-Option 1.1.1)The Hi-Res Image enables uploading of the high resolution picture of the assembly.

Options (contd.)

© 2014 – Doogma Tec Ltd. – Business Confidential

The Thumb Priority defines the precedence order for loading the thumb image. Enter the precedence order for loading the thumb image in the Thumb Priority text entry box. (advanced users only)The Pic Priority defines the precedence order for loading the assembly image. Enter the precedence order for loading the assembly image in the Pic Priority text entry box. (advanced users only)The Blend Mode defines whether the sub-option images are blended on the top the existing picture or not. The Multiply option implies that the sub-option PIC image (typically a layer with a color) is blended on top of existing picture using Photoshop method: multiply. The default value is MULTIPLY. A Blend Mode of NORMAL, will cause sub-options to replace the Option’s PIC instead of being blended onto the Options PIC.The Thumb Width refers to the desired display width of the thumb image. Enter the width available for the thumb image in the Thumb Width text entry box.The Number of Thumb Columns indicates the available number of columns for the thumb image. Enter the number of columns in the Number of Thumb Columns text entry box.The Delta Price is the extra cost or discount to be applied based on the selected Option. Enter the extra cost in the Delta Price text entry box.The SKU (Stock Keeping Unit) is the number or code used to identify each unique assembly. Enter the number or code in the SKU text entry box.The SKU Dispatch (For Advanced Users only) indicates whether the assembly is available for dispatch or not. The SKU fields are used for integrating the Doogma Designer within an ecommerce product page. These typically correspond to HTML “id” or “value” fields of drop down boxes or text fields on the ecommerce product page. Your Doogma project manager will assist you with this integration.The Initial Configuration indicates whether you want this assembly to be automatically selected when the designer is launched. By checking this box for an assembly, you set that assembly as the default assembly. Note that you can check this box for only one assembly.Category fields are for advanced users only and these relate to retrieving specific data from the product page.

Sub-Options(sometimes called Fabrics or Attributes)

© 2014 – Doogma Tec Ltd. – Business Confidential

The Element Number refers to the number of the Fabric for easy identification. It actually indicates the order in which the elements are to be displayed. Enter the element number in the Element Number text entry box.The Tab Title is the name for the tab of the Fabric that you are adding. Enter the tab title for the element in the Tab Title text entry box.The Title refers to the title to display in the Designer for the entry based on the Code. Enter the title for the element in the Title text entry box.Enter the default html text in the Default Html text entry box.The Tool Tip is the text displayed whenever the mouse is hovered over the fabric. You can give a description about your fabric here. Enter the value for the tool tip in the Tool Tip text entry box.The Thumb Image is the thumbnail picture of the fabric to be displayed. To update this image, drag a new image file from the Image Gallery and drop it within the relevant area.The Pic Image is the picture of the fabric to be displayed. The Hi-Res Image is the high-resolution picture of the fabric to be displayed for SmartPrint only. The Thumb Priority defines the precedence order for loading the thumb nail image. (advanced users only)The Pic Priority defines the precedence order for loading the fabric image. (advanced users only)The Thumb Width refers to the desired display width of the thumb image. Enter the width for the thumb in the Thumb Width text entry box.

© 2014 – Doogma Tec Ltd. – Business Confidential

The Number of Thumb Columns indicates the available number of columns for the thumb image. Enter the number of thumb columns in the Number of Thumb Columns text entry box.The Text Area Position indicates the exact location of the text area on the Design Workspace. You can indicate the X and Y values for the top left corner of area where the text can be entered. Enter the text area position in the X field and enter the text area position in the Y field.The Text Area Size indicates the space allocated for text information to be displayed on the item. You can enter both the Width and Height values of the text here. Enter the text area size in the Width field and enter the text area size in the Height field.The Scale refers to the value (1 or more) by which the text area will be zoomed when user clicks to edit the text. Recommended values are typically between 1 and 1.4.Maximize Font Sizes when selected, the text that a user enters is a specific row defaults to the maximum font size. As user types more text, the font size is decreased to fit the available area.Text Auto Select – typically this should option should be selected.The Fonts field refers to the font that can be applied to the text. You can select the font from the list or add new font in the Add New text box. The newly added font will be listed below this text box. NOTE: only fonts that are pre-loaded by Doogma can be used. You are responsible for licensing of any fonts you use in your designer. We recommend use of Google Fonts and Arial that do not require special licensing.The Font Sizes sets the available sizes of the fonts. You can select or add new font size in the Add New text box. The newly added font size will be listed below this text box.

© 2014 – Doogma Tec Ltd. – Business Confidential.Protected by one or more granted and pending patents

The Font Colors sets the available colors of the fonts. You can select the color from the list or add new color in the Add New color palette. The newly added font color will be listed below this text box. The Font Style refers to the style of the font such as bold, italic etc. The available options are Bold, Italic and Underline. You can choose either one or a combination of these options. Select the style you wish from the Font Style field.Specify whether the special characters are allowed or not by checking or un-checking the box in the Special Characters field. (Typically not used)Select the type of the vertical alignment from the Vertical Alignment drop down list.The Delta Price is the extra cost or discount to be applied based on the text chosen. Enter the delta price in the Delta Price field.The SKU (Stock Keeping Unit) is the number or code used to identify each unique assembly. Enter the number or code in the SKU text entry box.The SKU Dispatch (For Advanced Users only) indicates whether the assembly is available for dispatch or not. The SKU fields are used for integrating the Doogma Designer within an ecommerce product page. These typically correspond to HTML “id” or “value” fields of drop down boxes or text fields on the ecommerce product page. Your Doogma project manager will assist you with this integration.The Editable indicates whether the text can be edited in the Design Workspace or not. The Initial Configuration indicates whether you want this sub-option to be automatically selected when the designer is launched. Scale Up Element is the desired scale up value for elements when using high resolution images in the SmartPrint option. This value is the ratio between the high resolution file and the MainWindow file.

© 2014 – Doogma Tec Ltd. – Business Confidential

Scale Up X – in most case this value will be equal to the Scale Up Element value – SmartPrint version only.Scale Up Y - in most case this value will be equal to the Scale Up Element value – SmartPrint version only.

In some Doogma Designers an “Upload Image” functionality is desired. To implement this functionality for a sub-option, fill in the values for Image Uploader:This refers to the X co-ordinate value at which the uploaded image is placed on the main window. Enter the required value in the X field.This refers to the Y co-ordinate value at which the uploaded image is placed on the main window. Enter the required value in the Y field.This refers to the width of the desired area in which the uploaded image is placed within the main window. Enter the required value in the Width field.This refers to the height of the desired area in which the uploaded image placed on the main window. Enter the required value in the Height field. Min. Resolution – this value determines a threshold value for the desired image resolution for uploaded images by the user. When an image’s resolution is below this value, a friendly warning message is displayed to the end user. The value varies by application but is typically 100 or 300 (ppi).Boundary Crop – when selected, uploaded images are automatically cropped so they do not extend beyond the borders of the above defined upload image area. Typically, this option should be selected. Category fields are for advanced users only and these relate to retrieving specific data from the product page.

Sub-Options - Draggable> Above discussion relates to Sub-Options of type

“Rich Text”> For Sub-Options of type “Fabric”, additional settings

are available e.g. “Draggable”. This setting enables use of Drag & Drop functionality within the Doogma Designer. An example of such use is for dragging clip-art images from the Sub-Options area onto a predefined area within the Main Window

> When using Draggable, please set the boundaries wherein the dropped object can be placed. The boundaries are defined by the values x,y, width, height

© 2014 – Doogma Tec Ltd. – Business Confidential

Special Parameters for Draggable

© 2014 – Doogma Tec Ltd. – Business Confidential

Max Elements

The maximum number of elements that can be dragged onto a specific Assembly or Heading area.

 

Alignment The alignment of the elements dragged on the item in the Main window.

AutoHorizontal; VerticalCenter

General Parameters

© 2014 – Doogma Tec Ltd. – Business Confidential

These parameters appear at the top of the Doogma CSV file or when you click on the Settings button in the Doogma EditorThe Version refers to the basic version number of the application. When using Doogma Editor the Version field will be automatically populated.Enter the name of the design in the File Name text entry box. (optional)The Button defines which information is displayed directly below the designer. Enter the required value in the Button text entry box.The CSSFile refers to the look and feel of the designer. You can use various CSS files. Enter the CSS file name in the CSS File text entry box. For a small fee, your Doogma Project Manager can create a custom CSS file for you.Picture Base URL – the directory where image files will be stored on the server. Must end with a “/” character. Thumbnail Based URL should contain same value as Picture Base URL The Base Price refers to any starting price of the product. Enter the base price in the Base Price text entry box. The Headings Tab Width refers to the width of the Headings Window [Default: 200 pixels].Enter the required value in the Headings Tab Width text entry box.The Fabrics width height refers to the width of the Sub-Options Tab. It is applicable in Portrait Mode only. [Default: 152 pixels]. Enter the required value in the Fabrics Tab Width text entry box.The Fabrics tab height refers to the height of the Sub-Options Tab. It is applicable in Landscape Mode only. [Default: 152 pixels]. Enter the required value in the Fabrics Tab Height text entry box.

© 2014 – Doogma Tec Ltd. – Business Confidential.Protected by one or more granted and pending patents

The Initial Heading specifies which heading will be automatically selected when the Designer is first loaded. The default behavior is to automatically select the first Heading that is not hiddenThe Layout refers to the layout of the Designer. In Landscape mode, sub-options are positioned below the Main Window and in Portrait mode sub-options are positioned to the left of the Designer. Enable Multiple Configurations (advanced users only) – typically not selected.Zoom Support defines whether the Doogma SmartPrint option is used. This option when used correctly enables production of a high resolution print-ready file when the user clicks on the Add To Cart button. The available options are SaveAsPDF and SaveAsPNG. (note: requires special licensing from Doogma)Static Text – in some Doogma Designers, it is desirable that user inputted text is shown as constant even when a user selects a new Sub-Option. When this value is selected, all text boxes will automatically be assigned the user inputted text. SKU Stock Control is an advanced feature that specifies that the SKUs will be read from the product page and if an SKU is temporarily out-of-stock then it will not be displayed in the Doogma Designer. Setting up of this feature is complex and may require assistance from your Doogma Project Manager.Category ID – for advanced users only.

Notices© 2014 – Doogma Tec Ltd. – Business Confidential.Protected by one or more granted and pending patents.This document and its use are subject to the Licensing Terms & Conditions specified on www.doogma.com