6 Replies Latest reply on Sep 16, 2011 7:17 AM by RichardM0701

    UI - How to make Columns in a Drop Down List Selection?

    RichardM0701 Level 1

       

      I am altering a code from Peter Kahrel "Beginning Script UI". I am trying to make a searchable drop down list that will have 4 columns. So far, the search works and I have headings in the search, but I cannot seem to make the columns for the actual data. I believe I need to change the type_ahead since the array is looking at this data. I'm stuck in the water. Can someone tell me what I need to do to get the list to show up as columns? How do I turn the picked = type_ahead data into four columns? Code and Screenshot below:

       

      Window Capture.jpg

      picked = type_ahead (["bat", "bear", "beaver", "bee", "cat", "cats_and_dogs",
      "dog", "maggot", "moose", "moth", "mouse"]);
      
      function type_ahead (array)
      {
      var w = new Window ("dialog", "Quick select");
      var entry = w.add ("edittext", [0, 0, 800, 22]);
      entry.active = true;
      
      var list = w.add ("listbox",  [0, 0,800, 500], "",
      {numberOfColumns: 4, showHeaders: true,
      columnTitles: ["Non-Approved Word", "Approved Alternative", "Approved Use", "Non-Approved Use"], columnWidths: [200,200,200,200]});
      
      list.selection = 0;
      
      entry.onChanging = function ()
      {
      var temp = this.text;
      list.removeAll ();
      for (var i = 0; i < array.length; i++)
      if (array[i].toLowerCase().indexOf (temp) == 0)
      list.add ("item", array[i]);
      if (list.items.length > 0)
      list.selection = 0;
      }
      entry.onChange = function () {w.close (1)}
      if (w.show () != 2)
      return list.selection.text;
      else
      
      w.close ();
      }
      
        • 1. Re: UI - How to make Columns in a Drop Down List Selection?
          Harbs. Level 6

          Unless Marc Autret has some ingenious way of faking it, I think you are out of luck using Script UI.

           

          You can probably create a multi-column dropdown in a Flash UI, but even there, it's non-trivial...

           

          Harbs

          • 2. Re: UI - How to make Columns in a Drop Down List Selection?
            Peter Kahrel Adobe Community Professional & MVP

            Richard,

             

            Interesting problem! As Harbs said, you can't do this with a columned list, because that's really a single column list in which each row has tab-separated items. That creates only the impression of columns. What you want is real columns and I think that you can do that by placing four lists next to each other. Something along these lines:

             

            var w = new Window ("dialog");
                var table = w.add ("group");
                    var col1 = table.add ("listbox");
                    var col2 = table.add ("listbox");
                    var col3 = table.add ("listbox");
                    var col4 = table.add ("listbox");
            w.show();

             

            This creates four separate lists, but you can fiddle with the margins to create the impression of a single table.

             

            Peter

            • 3. Re: UI - How to make Columns in a Drop Down List Selection?
              Harbs. Level 6

              He. I just looked at the screen shot.

               

              It's not as complicated as I thought you were talking about.

               

              Your best bet is to use a Flash UI using a Datagrid.

               

              Harbs

              1 person found this helpful
              • 4. Re: UI - How to make Columns in a Drop Down List Selection?
                RichardM0701 Level 1

                Hi Peter,

                 

                This is one of those developments that push the limits of my knowledge-base and when things do that, I lose sleep until I figure it out. With that said :-) here is where I have ended up.

                 

                Basically I made a new array for the table data.  I then use an array lookup to sort the array in the listbox based on the 0 array item. See the code below. Once it is loaded type in "b" and the list will start to sort.

                 

                I need to try to get this to work as a pallete instead of a dialog box. Do palletes support this type of functionality?

                Window Capture.jpg

                 

                 

                var newarray = new Array(
                new Array('Butterfly ','has wings','can fly'),
                new Array('bohemith moth','has wings','cannot fly very good'),
                new Array('word 3','replacement word','use case'));
                
                picked = type_ahead (newarray);
                
                function type_ahead (array)
                {
                                
                var w = new Window ("dialog", "STE Checker");
                var entry = w.add ("edittext", [0, 0, 800, 22]);
                entry.active = true;
                
                var list = w.add ("listbox",  [0, 0,800, 500], "",
                {numberOfColumns: 3, showHeaders: true,
                columnTitles: ["Column 1",  "Column 2", "Column 3" ], columnWidths: [200,200,400]});
                
                list.selection = 0;
                entry.onChanging = function ()
                {
                var temp = this.text;
                list.removeAll ();
                for (var i = 0; i < array.length; i++)
                if (array[i][0].toLowerCase().indexOf (temp) == 0)
                
                with (list.add ("item", array[i][0]))
                {
                subItems[0].text = array[i][1];
                subItems[1].text = array[i][2];
                }
                if (list.items.length > 0)
                list.selection = 0;
                }
                
                entry.onChange = function () {}
                if (w.show () != 2)
                return list.selection.text;
                else
                
                w.close ();
                }
                
                
                • 5. Re: UI - How to make Columns in a Drop Down List Selection?
                  Peter Kahrel Adobe Community Professional & MVP

                  Yes, you can do this as a palette, but you need to change two things.

                   

                  1. Target an engine. At the beginning of the script, add this:

                   

                  #targetengine "session";

                   

                  2. You can't use this code:

                   

                  if (w.show () != 2)
                     return list.selection.text;
                  else
                     w.close ();

                   

                  Instead use simply w.show(). You then need to add a control which, when clicked, determines what you want to do. For example, add a button "Stop" and a handler along these lines:

                   

                  stopButton.onClick = function ()

                     {

                     // do this

                     // update that

                     w.close();

                     }

                   

                  Peter

                  • 6. Re: UI - How to make Columns in a Drop Down List Selection?
                    RichardM0701 Level 1

                    Thanks a ton! Works like a charm.