How to create an N:N relation editor in web page? - javascript

I have to create a small "who does what" web application for incoming letter routing:
there is a relatively long list (about 600 items) of employees;
there is a short list (about 5 items) of tasks;
when assigning a task to an employee, due date must be specified;
As a result, i need a list (sequence of items matters in this case, since the first employee in the list is considered the "main responsible person"):
John Smith - write a response letter - 20.01.2010
Frederica Minoso - review the incoming letter - 18.01.2010
Robert Geer - review the incoming letter - 18.01.2010
If we had, say, 10 employees, the design would be quite easy - a drop-down list of employees, a drop-down list of tasks, a date picker for due date, a "Add to list button"
Like this alt text http://naivist.net/tmp/layout.jpg
And of course, I would add a result list with "move up"/"move down" buttons besides it.
However, a drop-down list of 600 items is obviously too much; this means that some user searching by name, surname, department must take place.
I am skilled enough to technically create the application (JavaScript, jQuery and ajax requests being my friends), but the trouble is - how to design the interface of the web form so that the users would understand what exactly they are doing? How to lay out the items in form? What to show in the beginning, what to hide?
Maybe there are there some modern UI form patterns I could use here? For instance, maybe a text box where user can type in and auto-suggest with closest matches drops out?
Maybe some draggable/droppable pattern can be applied (for instance, after you have entered user's name, you drop it on an appropriate task)? How easily do users typically adopt to such non-standard interfaces?
To state a question - how do people typically solve this kind of data input problems? Have you seen good examples of this somewhere on the web? Tell me, because I can't think of any right now.
Sorry, there are many questions and many of them are discussable. Should I mark it as "community wiki"?

As soon as I saw the problem, I thought AutoComplete. Since you thought the same, it is probably the obvious solution to the problem. The "To" field of emails has the same issue - how to select that one person from 1,000s of contacts.
Yahoo has some good accessibility considerations to be sure that the AutoComplete field works in a manner that is obvious and consistent with typical behavior.
Since the task contains 5 items, drop downs are acceptable. The recommended upper limit for drop downs is 7 items, so you are within the limit. One suggestion would be to end the tasks with "by" or "on" so that the line reads like a sentence - John Doe writes a response letter on 22/01/2010. Also, including a little visual aid in the drop down could increase conprehension in some situations.

To begin with with, I'm not sure I agree with the non-standard interface part. I suppose it depends on who the users actually are, but I would definitely say that that kind of text box/auto search functionality is becoming very standard from airline booking forms to search engines.
About the selection method, I would go for the text box method, so that when a user types in text a search starts the results of which are displayed in a drop down. The search should of course search both surnames and first names with some kind of intelligent regex at least.
On top of that I would still add a selection field, maybe not a drop down but perhaps a list box that contains all the employees, possibly with options to order the names by surname or first. This would be for those who don't know the spelling of a persons name, or can't quite remember the name.
Otherwise the layout you have there seems to work for me. I wouldn't play around with dragging and dropping anything. This of course creates a nice feeling to it, but is way more unclear on what should be done to assign the tasks. If you find yourself writing instructions on how to use the thing then you've gone overboard.
The other thing that I thought of would be to have an appleish menu where you have an empty list at first and when you click on the list, the input fields appear. The problem with this is that since the UI doesn't have indication on what you should do to add stuff to the list, people are easily left baffled.

Related

Compare two int columns in SharePoint list

I´m doing a course catalog app for sharepoint. And i have a list called Courses.
in that list i have two columns called: seats and FreeSeats.
When you make a new course the boss decide how many can apply to the course.
So for ex: 5 seats.
When the Fifth person apply there most be a stop.
So i thought if i have the column FreeSeats, it can count up everytime someone apply. And when it is the same as the column Seats it will NOT be able to apply.
So i guess i need some sort of count that add 1 everytime someone apply to the FreeSeat column. And in a if loop check if the value of freeSeats are smaller than Seats, you can apply. If its bigger than Seats it will come a stop message.
Someone have any idea how a code like this looks like? I have never done this before.
Since your new to this I would advise you go through this MSDN tutorial.
It outlines how you would do some basic CRUD functionality in a SharePoint app.
You can then adapt it for your particular purpose. This is how I started out :) good luck. Ignore the fact it mentions Napa the app structure should be similar in VS
MSDN SharePoint CRUD in App
Cheers
Truez
You can actually set this up without any code by creating a list of Free Seats with Titles ranging from 1 to #. In your signup lists you would create a lookup column for each course that points to the corresponding list of free seats and select the "Enforce unique values" option. That way, when a user signs up for the course, they must select one of the free seat values you have created, and cannot sign up for a value selected previously. You can use a workflow to update a list elsewhere to give you your signup counts for tracking if you wish.
To do this programmatically you would need a workflow or event receiver that counted the total number of list items with a Free Seats value selected and then remove the contribute rights for the list that people are using to signup. There is no other way to stop people from adding a new item once your quota is satisfied.

Jquery autocomplete and output on same page script

