<?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: Extending LayerList widget in ArcGIS JavaScript Maps SDK Questions</title>
    <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/extending-layerlist-widget/m-p/687633#M63992</link>
    <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;I went looking in the LayerList widget's source code for clues, and figured it out.&amp;nbsp; I was using the same name for my trigger function as the method for raising the trigger.&amp;nbsp;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;So changing _triggerAction to _myTriggerAction resolved the issue.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Leaving it here for anyone else.&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
    <pubDate>Wed, 09 Oct 2019 17:39:59 GMT</pubDate>
    <dc:creator>LizEidsness</dc:creator>
    <dc:date>2019-10-09T17:39:59Z</dc:date>
    <item>
      <title>Extending LayerList widget</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/extending-layerlist-widget/m-p/687632#M63991</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hi,&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;I'm trying to extent the LayerList widget as a means to reuse preferred settings/code between projects.&amp;nbsp; The trouble I'm having is in implementing the trigger-action handler.&amp;nbsp; I have ported the code from the sample.&amp;nbsp; It worked fine outside of my widget extension, so It's likely a matter of scope, but I can't figure out how to change it.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;I'm writing my widget in TypeScript.&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;In postInitialize, I'm setting up the list item actions, and they seem to work.&amp;nbsp; But on click, the event coming through to _triggerAction doesn't have event.item.&amp;nbsp; I noticed it is of type "click".&amp;nbsp; Might be a clue as to what is going on??&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;relevant bits:&lt;/P&gt;&lt;PRE class="lia-code-sample line-numbers language-none"&gt;&lt;CODE&gt;&lt;SPAN class="token function"&gt;postInitialize&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;{&lt;/SPAN&gt;

    &lt;SPAN class="keyword token"&gt;var&lt;/SPAN&gt; defineActions &lt;SPAN class="operator token"&gt;=&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;_defineActions&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;&lt;SPAN class="token function"&gt;bind&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;&lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
    &lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;listItemCreatedFunction &lt;SPAN class="operator token"&gt;=&lt;/SPAN&gt; defineActions&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;

    &lt;SPAN class="keyword token"&gt;var&lt;/SPAN&gt; triggerAction &lt;SPAN class="operator token"&gt;=&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;_triggerAction&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;&lt;SPAN class="token function"&gt;bind&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;&lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt;
    &lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;&lt;SPAN class="token function"&gt;on&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;&lt;SPAN class="string token"&gt;"trigger-action"&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt; triggerAction&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
&lt;SPAN class="punctuation token"&gt;}&lt;/SPAN&gt;

&lt;SPAN class="keyword token"&gt;private&lt;/SPAN&gt; &lt;SPAN class="token function"&gt;_triggerAction&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;event&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;{&lt;/SPAN&gt;
    &lt;SPAN class="keyword token"&gt;var&lt;/SPAN&gt; layer &lt;SPAN class="operator token"&gt;=&lt;/SPAN&gt; event&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;item&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;layer&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
    &lt;SPAN class="keyword token"&gt;var&lt;/SPAN&gt; id &lt;SPAN class="operator token"&gt;=&lt;/SPAN&gt; event&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;action&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;id&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;

    &lt;SPAN class="keyword token"&gt;if&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;layer&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;{&lt;/SPAN&gt;
        &lt;SPAN class="keyword token"&gt;switch&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;id&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;{&lt;/SPAN&gt;
            &lt;SPAN class="keyword token"&gt;case&lt;/SPAN&gt; &lt;SPAN class="string token"&gt;"full-extent"&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt;
                &lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;view&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;&lt;SPAN class="token function"&gt;goTo&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;layer&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;fullExtent&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
                &lt;SPAN class="keyword token"&gt;break&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
            &lt;SPAN class="keyword token"&gt;case&lt;/SPAN&gt; &lt;SPAN class="string token"&gt;"information"&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt;
                window&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;&lt;SPAN class="token function"&gt;open&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;layer&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;url&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
                &lt;SPAN class="keyword token"&gt;break&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
            &lt;SPAN class="keyword token"&gt;case&lt;/SPAN&gt; &lt;SPAN class="string token"&gt;"increase-opacity"&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt;
                &lt;SPAN class="keyword token"&gt;if&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;layer&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;opacity &lt;SPAN class="operator token"&gt;&amp;lt;&lt;/SPAN&gt; &lt;SPAN class="number token"&gt;1&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;{&lt;/SPAN&gt;
                    layer&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;opacity &lt;SPAN class="operator token"&gt;+&lt;/SPAN&gt;&lt;SPAN class="operator token"&gt;=&lt;/SPAN&gt; &lt;SPAN class="number token"&gt;0.25&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
                &lt;SPAN class="punctuation token"&gt;}&lt;/SPAN&gt;
                &lt;SPAN class="keyword token"&gt;break&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
            &lt;SPAN class="keyword token"&gt;case&lt;/SPAN&gt; &lt;SPAN class="string token"&gt;"decrease-opacity"&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt;
                &lt;SPAN class="keyword token"&gt;if&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;layer&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;opacity &lt;SPAN class="operator token"&gt;&amp;gt;&lt;/SPAN&gt; &lt;SPAN class="number token"&gt;0&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;{&lt;/SPAN&gt;
                    layer&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;opacity &lt;SPAN class="operator token"&gt;-&lt;/SPAN&gt;&lt;SPAN class="operator token"&gt;=&lt;/SPAN&gt; &lt;SPAN class="number token"&gt;0.25&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
                &lt;SPAN class="punctuation token"&gt;}&lt;/SPAN&gt;
        &lt;SPAN class="punctuation token"&gt;}&lt;/SPAN&gt;
    &lt;SPAN class="punctuation token"&gt;}&lt;/SPAN&gt;
&lt;SPAN class="punctuation token"&gt;}&lt;/SPAN&gt;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍&lt;SPAN class="line-numbers-rows"&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/PRE&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;I'm using JS API 4.11.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Ideas?&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Liz&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Sun, 12 Dec 2021 04:55:34 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/extending-layerlist-widget/m-p/687632#M63991</guid>
      <dc:creator>LizEidsness</dc:creator>
      <dc:date>2021-12-12T04:55:34Z</dc:date>
    </item>
    <item>
      <title>Re: Extending LayerList widget</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/extending-layerlist-widget/m-p/687633#M63992</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;I went looking in the LayerList widget's source code for clues, and figured it out.&amp;nbsp; I was using the same name for my trigger function as the method for raising the trigger.&amp;nbsp;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;So changing _triggerAction to _myTriggerAction resolved the issue.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Leaving it here for anyone else.&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Wed, 09 Oct 2019 17:39:59 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/extending-layerlist-widget/m-p/687633#M63992</guid>
      <dc:creator>LizEidsness</dc:creator>
      <dc:date>2019-10-09T17:39:59Z</dc:date>
    </item>
  </channel>
</rss>

