{"__v":20,"_id":"567b4a9fb56bac0d0019d8f4","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:07.780Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"This section lets you edit your component’s settings, associate them with your Source/SWF file, and edit how they are seen in Design Studio.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Settings Preview\"\n}\n[/block]\nThis area of the workspace shows a visual preview of the component’s settings as they will appear in Design Studio’s Inspector. The preview itself is interactive.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Component Preview Panel\"\n}\n[/block]\nThis panel shows a preview of your component with its default settings, as configured in the Inspector. Toggle this panel’s visibility using the Component Preview button in the Toolbar or the Ctrl+7 hotkey.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Edit & Test Mode\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/LYa8jXtgSamA5lcJ1dgO\",\n        \"Screen Shot 2015-12-26 at 11.20.50 AM.png\",\n        \"176\",\n        \"74\",\n        \"#272b33\",\n        \"\"\n      ],\n      \"caption\": \"Edit & Test Mode Toggle\"\n    }\n  ]\n}\n[/block]\nTwo additional buttons are available in the Toolbar when in the Settings Section. These buttons toggle between Edit Mode and Test Mode.\n\n  * **Edit Mode:** This mode is for editing your settings. Use the Items, Parameter Types, and Inspector panels to add settings/groups to your component, organize them, and change setting properties.\n  * **Test Mode:** This mode is for testing your settings. Use the Setting Preview to change component settings, and see those changes reflected in the Component Preview.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Items Panel\"\n}\n[/block]\nIn the Settings Section, this panel displays the full hierarchy of settings and groups associated with your component. Toggle this panel’s visibility using the :fa-th-large: icon in the Toolbar or the Ctrl+1 hotkey.\n\n## Key operations \n  * Click on an item to view and edit its properties in the Inspector panel.\n  * Drag and drop items to reorder them, or to move them into or out of a group.\n  * Duplicate a selected item using the :fa-files-o: icon. The copy retains all properties associated with the original item. Copying a group will copy all items within that group.\n  * Delete a selected item using the :fa-trash-o: icon. Deleting a group will delete all items within that group.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Parameter Types Panel\"\n}\n[/block]\nThis panel lists all the different Setting and Group types that can be used in your component. Toggle this panel’s visibility using the  icon in the Toolbar or the Ctrl+5 hotkey. Click on a Setting or Group type to add it to the component.\n\n[Click here](doc:component-studio-parameter-types) for more on settings and groups.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Inspector Panel\"\n}\n[/block]\nIn the Settings Section, this panel displays the properties of the item selected in the Items Panel. The properties are broken up into two sections – *Naming & Type* and *Form Configuration*. The properties are different for groups vs settings, so we will treat them separately here.\n\n## Setting Properties\nSetting properties in the Inspector are broken into two sections – Naming & Type and Form Configuration.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/QjtX7S6QWapLGF3VnLs8\",\n        \"Screen Shot 2015-12-26 at 11.54.33 AM.png\",\n        \"614\",\n        \"1026\",\n        \"#5886bc\",\n        \"\"\n      ],\n      \"caption\": \"Settings Properties\"\n    }\n  ]\n}\n[/block]\n### Naming & Type\nThe properties under Naming & Type are the same for all setting types.\n\n  * **Parameter:** The name under which this setting will be accessed through the Ad API. Your component’s initialize method has a config object passed into it, which contains all the component’s settings. [Click here](https://flite.site/config-object/) for more on the config object and how to use it.\n  * **Type:** The type of setting this is (e.g. text field, color picker, etc.). Note that internally, the parameter will always be stored as a string, regardless of the input type. [Click here](doc:component-studio-parameter-types) for an overview of the input types available to you and the additional fields that must be configured for each.\n  * **Label:** The name under which this setting will appear to component users in the Design Studio’s Inspector panel. \n\n### Form Configuration\nThe set of properties listed here is different for each setting type. We list some frequently seen parameters below. See here for additional detail broken down by setting type.\n\n  * **Help Text:** The text that will appear underneath the parameter’s form element in Design Studio. You can leave this blank if the parameter’s functionality is self-explanatory based on its Label.\n  * **Render help text as tooltip:** Check this box if you want the Help Text to appear as a tooltip instead of underneath the element. This will add a :fa-question-circle: icon next to the element, and the tooltip will display when the user mouses over the icon.\n  * **Default Value:** The default value for this setting. Ad developers will be able to override this value when configuring the parameter in Design Studio.\n\n## Group Properties\nGroup properties in the Inspector are broken into two sections — *Naming & Type* and *Form Configuration*.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/LFC9xL86TpOIBd3uAaEv\",\n        \"Screen Shot 2015-12-26 at 11.55.30 AM.png\",\n        \"614\",\n        \"634\",\n        \"#5a8cbc\",\n        \"\"\n      ],\n      \"caption\": \"Group Properties\"\n    }\n  ]\n}\n[/block]\n### Naming & Type\nThe properties under Naming & Type are as follows.\n\n  * **Label:** The name of your group.\n  * **Display Label (not available for Tab):** Check this box to display the Label at the top of the group; uncheck it to hide the label. For Tabs, the label is always displayed.\n  * **Description:** Optional text displayed at the top of the group and underneath the label. You can enter plain text, or use Markdown syntax to add some text formatting, links and images. See here for more on Markdown syntax.\n  * **Display as disclosure (Section and Disclosure only):** This checkbox toggles a group between being a section (unchecked) and a disclosure (checked).\n\n### Form Configuration\nThis section is used primarily for conditional display settings.\n\n  * **Display this group only when…** Check this box if you want to configure conditional display settings for this group. Once you click the checkbox, you will see a dropdown menu containing all the settings on which this group's display can be dependent. This menu will consist of the names of all settings outside of the current group that are of type Checkbox or Choice List. See here for more on setting types.\n    * **Checkbox.** When you select a checkbox setting from the dropdown, you will see another dropdown menu underneath. This allows you to select whether this group should be displayed when the setting is checked, or when it is not checked.\n    * **Choice List.** When you select a choice list setting from the dropdown, you will see two more dropdown menus underneath. These allow you to choose whether your group will be displayed when the chosen setting is equal to a particular value, or when it is not equal to a particular value.","excerpt":"","slug":"component-studio-settings-section","type":"basic","title":"Settings Section"}

