Tags:
create new tag
, view all tags

Feature Proposals » Add a datalist to the form field types

Summary

Current State: Developer: Reason: Date: Concerns By: Bug Tracking: Proposed For:
UnderInvestigation   None        

Edit Form

TopicSummary:
CurrentState:
CommittedDeveloper:
ReasonForDecision:
DateOfCommitment:   Format: YYYY-MM-DD
ConcernRaisedBy:
BugTracking:
OutstandingIssues:
RelatedTopics:
InterestedParties:
ProposedFor:
TWikiContributors:
 

Motivation

Currently, selecting multiple items from a select box that contains a large number of entries is cumbersome. When multiple people are changing the select box values it seems common that they may forget to hold CTRL when making their first selection and remove the previous selections.

Also, when making new selections (using EDITFORMFIELD) it's not clear what has already been selected.

Proposal would be to use the datalist tag (or alternative) but display multiple entries removing the need for the CTRL select method.

Description and Documentation

Use a datalist that auto filters as user types and include a button to allow them to add a value and remove it without needing to use CTRL.

Examples

The idea is shown in the image below:

1) User types into field (datalist will autofilter as typed)

2) User clicks 'Add'

3) Value is added onto page and includes a 'X' icon that allows user to remove it.

4) When satisfied with all entries use clicks Submit to update the form.

Example.png

The example below is created using the content below (and including a form attached to the topic with a text field named SelectedPeople). Hopefully it's help but unfortunately, implementing this functionality into TWiki is beyond my current skillset.

<style>
.removebutton {
  width:15px;
  height: 15px;
  display:inline-block;
  float:none;
  padding-bottom:1px;
  padding-left:2px;
  line-height:1em;
  margin-top:-0.5em;
  color:#ffffff;
  font-family:Verdana;
  font-size:0.8em;
  font-weight:bold;
  text-decoration:none;
  border:1px solid #000000;
  overflow:hidden; 
  background: #b32727; 
  box-shadow: 0 0 2px gray;
  border-radius: 50%;
  vertical-align: middle;
}
.removebutton:hover {
  background:#30588e;
}
</style>
<script>
$(document).ready(function() {
  
//Script for selecting TWiki Users:
// Variables:
// previousPeople = the people already in the list when the page is loaded
// peopleField = a hidden field where the list of people is stored that is passed on form submit.
// peopleList = an array of all people in the list
// add_Button_ID = the ID of the button that is clicked to add a new entry to the datalist
// datalistID = the ID of the datalist.
// addedPeople = the ID of the region where all people added are listed.

//Check to see if there are any existing values
  var previousPeople = $("#peopleField").val();
  if (previousPeople !== ''){
     //Create an array by splitting the list by comma
    var peopleList = $('#peopleField').val().split(",");
      createHTML();
  } else {
  var peopleList = [];
  }
  
  $("#add_Button_ID").click(function() {
    var selected = $("#datalistID").val();
    if (selected !== '') {
      peopleList.push(selected);
    }
   createHTML();
});
  $('#addedPeople').on('click', '.removebutton', function() {
    $(this).closest('li').remove();
    var val = [];
    peopleList = [];
    $('#ulParent li').each(function() {
      val.push($.trim(this.textContent));
      peopleList.push(this.textContent);
    });
    $("#peopleField").val(val.join(', '));
  });

//This function creates the HTML for the list and buttons.
function createHTML() {
   var EntriesAndButtons = '<ul id="ulParent">';
    var Entries = '';
    for (var i = 0; i < peopleList.length; i++) {

      EntriesAndButtons += "<li>" + $.trim(peopleList[i]) + '  <input type="button" class="removebutton" value="&#10006;" /></li>';
      
      //Trim
      Entries += $.trim(peopleList[i]) + ", ";
    }
    EntriesAndButtons += '</ul>';
    CleanedEntries = Entries.slice(0, -2);
    $('#addedPeople').html(EntriesAndButtons);
    $("#peopleField").val(CleanedEntries);
    $("#datalistID").val('');
}

});</script>


%EDITFORMFIELD{ "form" type="start" action="save" method="post" }%
<input list="PeopleDataList" id="datalistID"> <datalist id="PeopleDataList"><option value="Bruce Wayne"><option value="Clark Kent"></datalist> <input id="add_Button_ID" type="button" value="Add"> - You've selected (click the X to remove): <p id="addedPeople"></p>
%EDITFORMFIELD{ "form" type="submit" value="Update People" style="height:30px; width:200px" }%
<input type="hidden" id="peopleField" name="SelectedPeople" value='%FORMFIELD{"SelectedPeople" topic="%BASETOPIC%"}%' >
%EDITFORMFIELD{ "topic" type="hidden" value="%BASETOPIC%" }%
%EDITFORMFIELD{ "form" type="end" }%

Impact


WhatDoesItAffect: UI, Usability

Implementation

-- Contributors: Jani Hamalainen - 2016-11-25

Discussion


Topic attachments
I Attachment History Action Size Date Who Comment
PNGpng Example.png r1 manage 81.9 K 2016-11-25 - 20:47 JaniHamalainen  
Topic revision: r1 - 2016-11-25 - JaniHamalainen
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.