Durandal - Distinguishing entry from a 'back' button vs. navigate() - durandal

In my Durandal app, I have a search page - I'd like to:
Load a clean search page when it's loaded from the menu (router.navigate('#/search'))
When navigating to an item from the search page, then using the back button, this should return to the original search result & criteria.
I'm also storing my search criteria & results as a (app-wide) singleton, which is injected to the view model via RequireJS.
Am I able to: distinguish how the user entered the page? I can see that the activate() lifecycle call is triggered under both entry methods.

If you want to know if the user landed to the search page by clicking a link/button from your app or by visiting by entering a url/back button, what I would do is to raise an event when the user clicks on the link/button and on the search page check if the event has been raised or pass some parameter in router.navigate.

I have been recently doing some work on distinguishing a user click from within the application and a back or forward button from the browser. If you are using router.navigate() to navigate around the Durandal application the router.explicitNavigation flag is set to true. But you would want to capture this before the 'router:navigation:complete' event in 'router:route:activating' event as the flag gets set back to false on 'router:navigation:complete' event.
Bottom line is if you are using router.navigate to navigate around the application the router.explicitNavigation property will be set to true and if navigation is triggered using the back/forward button in the browser router.explicitNavigation will be set to false.
In actual case you might not even need to perform router.navigate() to distinguish between an in app navigation and a browser back/forward because Durandal's router module listens to all 'a' tag click on the document level and sets the explicitNavigation flag to true. However I haven't tested this fully.

Related

How to remove reloading of page when user click on components in sidebar of vue-styleguidist

I am currently using "vue-styleguidist": "^4.36.1" version and I have some string params in URL.It is loading perfectly fine until click event happens on components in side bar of vue-styleguidist.
Once click event happens, whole page reloads ad string params in URL are getting lost.
Please check in this link:
https://vue-styleguidist.github.io/basic/index.html?name=zzz
Once page loads click on any component in side-bar and we can see that name parameter is getting removed from URL. But I need to have those to make condition based rendering
Any help would be appreciated

Know in `activate` if the navigation was due to clicking on the nav-bar

I am trying to get 3 different routing "styles" in my application. I need to identify these in each view-model's activate method:
User clicks a button or link in my app that causes my app to call this.router.navigate()
This one is easy because I always put a parameter into the URL, so in the target View-Model, I have that param in my activate method.
The users presses the back or forward buttons or loads the application for the first time.
I can also get this by using the this.router.isExplicitNavigation variable or checking if my state is uninitalized.
The user clicks on one of the views displayed in the nav-bar (setup in the app.ts configureRouter method).
Unfortunately I cannot find a way to distinguish this one from when the user presses the back and forward buttons on the browser.
So here is my question, is there a way to know when a view-model's activate method has been called because a user selected a nav-bar route?
If I understand your question correctly, you want distinguish between 1. and 3. In activate(), you receive all routing parameters (as the method's first argument), both:
from the route-template, such as /myRoute/:myparam
from the query string
So I'd suggest to put a query parameter for the menu bar, which parameter you can read in activate(). For example:
let's say your route /myRoute
from the button, simply navigate to /myRoute
from the navbar, navigate to /myRoute?from=navbar
You might know this, but you have multiple options to navigate from code:
router.navigate('compose your route manually')
router.navigateToRoute('route's name', parameters)
in template, using <a route-href="route: 'myRoute'; params.bind={...}" >
Your code:
//button
router.navigateToRoute('my-route');
//navbar
router.navigateToRoute('my-route', {from: 'navbar'});
//destination view-model
activate(params: Object): void {
if (params.from === 'navbar')
//routed from the navbar
else
//routed from a button
}

Aurelia: Show Dialog State In URL

I have a simple Aurelia application that displays accounts. The default view is a list of accounts. There's also an account details view.
I'd to make the details view open in a modal/dialog over the top of the list view. However, I want the presence of the modal to show up as part of the URL.
I found it easy to use the aurelia-dialog plugin to display the details view, but can't figure out how to get the dialog's presence to show up in the URL.
Another option might be to throw out aurelia-dialog and use a child router to display the details view, then figure out how to make that show and hide as a modal.
And, of course, another possibility is that there's a better way that I just don't see yet.
Has anybody seen or created something like this?
One possibility that occurs to me would be to add the dialog's presence as a parameter to the current route and then call it. You could use the route like /account?dialog=true. Run some tests to ensure that the ?dialog=true still routes to the same page. Then, use that route to check whether that parameter is set and display or hide the dialog window. When you refresh the page, the dialog window should still be open/closed. This also means that whenever you open or close the dialog window, you need to send a new route to the router (basically same route but different parameter).
This isn't a detailed solution but might get you on the right path.

Capture the browser's back button in an MVC4 web application and execute a Controller's Action

We have developed an MVC4 Web Application. Due to the flow of pages (it is a reservation system) we need when the user pressed back button the page to be executed again ie reload data from database as it was called from first time.
May be a solution is to suggest how to Capture the browser's back button in an MVC4 web application and execute a Controller's Action
Kindly consider.
Any assistance is kindly appreciated.
Based on your comments it seems you are building up state over several pages (in a wizard style) and it is when navigating back to an earlier page that you would like the state to be cleared.
You would need to capture the page navigation logic on the server side and not rely on capturing back button events on the client side.
You should use the state you've captured to determine what should be displayed to the user and what should happen to the current state you have.
For example, imagine you have pages A, B, C, D which collect user information. The user has entered information on pages A and B (which has been gathered in the session or the database perhaps) and is now on page C. They then navigate back to page A (via the back button or by modifying the url directly). At this point (in the controller for page A) you can determine from the current state that they have been to page B and therefore deduce that they must have navigated back. You can therefore clear the state at this point or perform whatever logic is required.

Launching DocList Webtop Component within a Container

Are there any Documentum Webtop developers on here that know how to launch the DocList component within a simple container such as dialogcontainer ? I'm trying to implement some custom functionality for one of the screens in my Webtop-based application so that when the user clicks on the link for a folder, the DocList component is invoked to display the contents, then after the user is done looking at them, she can click the OK button provided by the container to return to the previous screen...
I've tried a couple different ways to do this. My first attempt was to use a dmf:link tag to call a new component I defined called doclistcontainer to contain the doclist component. My second attempt was to use a dmf:actionlink tag that called an action I defined which executes doclist within a container. In both cases, I end up with a blank screen, generic title, the OK button doesn't do anything... When I run a debugger on the code, I can see that the DocList behavioural class is being called despite the blank screen being displayed. What am I doing wrong?
Sheldon