AngularJS tab-like behavior for list/detail view on same page where form needs to change based on selected list item - forms

I have a list/detail page which I've based off of this question.
It works perfectly for displaying the information, however, my detail view in this case needs to be a form.
So my question (which I really hope some of you smart folks can help with) is two-fold:
How can I add an active class on the list item I clicked, and remove it once I've "closed" the detail view, or clicked on another list item?
How can I update the form in the detail view, and have the user potentially make changes to that form, and still have it update the correct item in my model?
Imagine a list of phones on the left, with an edit form on the right. The user would choose a phone on the left, change the number in the form on the right, and hit save.
I come from a jQuery background, and I'm still trying to get my head around AngularJS.
Any help would be greatly appreciated.

Related

sharepoint online, set edit item view as default instead new item view

I am working in a small SharePoint project to let school students pre-order the lunch online.
the main idea is the student can login to a school site, fill an order form.
I try use a list form to do it, just simply put a InfoPath form as web part on the home page.
When students open the site, he can fill the order form directly.
but the problem is the default view of this web part is always the new item form. so when a student already make the order, then login to site again,
how can I let him see his order and edit it instead a new order form.
another way may be use the form library, but i don't know how can i transfer the filed from the form to a list. because at last we still need a list instead a bunch of documents to get the summary of order.
Thank you for help.
Perhaps you can use a custom list and show that on the homepage?
A 'custom list' by default only has a title column but by adding more columns through the list settings you automatically add form fields on its new item form.
Since you are creating an order form you might want to hide the title column. Go to the settings of the list, then advanced settings, allow editing of content types. Then back in the list settings click the 'item' content type, then the title column then click the radio button for hidden.

can i use fancybox for an online form contact?

I'm creating a contact form, which I want to be pop out (and greyed) and wanted to know if fancybox could be used for this purpose. I currently use it for images but curious to see if it could work for this purpose.
You can use fancy box for a form.
You might have to make some changes to the plugin to get it work though
you can see how to do it here
Based on your comment: There are a few ways to get that done:-)
One way, is to have multiple divs within the form. Make the next button hide one div and show another in the modal. This can be done as many times as you need to do it within the same modal. Then when the form is complete, you can have a submit button now instead of a next or previous button.

Should I provide new GWT place?

I have a general question for GWT Activity and Places paradigm realization
For example, I have a place "productList" and appropriate view ProductListView. A have a table with some Product entity in each row. I wanna to double click on row and got popup window which allow me to edit Product in doubleclicked row. How to implement it? Should I provide new place "editProduct" for this activity?
A popup dialog is not a place - users would not expect to see it when they press the back button. So there is no need to create a special EditProduct place.
You can think of "places" as something that users may want to see when they click on Back or Forward buttons, or something they want to bookmark.

iPhone Footer like functionality

I am having trouble with designing my App.
I am having a button and a label in every page, required functionality is when user clicks a button, it will fetch the last tweet of application's tweeter account and will display it in label.
I know how to fetch and display it in one page.
My question is, can't I create something like custom control, which i just need to place in every page.
Hope, i was able to explain my question.
Any help will be appreciated.. thanks in advance.
Paresh
you create this footer view and place it in the first view (or a base view) and add all the subsequent views below it.. or you could even add it directly to the window..

Select dropdown list accessibility/usability

I am trying to find the most usable/accessible way to implement a simple form dropdown list which will sort a list of products by pice and alphabetical order.
In your opinion is the dropdown more usable when there is a button that governs its submission or when it automatically submits onchange of the dropdown?
The research I have read is both for and against such methods and there is a variery of implementations on the web so interest to hear the thoughts of the community.
Thanks in advance
As a blind computer user either method works fine. I find that having a button to click is slightly easier for me then the onchange event firing. I wouldn't say it's a big enough difference to take into account though assuming the majority of your users will not be disabled. If your targeting specifically blind users I would not use the onchange event.
So long as you do not change focus or navigate to another page when the selection changes, either approach should work. The classic example of a problem dropdown is where it contains a list of other pages on the site, and navigates as soon as the selection changes. This prevents a keyboard user from using the list; they can't browse it, and can't navigate to any pages beyond the first selection, since it's impossible to navigate past those. So in cases where focus changes or the page navigates as a consequence, having a separate action (eg. Go button, or handling enter) to cause the navigation to take place is essential. This is likely where the advice you've read is coming from.
In this case, however, it sounds as though you are just updating content elsewhere on the page, and not changing focus or doing navigation. Simply resorting existing content should be fine.
Depends on your users and their respective expectations and the context in which it's presented.
As a blanket, general statement, you should have the drop down accompanied by very obvious submission button. That is the safer approach.
If you are refreshing page data or if the focus moves away after the dropdown option is selected, you should use a button to be accessible. If you fire the event on change, blind or keyboard-only users will not be able to use the dropdown menu at all if they are on windows with ie and chrome (so added together, a majority of the people on windows). As soon as they use the arrows to scroll down and make a selection, the first option they hit will be selected and the page data will refresh or the focus will move, making it impossible for them to navigate or select the second option, third option, etc. Below is a thorough explanation with examples so you can see what I mean.
Designers definitely don't like the buttons, but if you are blind and on chrome/ie, it is impossible to use a lot of dropdowns without it. I'm guessing Jared uses firefox or a mac.
http://pauljadam.com/blog/javascript/onchange-event-on-a-select-inputjump-menu-accessibility-problems/

Categories