Sometimes, users need to select options using a visual representation of the options. The image select element only allows users to pick images. In particular use case users should be able to visual select seats, rooms, parts of the body, etc.…
Provide as Webform Options Custom element where any HTML or SVG markup to be converted into a selectable single or multiple options elements.
Here is a conceptual prototype.
<div data-id="one" data-name="One" style="margin: 5px 0; border: 1px solid #000; padding: 10px;">One</div>
<div data-id="two" data-name="Two"style="margin: 5px 0; border: 1px solid #000; padding: 10px;">Two</div>
<div data-id="three" data-name="Three"style="margin: 5px 0; border: 1px solid #000; padding: 10px;">Three</div>
one: 'One -- This is a custom description.'
two: 'Two -- This is a custom description.'
three: 'Three -- This is a custom description.'
| Comment | File | Size | Author |
|---|---|---|---|
| #66 | 3081795-66.patch | 594.96 KB | jrockowitz |
| #64 | 3081795-64.patch | 0 bytes | jrockowitz |
| #62 | 3081795-62.patch | 595.26 KB | jrockowitz |
| #56 | 3081795-56.patch | 584.57 KB | jrockowitz |
| #52 | 3081795-52.patch | 580.13 KB | jrockowitz |
Comments
Comment #2
jrockowitz commentedMile3 would like to sponsor development.
https://www.drupal.org/project/webform/issues/2907663
Comment #3
jrockowitz commentedComment #4
Mile3 commentedThanks Jacob. Looks good.
A very important request:
1) I hope we can still apply options limits (which I believe is addressed if this is a select field)
2) We have to be able to get data from prior submissions in the tooltip (probably using an entity reference view, but we're open to other suggestions).
Use case: Exhibit hall. If a company is choosing an exhibit booth space, they should be able to hover over booths that have already been reserved to see who is going to be nearby and avoid conflicts.
In addition, the Mile3 team would like to offer to provide some common SVG field presets (countries, states, etc) once this is off the ground.
Comment #5
jrockowitz commented1) Options limits will definitely be supported. This is why the disabled/enabled states need to implemented.
2) The tooltip is going to be powered by the option text + description. One challenge might be supporting HTML markup in the tooltip.
For entity references, I think I am going to build the relationship using the options text and not the the option value (ie node id).
For example, in the SVG you would only have
data-option-textattributes. For the entity reference options I would adddata-option-valuewhich would be the entity ID.<rect data-option-text="Booth 1" />would be magically change to<rect data-option-text="Booth 1" data-option-value="1234" />Please attach as many example as you want to this ticket.
Comment #6
Mile3 commentedHere is a sample of the United States, and a conference room with Tables. Ids are provided.
More examples of maps can be found here: https://simplemaps.com/resources/svg-maps
Comment #7
jrockowitz commentedComment #23
jrockowitz commentedComment #24
jrockowitz commentedComment #25
jrockowitz commentedComment #35
jrockowitz commentedComment #40
jrockowitz commentedComment #47
jrockowitz commentedComment #49
jrockowitz commentedComment #52
jrockowitz commentedComment #56
jrockowitz commentedComment #62
jrockowitz commentedComment #64
jrockowitz commentedComment #66
jrockowitz commentedComment #68
jrockowitz commented