Setting Up Dial Input Controls

The Input Control section is where you select the type of input required from the customer and specify the values for the selected input control.

The available input controls depend on the dial type you are editing. For example:

  • If the dial is a text content object, the input control can be a text input, a multiline text input, a radio box list advanced, a dropdown list advanced or a gallery list/grid view.

  • If the dial is a graphic content object, the input control can be either an image selector, a popup image selector, an extended image selector, a gallery image selector or a file attachment.
    When using the file attachment input control in Labels & Packaging, it is required that the file format for upload is PDF.

Notes:

  • When using the Excel pricing model, you cannot use parentheses or other special characters to name customization dials.

  • You can assign JDF node sets to the following customer input controls: dropdown lists, radio buttons and gallery list or grid view lists.

Text input and multiline text input

Text Input is a standard, single line text box that enables the customer to enter a short, free text input value.

uStore_Customization_Input_Control_Text.png

Multiline Text Input is similar to the text input control, but enables the customer to enter several lines of text input.

Once Text Input or Multiline Text Input is selected, you can set each product’s product property values in the When the product property has no value, take values from section. The product property values can be one of the following:

You can select both the Take Values from Data Source and the Take values from Predefined Value(s) options. In that case, if a value is missing in the Data Source, it will be taken from the values set in the predefined list.

Notes:

  • You can enrich the text input and multiline text input controls by using the Rich Text Editor.

  • When a Text Input or Multiline Text input control is defined for a dynamic document that is used as a composite component, the storefront user will be able to enter a customized or a personalized value. If during customization, the storefront user enters a value in the text box, it will be used as customized value. However, if the user leaves this text box empty, it will then be added as a column to the recipient list, and he will be able to enter different values for each recipient and personalize this field.

Date time picker

The Date Time Picker control enables customers to specify a date and/or time attribute for an order. You can set the Date Time picker to function as a popup (opens when clicked on) or as inline (always visible). You can also set the date picker to a predefined period of time by using the Earliest and Latest date options. Use the Earliest and Latest date options to set predefined dates or dates relative to an order date (for example: X days after an order has been made).

uStore_Customization_Input_Control_Date_Time_Picker.png

Once the Date Time Picker control is selected, you can set each product’s product property values in the When the product property has no value, take values from section.

Note that the Use list enables you to adjust the property to your needs; that is if you need just the date property, use the Usedate only option, and if you need the time property, use Use time only.

The product property values can be one of the following:

HTML generic

The HTML Generic input control enables you to embed personalized HTML in uStore (in the Markup field) that will be rendered in real-time as the content of the control. For example, you can embed a webpage.

uStore_Customization_Input_Control_HTML_Generic.png

Once the HTML control is selected, you can set each product’s product property values in the When the product property has no value, take values from section. The product property values can be one of the following:

Tip: If you wish to add the user's group name into the Generic HTML property, call:

UStoreProvider.state.get().currentUser.Groups

The Dropdown List input control enables the customer to choose a value from a list of predefined options. This input control displays the choice list to the user as a standard dropdown control. In addition to defining the format of the selection and the values displayed, you can also define a JDF node for each value.

uStore_Customization_Input_Control_Dropdown.png

Radio Button List is similar to the dropdown list input control but displays the choice list to the user as a set of standard radio-style inputs.

Similarly to the Dropdown list, when you select Radio Button List, you can also define the JDF node for each value.

Once the radio button or dropdown List controls are selected, you can set each product’s product property values in the When the product property has no value, take values from section. The product property values can be one of the following:

You can select both the Take Values from Data Source and the Take values from Predefined Value(s) options. In that case, if a value is missing in the Data Source, it will be taken from the values set in the predefined list.

Get order properties

The Get Order Properties input control enables you to add the Order ID or the Order Item ID values, which are generated automatically, to your product. This way, an order or an order item can be easily distinguished with an ID number.

uStore_Customization_Input_Contro_GetOrderProoperties.png

When the Get Order Properties control is selected, you can set each product’s product property values in the When the product property has no value, take values from section. The product property values can be one of the following:

Checkbox

The Checkbox input control enables you to add a checkbox as a product property.

uStore_Customization_Input_Control_Checkbox.png

When the Checkbox control is selected, you can set each product’s product property values in the When the product property has no value, take values from section. The product property values can be one of the following:

Gallery list/grid view

The Gallery List/Grid View input control enables the customer to choose a value from predefined options. The options are displayed as a list/grid of icons, with names and descriptions.

Similarly to the Dropdown and the Radio Button lists, when you select Gallery List/Grid List, you can also define the JDF node for each value.

uStore_Customization_Input_Control_Gallery_List.png

Each property option of a gallery control may include the following icons.

  • Property option’s icon: Displayed near the description.

  • Property option overlay image: A graphic display of the property that overlays the document thumbnail for a more reliable product preview.

To upload icons, go to the Property Options Icon Management window.

To set the predefined values for the gallery list/grid view input control:

  1. Click the Add new value link and enter a value and a display name to be presented in the selected control in the Value and Display name fields respectively.

    The name is displayed to the customer and the value is sent to uProduce as the product value.

  2. To add a JDF node to the value, in the JDF node set list select the equivalent option.

    The list of JDF nodes includes the nodes set in Presets > System Setup > JDF Node Set. For more information, see Setting Up JDF Nodes.

  3. Click to add the value to the list.

  4. Repeat steps 1 - 3 to add more values to the Value List.

  5. After you add all the required values, you can set one of the values as the default value by selecting the required checkbox in the Default column.

  6. To edit a value in the Value List, click the Edit icon next to the value you want to edit.

  7. In the Sort field, you can define how the list of values will be sorted in the storefront: alphabetically (select Alphabetical), numerically (select Numerical) or chronologically (select As displayed above) according to the time they were created.

  8. You can download a Value List Excel template by clicking the Download Value List Template link. Once it is fully prepared you can upload it again by clicking the Upload Value List link.
    The Value List will be automatically populated with the values you defined in the Excel spreadsheet.

    You will be notified if errors exist in your spreadsheet. For example:

    • If an existing value in the Value List has been defined in the spreadsheet.

    • If an existing value text in the Value List has been defined in the spreadsheet.

    • If the Value List template is missing a value or a value display text.

    • If the Value List Template includes duplicates of values or values’ text.

