{"__v":13,"_id":"567b4ac5ee052b1700dbd9f5","category":{"__v":11,"_id":"555668821026001900d72a87","pages":["567b4a6f93919f0d00c97aed","567b4a7b4cde0321001e1194","567b4a88ee052b1700dbd9f3","567b4a937c40060d00560438","567b4a9fb56bac0d0019d8f4","567b4aad3241c20d00b730a2","567b4ab793919f0d00c97aef","567b4ac5ee052b1700dbd9f5","567b4b837c40060d0056043b","567b5a3b4cde0321001e119d","567b5e8aee052b1700dbda08"],"project":"555627c4ea5e120d001884fb","version":"555627c4ea5e120d001884fe","reference":false,"createdAt":"2015-05-15T21:43:30.888Z","from_sync":false,"order":6,"slug":"extend","title":"Component Studio"},"project":"555627c4ea5e120d001884fb","user":"55562799ea5e120d001884f8","version":{"__v":10,"_id":"555627c4ea5e120d001884fe","project":"555627c4ea5e120d001884fb","hasDoc":true,"hasReference":true,"createdAt":"2015-05-15T17:07:16.918Z","releaseDate":"2015-05-15T17:07:16.918Z","categories":["555627c5ea5e120d001884ff","55562a5526e9bc0d0044ea47","555653821026001900d72a3c","5556685c1026001900d72a85","5556687626e9bc0d0044ec04","555668821026001900d72a87","55566892150ba30d00f4e206","555668b826e9bc0d0044ec05","55e0fb6026f51b0d009b1746","567b3b3017368a0d009a6e54"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2015-12-24T01:30:45.309Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":9,"body":"There are two types of parameters in a component — settings and groups. Settings are the fields that an ad designer sees in Design Studio's Inspector panel, allowing her to configure the component within the ad. Groups are a way to organize those settings into logical, easily digestible chunks.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/AtPOd1DtRxBUFaVtLKrM\",\n        \"Screen Shot 2015-12-23 at 7.23.30 PM.png\",\n        \"474\",\n        \"1100\",\n        \"#2d044b\",\n        \"\"\n      ],\n      \"caption\": \"Parameter Types Panel\"\n    }\n  ]\n}\n[/block]\nThe [Settings Section](doc:component-studio-settings-section) of the Component Studio is dedicated to configuring settings and groups in your component. The Parameter Types panel lists all available settings and groups. This article describes each parameter type, and lists the properties available for that parameter in the Inspector panel's Form Configuration section.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Settings\"\n}\n[/block]\nAll available setting types are listed below, along with their unique properties, configurable via the Inspector panel's Form Configuration section. Several properties (*Help Text, Render text as tooltip, and Default Value*) are not mentioned, because they are shared by almost all setting types. These properties are described in the Settings Section documentation.\n\n## Text Field\nSingle line text input area. Use this when expecting a short text string as input.\n  * **Width:** Field width in pixels.\n  * **Maximum:** Maximum number of characters accepted in this field.\n  * **Pre-Label:** Supplementary text that appears underneath the main Label, and immediately precedes the element.\n  * **Post-Label:** Supplementary text that appears immediately after the element.\n  * **Asset Type:** This dropdown allows you to associate an asset type with this setting. If you select an Asset Type other than None, a cloud icon will appear next to the setting in Design Studio, allowing the ad designer to associate a Flite asset with the setting.\n  * **Placeholder:** Text that appears grayed out inside the field. Use this as a suggested value for the field. The placeholder disappears as soon as the user begins to fill the field with a different value. \n\n## Text Area \nMultiple line text input area. Use this when expecting a longer text string as input.\n  * **Height:** Input area height in pixels.\n  * **Width:** Input area width in pixels.\n  * **Placeholder:** Text that appears grayed out inside the text area. Use this as a suggested value. The placeholder disappears as soon as the user begins to fill the field with a different value.\n\n## Checkbox \nA box that can be checked or unchecked. Use this when expecting a binary input value – yes/no, true/false, etc. \n  * **Post-Label:** Supplementary text that appears immediately after the checkbox.\n  * **True Value:** The string passed to the parameter when the checkbox is checked; a blank string is passed when it is unchecked.\n\n## Choice List \nA selectable list of choices. Depending on the value of the *Format* property, customers will be able to choose only one choice from the list (single choice), or any number of choices (multiple choice). Use this when you want to limit the input to a discrete and fairly small number of options. The following display formats are available:\n\n  * **Single Choice formats**\n    * **Dropdown:** A dropdown list of options, from which you can select only one.\n    * **Radio Buttons:** A set of items with radio buttons next to each; selecting one deselects the rest.\n    * **Button Set (Single):** A set of buttons with short text labels on each; selecting one deselects the rest.\n    * **Icon Set (Single):** A set of icons representing your choices; selecting one deselects the rest.\n  * **Multiple Choice formats**\n    * **Checkboxes:** A set of items with checkboxes next to each; you can select as many checkboxes as you like.\n    * **Button Set (Multi):** A set of buttons with short text labels; you can select as many as you like.\n    * **Icon Set (Multi):** A set of icons representing your choices; you can select as many as you like.\n\nInput your list of choices in the Option/Value table at the bottom, using the Add Choice button to insert additional choices as needed. For each choice, input the following:\n\n  * **Option (all formats except the two Icon Set formats):** The text that will appear in the component settings UI for this choice.\n  * **Icon (Icon Set formats only):** The icon that will appear in the component settings UI for this choice.\n  * **Value (all formats):** The text that will be passed to this parameter when this choice is selected.\n  * **Tooltip (Icon Set formats only):** The tooltip that appears as you hover over the icon.\nOnce you have added your choices, choose the default selections using the radio buttons (for Single Choice) or checkboxes (for Multiple Choices) to the left of each choice.\n\n## Color Picker \nA standard Flite Color Picker, allowing designers to choose a color by entering a hexadecimal color code, clicking standard color swatches, or choosing a spot in the color field.\n\nThere are no additional properties for this input type.\n\n## Slider \nA horizontal slider that can be dragged to select different numbers, or a pair of sliders to select a numerical range. Use this when expecting a numerical input within a predefined range. Users can also type numbers directly into the text field instead of using the slider functionality.\n\n  * **Text Width:** The width of the text field(s) in pixels.\n  * **Text Max.:** The maximum number of characters in the text field(s).\n  * **Format:** The type of slider you want. There are two choices.\n  * **Single Value:** Users can select a single number.\n  * **Range:** A dual slider, allowing users to select a range of numbers.\n  * **Min. Value:** The smallest value on the slider track.\n  * **Max. Value:** The largest value on the slider track.\n  * **Default Value (Single Value format only):** The default slider value.\n  * **Default Low and Default High:** The default values for the lower and higher ends of the number range, respectively.\n  * **Unit:** The unit these numbers refer to, if applicable (e.g. pixels, meters, etc.).\n  * **Increment By:** The number of units represented by each slider tick.\n\n## File Uploader \nA text field with a  button for uploading a file, and a  button for assigning an asset. Users can also enter a URL directly into the text field. This is typically used for image and SWF uploads, but can be used for other file formats as well. There are no additional properties for this input type.\n\n## Feed Resolver \nA text field accepting a string that resolves to a RSS or Atom feed. The expected value of the text field is determined by the feed type (see Feed property below) and in some cases a dropdown. The  icon resolves the feed, and the  button assigns an asset. The following properties are supported:\n\n  * **Feed:** The type of feed you are expecting. The selected type drives the value expected by the parameter. Below is a list of supported feed types along with the corresponding text field values.\n  * **Feed URL:** Accepts an RSS or Atom feed URL (e.g. https://flite.site/home/atom.xml). If the URL is not a feed URL, the resolver looks for a <link rel=\"alternate\" ...> tag, and uses the URL in the href property of that tag. \n  * **Flickr:** Adds a dropdown selector to indicate Flickr feed type. Depending on the dropdown selection, different inputs are expected in the text field.\n  * **My Photostream and My Favorites:** Accepts a Flickr username, and generates a feed from that user's photo stream or favorite photos, respectively\n  * **Tag:** Accepts a Flickr tag, and generates a feed of photos with that tag.\n  *** Facebook:** Accepts a Facebook fan page URL (e.g. http://www.facebook.com/flite). The resolver converts this URL to a valid Facebook Atom feed.\n  * **YouTube:** Adds a dropdown selector to indicate YouTube feed type. Depending on the dropdown selection, different inputs are expected in the text field.\n  * **My Videos and Favorites:** Accepts a YouTube username (e.g. flitting), and generates a feed of that user's videos or favorites, respectively.\n  * **Search:** Accepts a search term, and generates a feed of video results for that search term.\n  * **Vimeo:** Adds a dropdown selector to indicate Vimeo feed type. Accepts a Vimeo username (e.g. Flite) and generates a feed of that user's videos or favorites depending on the dropdown value (My Videos or My Likes).\n  * **Width:** Text field width in pixels.\n  * **Placeholder:** Text that appears grayed out inside the field. Use this as an example value for the field. The placeholder disappears as soon as the user begins to populate the field..\n\n## Hidden \nA setting that is not visible outside of Component Studio; ad designers using the Design Studio will not see this setting. Use this for items that may be useful for debugging and development, but that should not be seen by designers. There are no additional properties associated with this setting type.\n\n## Date Picker \nA field that launches a calendar popup when clicked, allowing the user to select a date. There is one additional property.\n  * **Date Format:** The format in which you want this date to be passed to the parameter – e.g. “10/06/2012”, “Oct 6, 2012”, “06-10-2012”, etc. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Groups\"\n}\n[/block]\nUse groups to organize your settings in the UI. The available group types are listed below. Configurable group properties are covered in the [Settings Section](doc:component-studio-settings-section) documentation.\n  * **Section:** An area with a title above a series of settings.\n  * **Disclosure:** A Section that can be collapsed and expanded on click.\n  * **Tab Set:** An area with several settings grouped under multiple tabs.\n  * **Tab:** An area containing settings that displays when its name is clicked. Tabs can only exist within a Tab Set.","excerpt":"","slug":"component-studio-parameter-types","type":"basic","title":"Parameter Types"}