I need jquery help. And I'm an extreme nube.
What I want is several input fields (say, 1-5) each with autocomplete. If I find my desired input, I select it from the offer. If not what I write is added to the list on that given field (1 has it's own list, 2 it's own etc).
The lists should be saved in a DB on the server so the next person sees any additions.
The output should appear on the same page as it's selected / written in the fields.
Basically, I want a sentence builder (input 1 is subject, 2 is verb, 3 is object, etc). In the future I'd like to be able to make it into a slang translation engine with crowd verification and "Vulgarity Rating". But right now I'm just looking for a prototype of the input.
Anyone want to help or point me toward where I can find info to do it myself?

Angular Filter Improvement (pure JavaScript)

I have this plnkr here http://plnkr.co/edit/KbBg67.
You can see the categories object format and the posts object format.
It is a angular demo app based on a Wordpress backbone, from where I get my info using JSON.
Problems with this:
the way the filter is implemented, this is another question on stackoverflow, here AngularJS promises and timing with custom filters
the filter duplicates all my posts, also asked in the previous question.
the filter hides the items, but they won't show back again.
the filtering method is not OK, this is what I actually need help with
Desired behavior:
Any post can have more than two categories, one is day or night, the rest their specific category
I have to main categories: Day & Night, at start only one needs to be selected, day. Whichever one of these two categories I selected posts that match that need to show.
After I selected one of these two categories, I can refine further with the subcategories, funny, weird, architecture, rooftops etc.
Day&Night are somehow imperative categories, if Day is selected everything that has Night mustn't show up.
But if I have Day selected, and I select Funny, Posts that have Day&Funny Selected must show up, also if after funny I select weird, posts matching the Day/Funny/Weird must show up.
It's really convoluted to explain but the behavior is pretty straight forward, good UX, I just can't wrap my head around that filter to make it like this.
I don't want only the code, I want to understand how to make this :) to avoid future questions. I realize this is pure JavaScript at this point.
As a background, I am a frontend developer that turned recently to Angular and I am dipping my toes heavily in it :).
Thanks a lot!

Do you reuse values from a select box?

Let's say that I have a select box in an html page. And the values in that select box come from a db query that returns a not so small list of options.
Now if I need to add another 4 select boxes showing the same list of options, would I have to duplicate the code and so send back to the browser 4*(select_box_result_size) or this is normally done differently?
Regardless of how you are managing the server-side code, the answer is that each select box needs its own group of options. That said, if all options are the same then you should only make one query to your database, and generate the all the select boxes you need with a single function. Simply get the options from the database, store them in a variable and then create your boxes.
Do note that in your HTML each box will have the values hardcoded into it, so your client-side code will have duplicate data, but that doesn't really matter. What is important is that the code that you'll have to maintain is clean, and that you put as little stress as possible on your database. One query + one function is all you need.
If performance was really an issue, you always have the possibility of dynamically-generating the combo boxes using JavaScript. You could essentially embed one and then copy it four more times. However there are two things you need to consider for this:
Do you really have a performance issue that is being caused by these combo boxes? (Probably not)
Is the combo box so big that it will actually take longer to load the HTML across a network connection than it will to copy the box four times with JavaScript? (Again, probably not... remember that the longer the box the longer it will take to copy.)
Unless you have 1000+ options, I would recommend to simply stick to generating the box four times. If you do have that many then do two things:
Benchmark. Create two pages, one with a single combo box and one with four and compare the size. Then compare the load times.
Consider improving your UI. Perhaps if you have 1000 options it would be better for the end user to implement some sort of filtering process to reduce the number of necessary elements... i.e. If you have a box containing all the cities of the world, have one box to select the country and then populate the city box with only the applicable cities by way of a JSON request.
And the values in that select box come from a db query that returns a
not so small list of options.
For user friendliness you could try autosuggest, there are libraries for that but you could try writing your own.
If same data is displayed multiple times (4 times) depending on your server side script it might be best to fetch the data in memory and generate the selects instead of querying 4 times.
would I have to duplicate the code
It's best not to duplicate, at the very least you can write a helper function to generate the select list. If you're serious about removing code from html markup you can look into using one of the many MVC frameworks out there that use templates and allow you to bind data to it.

Is there any good back-end independent HTML/CSS/JS widget for many-to-many/has_many relations with XHR filtering?

I've been looking around for a good back-end independent HTML/CSS/JS widget for many-to-many/has_many relations with XHR filtering and I can't seem to find any.
I find hard to believe people are constantly re-inventing this wheel.
What am I missing?
EDIT: Ok, from the number of people that didn't understand it, this was a crappy question.
I believe that regular web interactions should come at minimal cost (it should either already be in HTML or a package install away).
That's true for most cases. However, I'm having a hard time finding something for picking up an item from a collection (Not autocomplete, something more elaborate than merely a string. If you want an example, assume you want to pick users and have their avatar displayed while picking.).
Picture this:
When you want the user to provide
a short string in a form, you give them an input box
a long text in a form, you give them a text area
a piece of HTML (for a blog post's body, for example), you give them a text area with CKEditor or TinyMCE
pick something from a short list, you give them a drop down menu (like a select box)
a string based on a wide range of known alternatives, you give them an input box with autocomplete (jQuery UI Autocomplete, YUI Autocomplete, etc..)
a set of items from a wide range of options, you give them... drumroll...
I don't know! And that's my question. I've searched a bit and could only come up with jquery-tokeninput as a credible option.

Categories