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.
Related
I have the case that I push some parameters to the nuxt router (https://router.vuejs.org/guide/essentials/navigation.html) whenever somebody visits a page without any parameters.
Example:
somebody visits: /program it will end up in /program/first-event?year=2018&month=6
(First the view filters the program for current events (therefore the parameters for this year and this month) and then from the filtered events it will set the first event as active post (also by pushing it to the router).
This is all wanted and good. BUT now I detected the following problem:
Somebody is visiting /aboutus and then navigates to /program, the router will automatically change to /program/url-of-event-post?year=2018&month=6.
Assuming the user wants to go back to /aboutus he clicks on the browser back button. This will bring him back to: /program which automatically adds the post and the parameters again (effectively moving one step forward again).
Means the user is caught in clicking endlessly on the back button.
My approach would be to try to register if a user clicks on the back button and if so, I would not add the parameters. But I don't know how to do this.
I thought the router would provide some 'from' property, but so far I did not find anything.
I would be very happy to hear some thoughts on this. Thank you heaps in advance.
You need use router.replace.
https://router.vuejs.org/guide/essentials/navigation.html#router-replace-location-oncomplete-onabort
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
}
I want to change default values which gets populated in the below picture.
I tried modifying get_v_role method but it didn't serve my purpose.
Please help.
In personalize->personalize settings, there is sort option. It sometimes overwrites this arrangement of values of get_v method.
Also code can be written in inbound plug of this view. I did it for overview page drop down and it worked. You can try for your search page.
For filtering/changing drop-down value of search parameter, You've to Re-define GET_DQUERY_DEFINITIONS method of ZCL_XXX_IMPL class of component. GET_V_XX methods are only used to modify drop-down/F4 help of view pages not the search view.
STEPS:
Click F2 while placing the cursor on Account ID(for which parameter you want
to modify) drop-down.
Go to BSP Component using t-code - BSP_WD_CMPWB
Enter the component name and Enhancement set
Select the view.
Go to Implementation class .
If your component is enhanced then it will be having ZCL_XXX_IMPL class. otherwise you've to enhance that component. Click on that class.
After that find GET_DQUERY_DEFINITIONS method and implement same way as
GET_V_XXX.
I want to add a confirmation popup when a user navigates away from one of my presenters and is replaced in a NestedSlot. Can I intervene before a place is revealed and check the current presenter?
Edit: I just learned that the PlaceManager has some support for this using the setOnLeaveConfirmation method. That said, I still don't think this will work for my case because I want the confirmation popup to be associated with a single nested presenter. I would also prefer to manually intervene because I already have a confirmation modal for a cancel button that I want to reuse.
It would have been simple if you could override window.confirm() using GQuery the same way as you can in JQuery, however that's not the case. Your best option is still using placeManager.setOnLeaveConfirmation(). You could probably emulate the same behaviour as window.confirm() with a PopupWidget, but then it wont block access to other parts of the page.
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.