Chose Multiple Items on the List That Spans Multiple Columns on the Screen to Be Saved to a Variable

Questions & Suggestions
1

I am trying to create a menu that will have a list of items to choose from (one or many - perhaps with click+CMD) that spans multiple columns on the screen. The selected items than all saved into the same variable, perhaps comma delimited list. The variable is then used to trigger actions after selections were made.

I am attaching a two way I am thinking of doing it, but not sure how to make the list span multiple columns on the screen (and with the HTML script how to choose multiple items). Also I am attaching the current pallet I use - but it only allows to chose one item at the time and executes them right away (so I have to wait between each choice until it finishes).

Multiple Items Selection 1.kmmacros (3.2 KB)
Multiple Items Selection 2.kmmacros (2.2 KB)

Screenshot 2023-03-02 at 8.15.16 AM
Screenshot 2023-03-02 at 8.15.16 AM1920×863 153 KB

2

I'd suggest using an HTML Prompt instead, and having a form with checkboxes that your user submits. Much more user-friendly when selecting multiple items from such a big list, and it'll also allow you to organise your sections more distinctly.

3

@Nige_S, unfortunately I don't have html programing experience.
I tried to look and learn by googling, but as able to make either a list of check box items in one column or four columns without any items, but not both at the same time. Also I am not sure how to assign all of the checked items to a variable in html.

The html example I showed was from one I found in this forum.

Is there a change you can show my html code block with couple of items with check boxes in 4 columns that save all checked boxes item name into a variable?

Thank you,
B

4

Came up with html script below, how should I change it to incorporate the values of checked items to be executed once I close this menu?

* { box-sizing: border-box; }

/* Create four equal columns that floats next to each other /
.column {
float: left;
width: 25%;
padding: 10px;
height: 300px; / Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

Four Equal Columns

    Column 1

  • Text 1
  • Text 2

    • Column 2

  • Text 3
  • Text 4

    • Column 3

  • Text 5
  • Text 6

    • Column 4

  • Text 7
  • Text 8
5 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Four Equal Columns</h2>
<ul class="checkbox-grid">

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
      <li><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</label></li>
      <li><input type="checkbox" name="text2" value="value2" /><label for="text2">Text 2</label></li>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <li><input type="checkbox" name="text3" value="value3" /><label for="text3">Text 3</label></li>
    <li><input type="checkbox" name="text4" value="value4" /><label for="text4">Text 4</label></li>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <li><input type="checkbox" name="text5" value="value5" /><label for="text5">Text 5</label></li>
    <li><input type="checkbox" name="text6" value="value6" /><label for="text6">Text 6</label></li>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <li><input type="checkbox" name="text7" value="value7" /><label for="text7">Text 7</label></li>
    <li><input type="checkbox" name="text8" value="value8" /><label for="text8">Text 8</label></li>
  </div>
</div>
6

If you look at this bit of the action's Wiki page you'll see that you name your checkbox elements the same as your variables (remembering to replace spaces with underscores).

While you've got checkboxes on your prompt it isn't a form yet -- you need to wrap the parts of your form in a form element, include a submit button, etc. There's a good basic primer on Forms (and HTML in general) at W3C.

1 Like
7

Much appreciated, thank you for pointing me in the right direction - this is great!