Gallery image selector

The Gallery Image Selector input control offers customers editing capabilities, such as rotate, crop or flip the image.

uStore_Dial_Details_Gallery_Image_Selector.png

Once the Gallery Image Selector control is selected, you can set each product’s dial values in the When the dial has no value, take values from section. The dial values can be one of the following:

You can select both the Take Values from Data Source and the Take values from Predefined Value(s) options. In that case, if a value is missing in the data source, it will be taken from the values set in the predefined list.

The Gallery Image Selector allows the customer to select existing images (Allow Asset Selection), or upload images from the computer (Allow Image Upload). The image selector allows to upload files up to the size of 5 MB.

The Gallery Image Selector input control offers customers editing capabilities (Allow Editing Uploaded/Asset Images), such as rotate, crop and maintain aspect ratio, or flip the image.

You can configure the opening of the image editor: automatically with the upload or selection of an image, manually by the user, or if the selected image is invalid.

Permitted formats for upload:

  • INDD products: JPG, JPEG, PDF, TIFF, TIF, PNG, GIF, BMP

  • XLIM products: JPG, JPEG, PDF, TIFF, TIF

Note: EPS, EPSF and PSD assets are supported in dynamic products in multi-page flow, but are not supported in the new image library used in single page flow.

(Popup) Image selector

The Image Selector and the Popup Image Selector enable customers to choose images from the available campaign assets on the uProduce Server or to upload their own pictures and use them in the document. When these controls are selected, store administrators can restrict the width, height and ratio ranges of the uploaded graphic file to predefined measures. The Image Selector shows all the images on the page, whereas the Popup Image Selector shows only the selected image on the page together with a button that can be used to pop up a window with all other images, from which customers can choose.

uStore_Customization_Input_Control_Image_Selector.png

Once the (Popup) Image control is selected, you can set each product’s dial values in the When the dial has no value, take values from section. The dial values can be one of the following:

You can select both the Take Values from Data Source and the Take values from Predefined Value(s) options. In that case, if a value is missing in the Data Source, it will be taken from the values set in the predefined list.

uStore storefront displays a thumbnail image for the following image types: *.jpg, *.bmp, *.png and *.gif. Images of unsupported file types can be previewed in the customer’s default imaging software by clicking the Click to Preview link.

Extended image popup selector (deprecated)

In addition to capabilities offered by the Image Selector and the Popup Image Selector (such as, selecting or uploading images), the Extended Image Popup Selector input control enables customers to crop the uploaded images.

uStore_Dial_Details_Extended_Image_Selector.png

Once the Extended Image Popup control is selected, you can set each product’s dial values in the When the dial has no value, take values from section. The dial values can be one of the following:

You can select both the Take Values from Data Source and the Take values from Predefined Value(s) options. In that case, if a value is missing in the Data Source, it will be taken from the values set in the predefined list.

The Extended Image Selector is displayed in storefront in one of the following views: Library view or Slider View.

Dependent dropdown list

This feature enables you to create two types of dependent dropdown lists:

  • A dropdown list that displays choices that depend on the value selected in a previous dropdown list.

    In the following example, the value selected in the Wine Type list affect the values displayed in the Wine Name list. If the user chooses Red under Wine Type, the wine names will be filtered display red wines only.

  • A list that displays values filtered according to a fixed criterion. For example, the following list is filtered to display red wines only.

This topic explains how to create dependency dials. It is also possible to create this dependency for properties.

Example of filtering by a dial

The settings for dependent dropdown lists are similar to those of regular dropdown Lists, however the dependent dropdown list includes an additional option of filtering.

This following procedure explains how to define a dependent dial filter using the Wine Type and Wine Name example.

  1. In the Dial Details page, in the Display Name text box, enter Wine Type.

  2. From the Input Control list, select Dependent Dropdown List.

  3. Select the following checkbox:

  1. Enter data as follows:

    • For Table or View, select the required table.

    • For Display Text Field, select the value displayed to the viewer. For example, Color.

    • For Value Field, select the returned value.

  2. Repeat steps 1-3 for the second dropdown list, Wine Name, and select settings as follows:

    Both Wine Type and Wine Name need to be defined as dependent dropdown lists.

  3. Select the Filter checkbox, and define a filter by which the Wine Name list will display values that depend on the value selected in the Wine Type list.

Example of filtering by a fixed value

Let's say you want to create two separate dropdown lists, one for Red Wine and one for White Wine.

You can define a filter to filter each list by a fixed value. This means that the first list will display red wine names only, and the second will display white wine names only.

File attachment

The File Attachment input control enables the customer to upload files as part of the product properties. Uploaded files can be of several types, such as PDF, PPT,PPTX, DOC, DOCX, EPS, EPSF, JPG, JPEG, and can be defined by the customer’s personal needs. You can allow customers to upload files from the local drive or from external document repositories (StoreFlow Shared Cloud customers can only upload from the local drive).

After the customer uploads the files, the files become available for download in the backoffice in the Item Details page.

Note: You can determine the default file types. For further information, see FileAttachmentDefaultExtensions in the Global Configurations Table.

The product property value can be one of the following: