Can someone please be so kind as to explain to me how this is done. The idea is to click on any of the custom values, giving me a pop up tag which I'm also able to delete.
What makes the tag a "pop up" tag?
Do you want to build a list of multiple tags for the same record by selecting them from this value list?
That is correct, Phil.
Why not use check boxes?
Good point and I did think of that but certain fields for example (Mood) will include over 350 words to the value list. A "enter keyword" and "pop up menu list" seems to be the better choice for this design.
A “checkbox” approach can include a scrollbar even though that’s not a built on feature.
You can select multiple values at one time. From your value list if you hold down shift or control key while clicking.
You could use two fields. One field is formatted with your value list. The second stores the list of previously selected values. A script trigger could append the new value in field one to the list in field two. But then you’ll need a way to select a value to remove it from the list. Something built in to a scrollbar equipped set of “check boxes”. (Actually a portal with buttons)
Thanks, Phil I will give this a try. Assuming I don't quite like the layout as much as the above image, how difficult is it to put together?
Take a look at the "check boxes with scroll bars" example in this file:
Adventures in FileMaking #2-enhanced value selection
For a list of tags, the "Check boxes with scroll bars II" example might also be useful.
The example files are great! Thank you, Phil. I had a look "check boxes with scroll bars & II" and it'll probably do the trick but I was also looking at Button Bars as Value Lists and that seems to be the closest to what I had in mind
According to UX blog posts I read, a typical pop up value list is not useful after 20 or so values in the list. I think we as FM Devs should try and follow web/app experience design as close as possible. We are building a custom app.
So I always go the route suggested and demonstrated by philmodjunk. And with popovers or card windows, the screen space required by a portal acting as a value list is a great way to save screenspace.
You mentioned using a button bar. Are you going to create a button bar for 350 items? I think the limit is 50 buttons per bar. That would be a lot of work.
Here's a pic as an example:
Again. Using a card window or popup would give the user full access to this without sacrificing screen space.
Web Viewer Integrations Library - Soliant Consulting
This is not that difficult to implement but it does have some limitations.
Thanks for your input, Jeremy. My layout and idea's since the last couple days have changed and I will keep this in mind. What you and Phil have suggested is the way to go.
“Are you going to create a button bar for 350 items? I think the limit is 50 buttons per bar. That would be a lot of work.”
Jeremy, you might be interested in looking at the button bar example. While I wouldn’t use it for a value list of 300+ values except for very unusual circumstances, the method demo’d does support a variable number values with no theoretical limit. I came up with the technique because there are places where you can’t use other options and get a good user experience such as putting a value list inside a popover for a layout designed for iPhone use.
Oh I agree and like the demo that you've got here. I was just thrown by the '350' comment .
It's great there are lots of ways to display value lists.
(This should have been directed at 'Img', not 'Jeremy'.)
I'd be curious to know where you got the UI idea/screenshot.
Did you check the demo file by Jeremy (this was a devcon 2017 presentation)?
Howdy. It is in my DevCon 2017 presentation as well as in the web viewer library on Soliant's site. It is an integration called "TypeAhead". There's another one called "FlexiList" that can be used.
Again, easy to implement (well, easy-ish). Soliant's site contains videos on how to work with these generally.
The screenshot that you originally posted is something I helped create over a year ago.
I don't recall all the details off the top of my head, but some of the broad strokes:
* the box with green text pills and circle-Xes is a web viewer - this was so the tags could be displayed horizontally and keep the vertical row space used to a minimum
* the pick-list is based off a related table
* the 'tags' are ultimately related records (different than the pick-list table I think)
* when you add a new tag, or pick an existing one, the overall list of tags is regenerated, compiling the HTML chunks for all Tags and storing it in a single field in the parent record (for rendering speed)
* clicking the name of a tag (in the web viewer) calls a script back in the FM solution which executes a search for tags with that same name
* clicking the circle-X on a tag calls script back in the FM solution which deletes that related Tag record
* You can type into the field, and there's a trigger on the field to check if it's a new Tag or not; new tags get created in the Tag table (which drives the pick list), and then creates a related record for displaying.
Thanks for the info and I have to tell you that the whole Qwire design is very well done and probably the only solution I've noticed for the film/tv industry that is quite detailed. I'm looking into creating something similar to what you created but on a much smaller scale and for personal use. I'll try to wrap my head around your info and see what I can do. Being a composer and limited coding knowledge, this whole Filemaker stuff can be frustrating at times Cheers!
Ah, an actual user of the software! I don't get to meet too many of them.
I'm glad that you have found it useful. Good luck with the endeavors! Just keep in mind that this bit of UI was concocted in order to alleviate various UI issues - not because it was the fastest or best way to achieve these results. The suggestions provided above are probably better.
Retrieving data ...