<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: Colored entries in Dropdown in ThingWorx Developers</title>
    <link>https://www.ptcusercommunity.com/t5/ThingWorx-Developers/Colored-entries-in-Dropdown/m-p/1058348#M71274</link>
    <description>&lt;P data-end="98" data-start="0"&gt;Yes, this is possible in ThingWorx using &lt;STRONG data-end="74" data-start="41"&gt;State-based Style Definitions&lt;/STRONG&gt; on the Dropdown widget.&lt;/P&gt;
&lt;P data-end="142" data-start="100"&gt;You can configure it in the following way:&lt;/P&gt;
&lt;OL data-end="488" data-start="144"&gt;
&lt;LI data-end="217" data-start="144" data-section-id="oykwx5"&gt;
&lt;P data-end="217" data-start="147"&gt;Click the &lt;STRONG data-end="175" data-start="156"&gt;Dropdown widget&lt;/STRONG&gt; and go to the &lt;STRONG data-end="205" data-start="190"&gt;List Format&lt;/STRONG&gt; property.&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="293" data-start="218" data-section-id="sf7l0a"&gt;
&lt;P data-end="293" data-start="221"&gt;In the renderer configuration, select &lt;STRONG data-end="292" data-start="259"&gt;State-based Style Definitions&lt;/STRONG&gt;.&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="406" data-start="294" data-section-id="pnjzot"&gt;
&lt;P data-end="406" data-start="297"&gt;Choose the &lt;STRONG data-end="327" data-start="308"&gt;Dependent Field&lt;/STRONG&gt; (this should be the field that contains the value coming from your InfoTable).&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="488" data-start="407" data-section-id="gpu7ng"&gt;
&lt;P data-end="488" data-start="410"&gt;Create a &lt;STRONG data-end="439" data-start="419"&gt;State Definition&lt;/STRONG&gt; where you define all the colors you want to use.&lt;/P&gt;
&lt;/LI&gt;
&lt;/OL&gt;
&lt;DIV id="tinyMceEditor_e6901935efcf2MA8731174_0" class="mceNonEditable lia-copypaste-placeholder"&gt;&amp;nbsp;&lt;/DIV&gt;
&lt;P&gt;please see attached screenshot.&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P data-end="541" data-start="490"&gt;In the &lt;STRONG data-end="517" data-start="497"&gt;State Definition&lt;/STRONG&gt;, you need to configure:&lt;/P&gt;
&lt;UL data-end="758" data-start="542"&gt;
&lt;LI data-end="624" data-start="542" data-section-id="2myhk0"&gt;
&lt;P data-end="624" data-start="544"&gt;&lt;STRONG data-end="553" data-start="544"&gt;Value&lt;/STRONG&gt; – the value coming from your data (for example &lt;CODE data-end="605" data-start="601"&gt;F1&lt;/CODE&gt;, &lt;CODE data-end="611" data-start="607"&gt;F2&lt;/CODE&gt;, &lt;CODE data-end="617" data-start="613"&gt;F3&lt;/CODE&gt;, etc.)&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="679" data-start="625" data-section-id="ozrk9k"&gt;
&lt;P data-end="679" data-start="627"&gt;&lt;STRONG data-end="643" data-start="627"&gt;Display Name&lt;/STRONG&gt; – the readable label for that value&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="758" data-start="680" data-section-id="1qfi9uf"&gt;
&lt;P data-end="758" data-start="682"&gt;&lt;STRONG data-end="691" data-start="682"&gt;Style&lt;/STRONG&gt; – the style definition that contains the color you want to display&lt;/P&gt;
&lt;/LI&gt;
&lt;/UL&gt;
&lt;P data-end="936" data-start="760"&gt;Make sure that the &lt;STRONG data-end="794" data-start="779"&gt;same values&lt;/STRONG&gt; you defined in the State Definition (e.g., &lt;CODE data-end="842" data-start="838"&gt;F1&lt;/CODE&gt;, &lt;CODE data-end="848" data-start="844"&gt;F2&lt;/CODE&gt;, &lt;CODE data-end="854" data-start="850"&gt;F3&lt;/CODE&gt;, etc.) are stored in the &lt;STRONG data-end="905" data-start="880"&gt;DataTable / InfoTable&lt;/STRONG&gt; that you bind to the dropdown.&lt;/P&gt;
&lt;P data-end="973" data-start="938"&gt;Then in the Dropdown configuration:&lt;/P&gt;
&lt;UL data-end="1201" data-start="974"&gt;
&lt;LI data-end="1068" data-start="974" data-section-id="gacpbo"&gt;
&lt;P data-end="1068" data-start="976"&gt;&lt;STRONG data-end="990" data-start="976"&gt;ValueField&lt;/STRONG&gt; should point to the field that contains those values (&lt;CODE data-end="1049" data-start="1045"&gt;F1&lt;/CODE&gt;, &lt;CODE data-end="1055" data-start="1051"&gt;F2&lt;/CODE&gt;, &lt;CODE data-end="1061" data-start="1057"&gt;F3&lt;/CODE&gt;, etc.)&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="1201" data-start="1069" data-section-id="11amz16"&gt;
&lt;P data-end="1201" data-start="1071"&gt;&lt;STRONG data-end="1087" data-start="1071"&gt;DisplayField&lt;/STRONG&gt; should be the field containing the text you want to show to the user (for example “Red”, “Yellow”, “Green”, etc.)&lt;/P&gt;
&lt;/LI&gt;
&lt;/UL&gt;
&lt;P data-end="1408" data-start="1203"&gt;Once the dropdown receives the values from the InfoTable and they match the values defined in the &lt;STRONG data-end="1321" data-start="1301"&gt;State Definition&lt;/STRONG&gt;, ThingWorx will automatically apply the corresponding &lt;STRONG data-end="1392" data-start="1376"&gt;color styles&lt;/STRONG&gt; to the entries.&lt;/P&gt;
&lt;P data-is-only-node="" data-is-last-node="" data-end="1583" data-start="1410"&gt;&lt;BR data-end="1466" data-start="1463" /&gt;&lt;BR /&gt;&lt;/P&gt;</description>
    <pubDate>Thu, 12 Mar 2026 13:54:53 GMT</pubDate>
    <dc:creator>MA8731174</dc:creator>
    <dc:date>2026-03-12T13:54:53Z</dc:date>
    <item>
      <title>Colored entries in Dropdown</title>
      <link>https://www.ptcusercommunity.com/t5/ThingWorx-Developers/Colored-entries-in-Dropdown/m-p/1058341#M71273</link>
      <description>&lt;P&gt;Dear community,&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;I would like to color the entries of a Dropdown, like this:&lt;/P&gt;
&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ColoredDropdown.png" style="width: 288px;"&gt;&lt;img src="https://www.ptcusercommunity.com/t5/image/serverpage/image-id/135733i4EC88C414DFE3EE0/image-size/large?v=v2&amp;amp;px=999" role="button" title="ColoredDropdown.png" alt="ColoredDropdown.png" /&gt;&lt;/span&gt;&lt;/P&gt;
&lt;P&gt;The Color would come with the InfoTable for the data feed. Anyone an idea how to do this?&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;Thanks&lt;/P&gt;
&lt;P&gt;Benny&lt;/P&gt;</description>
      <pubDate>Thu, 12 Mar 2026 13:43:23 GMT</pubDate>
      <guid>https://www.ptcusercommunity.com/t5/ThingWorx-Developers/Colored-entries-in-Dropdown/m-p/1058341#M71273</guid>
      <dc:creator>BennyB</dc:creator>
      <dc:date>2026-03-12T13:43:23Z</dc:date>
    </item>
    <item>
      <title>Re: Colored entries in Dropdown</title>
      <link>https://www.ptcusercommunity.com/t5/ThingWorx-Developers/Colored-entries-in-Dropdown/m-p/1058348#M71274</link>
      <description>&lt;P data-end="98" data-start="0"&gt;Yes, this is possible in ThingWorx using &lt;STRONG data-end="74" data-start="41"&gt;State-based Style Definitions&lt;/STRONG&gt; on the Dropdown widget.&lt;/P&gt;
&lt;P data-end="142" data-start="100"&gt;You can configure it in the following way:&lt;/P&gt;
&lt;OL data-end="488" data-start="144"&gt;
&lt;LI data-end="217" data-start="144" data-section-id="oykwx5"&gt;
&lt;P data-end="217" data-start="147"&gt;Click the &lt;STRONG data-end="175" data-start="156"&gt;Dropdown widget&lt;/STRONG&gt; and go to the &lt;STRONG data-end="205" data-start="190"&gt;List Format&lt;/STRONG&gt; property.&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="293" data-start="218" data-section-id="sf7l0a"&gt;
&lt;P data-end="293" data-start="221"&gt;In the renderer configuration, select &lt;STRONG data-end="292" data-start="259"&gt;State-based Style Definitions&lt;/STRONG&gt;.&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="406" data-start="294" data-section-id="pnjzot"&gt;
&lt;P data-end="406" data-start="297"&gt;Choose the &lt;STRONG data-end="327" data-start="308"&gt;Dependent Field&lt;/STRONG&gt; (this should be the field that contains the value coming from your InfoTable).&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="488" data-start="407" data-section-id="gpu7ng"&gt;
&lt;P data-end="488" data-start="410"&gt;Create a &lt;STRONG data-end="439" data-start="419"&gt;State Definition&lt;/STRONG&gt; where you define all the colors you want to use.&lt;/P&gt;
&lt;/LI&gt;
&lt;/OL&gt;
&lt;DIV id="tinyMceEditor_e6901935efcf2MA8731174_0" class="mceNonEditable lia-copypaste-placeholder"&gt;&amp;nbsp;&lt;/DIV&gt;
&lt;P&gt;please see attached screenshot.&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P data-end="541" data-start="490"&gt;In the &lt;STRONG data-end="517" data-start="497"&gt;State Definition&lt;/STRONG&gt;, you need to configure:&lt;/P&gt;
&lt;UL data-end="758" data-start="542"&gt;
&lt;LI data-end="624" data-start="542" data-section-id="2myhk0"&gt;
&lt;P data-end="624" data-start="544"&gt;&lt;STRONG data-end="553" data-start="544"&gt;Value&lt;/STRONG&gt; – the value coming from your data (for example &lt;CODE data-end="605" data-start="601"&gt;F1&lt;/CODE&gt;, &lt;CODE data-end="611" data-start="607"&gt;F2&lt;/CODE&gt;, &lt;CODE data-end="617" data-start="613"&gt;F3&lt;/CODE&gt;, etc.)&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="679" data-start="625" data-section-id="ozrk9k"&gt;
&lt;P data-end="679" data-start="627"&gt;&lt;STRONG data-end="643" data-start="627"&gt;Display Name&lt;/STRONG&gt; – the readable label for that value&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="758" data-start="680" data-section-id="1qfi9uf"&gt;
&lt;P data-end="758" data-start="682"&gt;&lt;STRONG data-end="691" data-start="682"&gt;Style&lt;/STRONG&gt; – the style definition that contains the color you want to display&lt;/P&gt;
&lt;/LI&gt;
&lt;/UL&gt;
&lt;P data-end="936" data-start="760"&gt;Make sure that the &lt;STRONG data-end="794" data-start="779"&gt;same values&lt;/STRONG&gt; you defined in the State Definition (e.g., &lt;CODE data-end="842" data-start="838"&gt;F1&lt;/CODE&gt;, &lt;CODE data-end="848" data-start="844"&gt;F2&lt;/CODE&gt;, &lt;CODE data-end="854" data-start="850"&gt;F3&lt;/CODE&gt;, etc.) are stored in the &lt;STRONG data-end="905" data-start="880"&gt;DataTable / InfoTable&lt;/STRONG&gt; that you bind to the dropdown.&lt;/P&gt;
&lt;P data-end="973" data-start="938"&gt;Then in the Dropdown configuration:&lt;/P&gt;
&lt;UL data-end="1201" data-start="974"&gt;
&lt;LI data-end="1068" data-start="974" data-section-id="gacpbo"&gt;
&lt;P data-end="1068" data-start="976"&gt;&lt;STRONG data-end="990" data-start="976"&gt;ValueField&lt;/STRONG&gt; should point to the field that contains those values (&lt;CODE data-end="1049" data-start="1045"&gt;F1&lt;/CODE&gt;, &lt;CODE data-end="1055" data-start="1051"&gt;F2&lt;/CODE&gt;, &lt;CODE data-end="1061" data-start="1057"&gt;F3&lt;/CODE&gt;, etc.)&lt;/P&gt;
&lt;/LI&gt;
&lt;LI data-end="1201" data-start="1069" data-section-id="11amz16"&gt;
&lt;P data-end="1201" data-start="1071"&gt;&lt;STRONG data-end="1087" data-start="1071"&gt;DisplayField&lt;/STRONG&gt; should be the field containing the text you want to show to the user (for example “Red”, “Yellow”, “Green”, etc.)&lt;/P&gt;
&lt;/LI&gt;
&lt;/UL&gt;
&lt;P data-end="1408" data-start="1203"&gt;Once the dropdown receives the values from the InfoTable and they match the values defined in the &lt;STRONG data-end="1321" data-start="1301"&gt;State Definition&lt;/STRONG&gt;, ThingWorx will automatically apply the corresponding &lt;STRONG data-end="1392" data-start="1376"&gt;color styles&lt;/STRONG&gt; to the entries.&lt;/P&gt;
&lt;P data-is-only-node="" data-is-last-node="" data-end="1583" data-start="1410"&gt;&lt;BR data-end="1466" data-start="1463" /&gt;&lt;BR /&gt;&lt;/P&gt;</description>
      <pubDate>Thu, 12 Mar 2026 13:54:53 GMT</pubDate>
      <guid>https://www.ptcusercommunity.com/t5/ThingWorx-Developers/Colored-entries-in-Dropdown/m-p/1058348#M71274</guid>
      <dc:creator>MA8731174</dc:creator>
      <dc:date>2026-03-12T13:54:53Z</dc:date>
    </item>
    <item>
      <title>Re: Colored entries in Dropdown</title>
      <link>https://www.ptcusercommunity.com/t5/ThingWorx-Developers/Colored-entries-in-Dropdown/m-p/1058351#M71275</link>
      <description>&lt;P&gt;Hey&amp;nbsp;&lt;a href="https://www.ptcusercommunity.com/t5/user/viewprofilepage/user-id/709891"&gt;@MA8731174&lt;/a&gt;&amp;nbsp;,&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;many thanks for your reply. I completely forgot about the StateDefinition. But it also does not fully cover my requirements. There is no chance to provide the color itself via the InfoTable, e. g. by Hex-Code, right?&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;Thanks&lt;/P&gt;
&lt;P&gt;Benny&lt;/P&gt;</description>
      <pubDate>Thu, 12 Mar 2026 14:04:09 GMT</pubDate>
      <guid>https://www.ptcusercommunity.com/t5/ThingWorx-Developers/Colored-entries-in-Dropdown/m-p/1058351#M71275</guid>
      <dc:creator>BennyB</dc:creator>
      <dc:date>2026-03-12T14:04:09Z</dc:date>
    </item>
  </channel>
</rss>

