CODEWITHSUNDEEP
google-apps-script
SoftwareTester
SoftwareTester

Reputation: 1090

is it possible to use Checkboxes in a listbox using GAS?

Using GAS I would like to use checkboxes in a listbox (and check several of them). Is this possible ?

I would like to avoid alternatives like using a flextable or maybe even a tree.

Upvotes: 0

Views: 1090

Answers (2)

Mogsdad
Mogsdad

Reputation: 45750

The UiApp Service does not support combining the two elements. A ListBox does support multiple selections (shift-click, ctrl-click), and you can position multiple CheckBox items into a VerticalPanel to provide a logical grouping for your users.

If you instead use the HtmlService for your user interface, you will have many more options, including widgets like Eric Hynd's jQueryUI Multi-Select widget:

screenshot

Here is how that same widget looks, in a Google Document sidebar (code follows, although without any input handling):

screenshot

Code.gs

/**
 * Creates a menu entry in the Google Docs UI when the document is opened.
 *
 * @param {object} e The event parameter for a simple onOpen trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode.
 */
function onOpen(e) {
  DocumentApp.getUi().createAddonMenu()
      .addItem('Start', 'showSidebar')
      .addToUi();
}

/**
 * Runs when the add-on is installed.
 *
 * @param {object} e The event parameter for a simple onInstall trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode. (In practice, onInstall triggers always
 *     run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or
 *     AuthMode.NONE.)
 */
function onInstall(e) {
  onOpen(e);
}

/**
 * Opens a sidebar in the document containing the add-on's user interface.
 */
function showSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
      .setTitle('MultiSelect').setSandboxMode(HtmlService.SandboxMode.NATIVE);
  DocumentApp.getUi().showSidebar(ui);
}

Sidebar.html

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->

<style>
.ui-multiselect {
    font-size: 13px;
}

.ui-multiselect { padding:2px 0 2px 4px; text-align:left }
.ui-multiselect span.ui-icon { float:right }
.ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; }
.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }

.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
.ui-multiselect-header ul { font-size:0.9em }
.ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
.ui-multiselect-header a { text-decoration:none }
.ui-multiselect-header a:hover { text-decoration:underline }
.ui-multiselect-header span.ui-icon { float:left }
.ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 }

.ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:10000; text-align: left }
.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:scroll }
.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px }
.ui-multiselect-checkboxes label input { position:relative; top:1px }
.ui-multiselect-checkboxes li { clear:both; font-size:0.9em; padding-right:3px }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }

</style>

<div class="sidebar branding-below">
  <form>
    <div class="block" id="button-bar">
      <button class="blue" id="submit">Submit</button>
    </div>
    <div class="block" id="multi-select">
      <select id="ms-example" name="ms-example" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
        <option value="7">Option 7</option>
        <option value="8">Option 8</option>
        <option value="9">Option 9</option>
        <option value="10">Option 10</option>
      </select>
    </div>
  </form>
</div>

<div class="sidebar bottom">
  <img alt="Add-on logo" class="logo" height="27"
      id="logo"
      src="https://www.gravatar.com/avatar/adad1d8ad010a76a83574b1fff4caa46?s=128&d=identicon&r=PG">
  <span class="gray branding-text">by Mogsdad, D.Bingham</span>
</div>

<!--- Load libraries & css as required for jQuery UI MultiSelect Widget
<---- http://www.erichynds.com/blog/jquery-ui-multiselect-widget
<---- NOTE: jquery.multiselect.css would not pass caja when loaded, so has
<---- been replicated in <style> tags at top of this file. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="https://raw.github.com/ehynds/jquery-ui-multiselect-widget/master/src/jquery.multiselect.js"></script>
<!---<link rel="http://erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css" /> -->

<script>
/**
 * On document load, assign click handlers to button(s), add
 * elements that should start hidden (avoids "flashing"), and
 * start polling for document selections.
 */
$("#ms-example").multiselect({
   selectedText: "# of # selected"
});
</script>

Upvotes: 1

Zig Mandel
Zig Mandel

Reputation: 19834

I assume you mean in uiService. Not possible.
Possible in htmlService.

Upvotes: 0

Related Questions