CODEWITHSUNDEEP
neo4j
Talisphere
Talisphere

Reputation: 65

Using select dropdown within the guides to automatically populate cypher query

In the Create a Custom Browser Guide, it talks about using form fields to populate cypher query text in the guide, similar to the built-in :play query-template. This works fine with HTML "input" fields:

<article class="guide" ng-controller="AdLibDataController">
   <carousel class="deck container-fluid">
      <slide>
         <input value-for="queryLang" class="form-control" value="Person"/>
         <pre class="code runnable ng-binding" mode="cypher">
            MATCH (n:<span value-key="queryLang">Person</span>) RETURN n
         </pre>
      </slide>
   </carousel>
</article>

But, it doesn't appear to work with other form elements. Is it possible to populate cypher query text in a guide using a select dropdown? A dropdown list is far more useful than a text field, where someone can mistype the value. I have tried the following (which doesn't work):

<article class="guide" ng-controller="AdLibDataController">
   <carousel class="deck container-fluid">
      <slide>
         <select class="form-select">
            <option value-for="queryLang" value="Movie">Movie</option>
            <option value-for="queryLang" value="Person">Person</option>
         </select>
         <pre class="code runnable ng-binding" mode="cypher">
            MATCH (n:<span value-key="queryLang">Person</span>) RETURN n
         </pre>
      </slide>
   </carousel>
</article>

Any suggestions? Is this possible to do?

Upvotes: 0

Views: 54

Answers (1)

Giuseppe Villani
Giuseppe Villani

Reputation: 131

I think it's a bug, or something not (yet) foreseen.

In fact, with the following code:

<article class="guide" ng-controller="AdLibDataController">
  <carousel class="deck container-fluid">
    <slide class="row-fluid">
      <div class="col-sm-12">
        <div>
          <select value-for="nodeLabelA" class="form-control">
            <option value="Producer">Producer</option>
            <option value="Movie">Movie</option>
            <option value="Actor">Actor</option>
          </select>
          <input value-for="propertyKeyA" class="form-control" value="name" />

          <div class="listingblock">
            <div class="content">
              <pre
                mode="cypher"
                class="highlight pre-scrollable programlisting cm-s-neo code runnable standalone-example ng-binding"
                data-lang="cypher"
                lang="cypher"
              ><!--code class="cypher language-cypher"-->CREATE (a:`<span value-key="nodeLabelA">Another</span>`) RETURN a<!--/code--></pre>
            </div>
          </div>
        </div>
      </div>
    </slide>

    <slide class="row-fluid"></slide>
  </carousel>
</article>

i selected something from the dropdown and the, with the <select/> highlighted, i just type tab to go to the next input and the maiusc+tab to return to select tag. After that the Cypher code change :|

Indeed, looking at the neo4j browser github code, the value-for js part seems to be triggered by onkeyup, maybe this is the reason.

Moreover, for some reason, without the second empty slide this trick doesn't work.

Upvotes: 1

Related Questions