Design Studio

Campaign Studio

Report Studio

Metrics

Flite Console

Ad Ops

Component Studio

Settings Section

This section lets you edit your component’s settings, associate them with your Source/SWF file, and edit how they are seen in Design Studio. [block:api-header] { "type": "basic", "title": "Settings Preview" } [/block] This area of the workspace shows a visual preview of the component’s settings as they will appear in Design Studio’s Inspector. The preview itself is interactive. [block:api-header] { "type": "basic", "title": "Component Preview Panel" } [/block] This panel shows a preview of your component with its default settings, as configured in the Inspector. Toggle this panel’s visibility using the Component Preview button in the Toolbar or the Ctrl+7 hotkey. [block:api-header] { "type": "basic", "title": "Edit & Test Mode" } [/block] [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/LYa8jXtgSamA5lcJ1dgO", "Screen Shot 2015-12-26 at 11.20.50 AM.png", "176", "74", "#272b33", "" ], "caption": "Edit & Test Mode Toggle" } ] } [/block] Two additional buttons are available in the Toolbar when in the Settings Section. These buttons toggle between Edit Mode and Test Mode. * **Edit Mode:** This mode is for editing your settings. Use the Items, Parameter Types, and Inspector panels to add settings/groups to your component, organize them, and change setting properties. * **Test Mode:** This mode is for testing your settings. Use the Setting Preview to change component settings, and see those changes reflected in the Component Preview. [block:api-header] { "type": "basic", "title": "Items Panel" } [/block] In the Settings Section, this panel displays the full hierarchy of settings and groups associated with your component. Toggle this panel’s visibility using the :fa-th-large: icon in the Toolbar or the Ctrl+1 hotkey. ## Key operations * Click on an item to view and edit its properties in the Inspector panel. * Drag and drop items to reorder them, or to move them into or out of a group. * Duplicate a selected item using the :fa-files-o: icon. The copy retains all properties associated with the original item. Copying a group will copy all items within that group. * Delete a selected item using the :fa-trash-o: icon. Deleting a group will delete all items within that group. [block:api-header] { "type": "basic", "title": "Parameter Types Panel" } [/block] This panel lists all the different Setting and Group types that can be used in your component. Toggle this panel’s visibility using the icon in the Toolbar or the Ctrl+5 hotkey. Click on a Setting or Group type to add it to the component. [Click here](doc:component-studio-parameter-types) for more on settings and groups. [block:api-header] { "type": "basic", "title": "Inspector Panel" } [/block] In the Settings Section, this panel displays the properties of the item selected in the Items Panel. The properties are broken up into two sections – *Naming & Type* and *Form Configuration*. The properties are different for groups vs settings, so we will treat them separately here. ## Setting Properties Setting properties in the Inspector are broken into two sections – Naming & Type and Form Configuration. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/QjtX7S6QWapLGF3VnLs8", "Screen Shot 2015-12-26 at 11.54.33 AM.png", "614", "1026", "#5886bc", "" ], "caption": "Settings Properties" } ] } [/block] ### Naming & Type The properties under Naming & Type are the same for all setting types. * **Parameter:** The name under which this setting will be accessed through the Ad API. Your component’s initialize method has a config object passed into it, which contains all the component’s settings. [Click here](https://flite.site/config-object/) for more on the config object and how to use it. * **Type:** The type of setting this is (e.g. text field, color picker, etc.). Note that internally, the parameter will always be stored as a string, regardless of the input type. [Click here](doc:component-studio-parameter-types) for an overview of the input types available to you and the additional fields that must be configured for each. * **Label:** The name under which this setting will appear to component users in the Design Studio’s Inspector panel. ### Form Configuration The set of properties listed here is different for each setting type. We list some frequently seen parameters below. See here for additional detail broken down by setting type. * **Help Text:** The text that will appear underneath the parameter’s form element in Design Studio. You can leave this blank if the parameter’s functionality is self-explanatory based on its Label. * **Render help text as tooltip:** Check this box if you want the Help Text to appear as a tooltip instead of underneath the element. This will add a :fa-question-circle: icon next to the element, and the tooltip will display when the user mouses over the icon. * **Default Value:** The default value for this setting. Ad developers will be able to override this value when configuring the parameter in Design Studio. ## Group Properties Group properties in the Inspector are broken into two sections — *Naming & Type* and *Form Configuration*. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/LFC9xL86TpOIBd3uAaEv", "Screen Shot 2015-12-26 at 11.55.30 AM.png", "614", "634", "#5a8cbc", "" ], "caption": "Group Properties" } ] } [/block] ### Naming & Type The properties under Naming & Type are as follows. * **Label:** The name of your group. * **Display Label (not available for Tab):** Check this box to display the Label at the top of the group; uncheck it to hide the label. For Tabs, the label is always displayed. * **Description:** Optional text displayed at the top of the group and underneath the label. You can enter plain text, or use Markdown syntax to add some text formatting, links and images. See here for more on Markdown syntax. * **Display as disclosure (Section and Disclosure only):** This checkbox toggles a group between being a section (unchecked) and a disclosure (checked). ### Form Configuration This section is used primarily for conditional display settings. * **Display this group only when…** Check this box if you want to configure conditional display settings for this group. Once you click the checkbox, you will see a dropdown menu containing all the settings on which this group's display can be dependent. This menu will consist of the names of all settings outside of the current group that are of type Checkbox or Choice List. See here for more on setting types. * **Checkbox.** When you select a checkbox setting from the dropdown, you will see another dropdown menu underneath. This allows you to select whether this group should be displayed when the setting is checked, or when it is not checked. * **Choice List.** When you select a choice list setting from the dropdown, you will see two more dropdown menus underneath. These allow you to choose whether your group will be displayed when the chosen setting is equal to a particular value, or when it is not equal to a particular value.