I would like to be able to replace the current view in the navigation
stack.
I'm designing a layout for a book which is split into 9 parts. These parts are connected together using pagination at the bottom of each part e.g. previous and next buttons.
Current structure of pages is the following: I have 1 main page (the overview) that links to all parts using this.navCtrl.push(PartXPage) (I've created pages for all 9 parts).
.
Each page, also links to the next and previous pages as so:
However, here comes the problem
When I read part1, then part2, then part3 and so on, the back button always goes back 1 view at a time. So for example, if I read all the way to part 9 in 1 go and I would like to go to the overview or the main screen, I would have to click back 9 times.
What I wanted to do is create the following logic. When a user goes to the next part, we remove the current part from the view and push the next one, so the back button always returns to the overview.
I'm looking for something like (if I am on part 1, the next button would):
go_to_part_2() {
this.navCtrl.pop() // to forget the current view
this.navCtrl.push(Part2Page) // push a new view
}
However, this code doesn't work, nor does this.navCtrl.pop().push()
You can add custom back button from ionic in navigation bar and after that when user click on back button you can set the Root page whatever you want to show to user
this.navCtrl.setRoot(PageName)
Related
There are 3 screens in my app. When I use popAndPushNamed() in the 2nd page, it pops the 2nd page and shows the 3rd page, but when It pops it shows the 1st page behind it in milliseconds. how to avoid that?
is Animation the way?
or are there any other methods just like push and show 3rd page, and pop 2nd page when the 3rd page visible to the user?
popAndPushNamed() as the documentation suggests, pushes the new route but pops the old route simultaneously, and hence, there is a small moment where you can see the first page even if your new routes are fully opaque. Replace the method with Navigator.of(context).pushReplacementNamed() and it should work as expected.
My app has three tabs:
Tab1
Tab2
Tab3
On Tab2, the user has progressed an order to completion. At this point, I want to clear the navigation stack for Tab2, and I want to navigate the user to a page that normally sits under Tab3.
Currently, this is what I've got:
this.navCtrl.popToRoot();
this.navCtrl.parent.select(TabsPage.Tab3);
this.navCtrl.push(OrderStatusPage);
Where TabsPage.Tab3 is the index of Tab3.
The reason I am popping to root is an attempt to clear the pages in the navigation stack so that when the user returns to this tab later, I want them to go back to the root page of that stack.
Then, I followed Ionic's Tab documentation which suggested I could change tab by calling this.navCtrl.parent.select.
Finally, I'm then trying to push the OrderStatusPage onto the stack.
Here's what happens when I run it:
When the application pops to root, it does appear to clear the navigation stack, but in the console I can see that it hits my logon page, which isn't on the Tabs navigation stack, so I don't understand how that happens. I also don't like how it navigates to root. Isn't there some way just to clear the stack without moving the user away from the page?
The page then successfully navigates to my Tab3 page, but the command to push the OrderStatusPage onto the stack doesn't seem to register.
Any ideas?
Each tab has its own navCtrl, so when you switch to Tab3, you need to push OrderStatusPage into Tab3's navCtrl, but you seem to be using the same this.navCtrl.
For Question 2, You don't see this.navCtrl.push(OrderStatusPage) result because you switched to tab3, but are still pushing into tab2's navCtrl!
For Question 1, you don't mention your complete page structure, but I'm guessing your three tab pages are shown on top of your login page.
You can put each tab page's navCtrl into a service or a global variable like the method that is discussed here (under: Pushing each tab page into the stack), and then push/pop into them using that service.
Also, as a side note, in case you are taking the user from one step to another step, you can also use ionic slides instead of tabs.
The closest I've come to a solution here was to add the following line of code after selecting the AccountTab:
this.navCtrl.parent.select(TabsPage.AccountTab);
setTimeout(() => {this.navCtrl.parent.getSelected().push(OrderStatusPage)}, 100);
It's not at all a good solution but hey it works.
I am trying to create a new page from an existing page with a back button. I have recreated the issue here in a plunkr. In the trip analytics option When I click the first card i.e. Enter Home address. I want the todayDetail .html page to come up with a back button. I have already tried two approaches
First approach The ng-click approach. In which I give $state.go(statename) to give that page. But then I wouldn't get a back button as the navigation stack is changed.
Second approach - If I keep the navigation stack i.e. keep the state name as initial.trips.today.todayDetail. The page doesn't load at all.
What is the issue? How should I go about it?
I am working with asp.net MVC2, I'm new in development. net
I have a view that contains 2 dropdownlist and a button, I want when I click the button, another view is displayed, I want both to appear on the same page
There is two way you can implement this
1) With Complete post back you can use Html.RenderAction or load the partial view. You can use some flag to differentiate between the first time page load and post back
2) You can use the jquery AJAX and call the controller action of another View and get the content and write it to the div of the page .
Please do some research work on both and I think you can get the result as you want.
How would one implement a wizard style interface for the iPhone?
For instance I have a form that I would like to break down into 5
different pages or views instead of putting all the information to fill out
into one page or view.
This interface must have the ability to go prev or next in case they want
to change something on page 2 when they are on page 4.
This interface must have the ability to go to page 3 directly and still be
able to go prev and next. Seems like using UINavigationController wouldn't
work here since views 1 and 2 are not on the stack so prev would not work.
Update: Check out the "gas cubby" application. It has what I'm looking for. UITableView presents the items you can fill out. Selecting a row takes you to the detail view to enter data and prev and next to fill in other information.
UINavigationController seems like the obvious solution. It gives you nice, familiar page transitions for free, and if you need to jump to a specific page you can just set up your navigation stack without using the transition animations.
I would say use a Navigation Controller. On the 1st view, show the 5 options in a Table View. The user selects a row, and then the corresponding section is pushed onto the stack as a new UIViewController. So, if they are in view #3 and want to go back to view #1 (to be honest, I would recommend rethinking whether or not somebody in the real world will actually want to do this), they hit "back" and then select view #1 from the table.
I can't think of a better way to do this because you won't have room to do something like breadcrumbing, which Apple would recommend against anyway. You could use a tab bar but that is more like options then some sort of wizard workflow.
If you really want them to be able to skip around the process, the combination of a UINavigation controller with a UISegmentedControl to jump to sections would do what you want. You can either embed the segmented control in the nav bar or place it just below the nav bar (which seems more like what you want since you have five sections).
If the Segmented control is not quite to your taste just put up any set of five buttons to change sections and make them visually appealing.
A "wizard" UI is typically used when you have a relatively small number of steps where one step depends on the previous, at least at some steps, the results or presentation depends on previous steps. This is like a navigation tree that usually results in the use of the navigation controller, but with only one potential branch at each each step. My feeling is that the navigation UI would be perfect, but with one exception; A button on the right hand side of the navigation bar that is the left to right mirror image of the "back" button that is usually found in the left part of the navigation button. That button would navigate to the the next step, and at each step the page presented would allow the user to fill in the information for that step. The only problem then is navigating to a step not the next or previous, and this could be corrected with a custom button that includes a drop-down list of the steps in the process. And this would fit nicely with the rest of the iPhone UI, which Gas Cubby's wizard UI (as good as it is) does not.