I'm building an app to manage some users, where i have a page to list them. On each user i have some buttons to make some actions on them, like edit them or delete them.
When the delete button is pressed, i would like to have a modal to show up and ask if you really wawnt to delete the user. As i may be using this modal in other places, i thought i should make it kind of generic to receive the different messages i want to show, so i built a component for it.
I've searched through some examples, but i couldn't find one similar to mine.
I've made the template for the modal and the component to back it up, but i don't know how to show it, for example, on a button click.
Any help is appretiated :)
Thanks
EDIT: i'm trying to use bootstrap modals
use bootbox instead of making a modal from scratch. they can be perfectly used for delete confirm or alerts. I use them. http://bootboxjs.com/. It is also available for angularjs.
Related
Before I begin, I want to mention that I've found a million answers showing how to do this from code, which involves setDisplayHomeAsUpEnabled(true) from your Activity. However, what I have not been able to find is a way how to do it from XML. (I would like to hide as much UI code in the XML files as possible).
One article I did find is this, which states
Step 3: Specifying the parent activity name in the AndroidManifest.xml adds the Back-Button arrow
and Click-action. Tapping on the back-arrow takes us to the Parent
Activity i.e Home Screen.
which doesn't work for me (the Back Button doesn't appear). I've followed all the steps in the article.
Does anyone know how to do this via xml? Is it even possible?
Yes, it's possible but still, you have to set the listener in java code. You can create a custom toolbar view and add a button to it. Then create a button in the java file and set the CilckListener.
Or You can use the default toolbar and do setDisplayHomeAsUpEnabled(true) from your Activity.
We usually make a custom toolbar, suppose you need a search bar in the toolbar then what you will do? So try to make an xml then use <include> tag in xml. You can search youtube. Follow the channel CodingInFlow, that guy explains very perfectly. If you don't understand what I am saying then understand the basics first, it will help you learn faster.
I've been trying to find a solution but I can't find any.
I'll use basic examples so anyone who knows ionic can understand my problem well.
ionic start myApp tabs will create a new project with tabs ready to go.
Those tabs are Dashboard, Chat and Settings.
When you go to the Chat Tab you will then select a person to view its chat content (which directs you to the Chat-Detail Page in actuallity)
I wanted to hide the ion-tabs directive when I go to the chat-detail page so I can force the user to use the Back button instead of clicking anything on the ion-tabs.
Simply put : you will have a hard time doing that. At best it will not look good, IF you succeed to hide using css (I did it, and really, it's not pretty). Basically you would need to define a variable on the parent scope, that changes when entering the chat-detail state, and bind it to ng-class directives on multiple elements (the ion-tabs to hide it, the ion-content to translate it up to cover the area where the tabs were, and add some transition to make it not too brutal).
The logical thing to do would be to have the chat-detail state not being a child of the state containing the tabs. The problem you will have, though, is that there is a huge bug going to / from tabbed state. See details here : https://github.com/driftyco/ionic/issues/2997
At the end of this discussion you can find some posts by Jason and Jerrybels (that would be me), that could lead you on the right way to do it. Basically, you will have to get rid of the ion-tabs directive, and use Ionic's CSS for tabs instead, doing all the states manipulations yourself.
Good luck !
You can use "hidden" attribute of ion-tab like this -
<ion-tab hidden={{condition}}" />
Using this we can show/hide tab.
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.
I've seen how iphone users delete from lists - its generally a swipe action and then shows some minus/remove button.
I realize that it is counterproductive to implement iphone things on android because android users don't know this stuff.
I don't want to do that, I just don't know of a better/intuitive way to delete from a listview.
I've previously opted for doing "longclicks" on listview items, which will show an alertdialog asking if you want to delete or do other things, but this is never an obvious thing to do.
I've seen delete buttons that are shown in each view, but that messes with the layout of the listview, in a way that wasnt' considered in the wireframes.
What is a good intuitive way to allow the user to remove items from listviews on android?
Here's my two cents before I pitch my answer. Any one who has an android phone is going to know or eventually find out that longclicks often lead to another menu. Yes, it's not immediately obvious but they are going to figure it out just as iphone users have figured out the swipe action is to delete.
If you really want a fool proof way for a user to know how to delete, I would implement checkBoxes. (More on check boxes here)If the user checks the item, bring up a "soft menu" at the bottom that has a bunch of options normally associated with long clicks.
If you look at the gmail application and check a box, you'll see what I mean when I say "soft menu".
Another way you could go would be to implement check box, then have "menu options." Every android user should be able to see and figure out the menu button on their device, all devices have them. Make one of the menu options delete and you're all set.
http://developer.android.com/guide/practices/ui_guidelines/menu_design.html#options_menu
I agree that long click is horrible, but it is the standard on Android; people are more likely to be able to discover using this than any alternative gesture.
Also, put in a delete menu item on the Activity you get to after selecting something from the ListView.
In my view you should add checkbox to your list view and give a separate button for deleting items from list I mean to say that add a delete button in the layout in which your list view is also present and when user checks the item which he/she wants to delete and click on the delete button,the item which is checked by the user gets remove from list.
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/