Reload tab on navigation in LWC - salesforce

I have a use case where I need to navigate from one salesforce tab to other. I want the tab to which I navigate to reload as I want it to render and per new data which I will be setting in the previous tab.
I have tried using following code but it does not seem to reload the page. It just navigates to the tab.
this[NavigationMixin.Navigate]({
type: 'standard__navItemPage',
attributes: {
apiName: 'tab_api_name'
},
});
If not complete reload, is there any method which we can invoke on switching/navigating between salesforce tabs as it did not call any of the lifecycle methods while switching tabs.

You can try window.open(url, "_self");

Related

Gatsby How do I reset the app on a site reload

I am creating a react/Gatsby website and am trying to get the navigation working an need some guidance
So basically I have a site on a domain like: https//mysite.com
When navigating in the site my route gets added to the domain, like so: https//mysite.com/page1,
https//mysite.com/page2 etc.
When I refresh the browser I want the site to reload the website to its origional state, ie, https//mysite.com.
When I do reload from /page2, for example, the site seems to remember the last position. So on a reload I still have https//mysite.com/page2 in the address bar, whereas I want the site to go to the home page.
Is this possible?
Thanks
See this question for how to detect a page reload (such as pressing F5). The second most upvoted answer recommends this code for detecting the refresh and triggering another function:
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
}
Gatsby uses #reach/router under the hood. So use Gatsby Link to redirect to your root page:
import { navigate } from "gatsby"
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
navigate("/"); // redirect to your root page here
}
The user will be able to go back to the previous page. If you don't want this you replace the history like this:
navigate("/", { replace: true });

In react how to set initial state when I clicked that route again

I am using react, react-route.
I have sidebar in which I have several page links, suppose I am on one page and on that I have two things - form and grid, when I open that page, grid comes when I click on add button, I set state as false. So my form opens, now I click on the same page from sidebar then I want to show grid instead of form.
How can I do that?
router.push({
pathname: '/users',
state:{iSGrid:true}
})
componetWillRecieveProps(){
this.setState({
isGrid : this.props.location.state.isGrid
});

How to distinguish link click vs transitionTo

I am trying to remember the scroll position of a page using that code:
$rootScope.$on('$locationChangeStart', function(angularEvent, nextRoute, currentRoute) {
$rootScope.scrollPosCache['dailyController'] = $window.pageYOffset;
});
When the page infinitely-scrolls I am using ui-router's transitionTo to modify the current url in the browser history like that:
$state.transitionTo('daily', { page: pageIndex }, { notify: false, location: 'replace' });
the transition changes the search string to e.g.: http://example.com/?page=1/2/3/4/etc
so, the $locationChangeStart code is running both when I make the transition and when the user leaves the list page to follow a link to a detail page.
How do I know the location change has come from a transition and not from a click through? (I only want to remember the scroll position when the page is left)
The solution is to use $stateChangeStart and not $locationChangeStart.

Reload page if click to same path

:)
I'm trying to reload browser (with location.reload();) if user click in <Link> for the the same path, where it already.
Example:
I have a menu:
- Home
- Contact
- About
When user click in 'Contact', he go to '/contact'. But I he already in '/contact' and click in 'Contact' in menu, the page reload.
It's possible to do this?
What I'm trying:
<Link onClick={this.handleClick} to="contact">Contact</link>
handleClick(){
var currentRoute = 'React-Route path';
var linkRoute = 'link path';
if (currentRoute === linkRoute)
location.reload();
} else {
//do default transition
}
}
But I don't figure what I need to declare in 'currentRoute' and 'linkRoute'. :(
You shouldn't reload the page. Thats a really bad idea. Instead disable the link like this:
if you are on the home page your links would look like this
home
contact
about
Then in your handleClick() function you can just do this.
handleClick(e){
e.preventDefault();
var disabled = $(e.currentTarget).data('disabled');
if (!disabled){
//do redirect
}
}
Basically have a data attribute on the link that specifies if it is disabled or not (only disabled if its on the current page) and then only redirect if its on a different page
Reloading the page on the exact same page will cause you to lose all state and process that the user has done, which doesn't need to happen. It also reduces traffic on your server for a new page load (aka any data you need to load on the page load you don't have to do again).
You can use window.location.href to get the current URL. Then you can do your comparison.

Backbone routing keeping hashtags when navigate()

Hello here is my scenario.
I have these routes
routes: {
"": "show_group_list",
"!/group/:_id/": "show_group",
},
and here is my navigate function:
App.app.navigate('!/group/'+group.get('_id')+'/', { trigger: true });
when the function is triggered, on the address bar it shows localhost/group/1 instead of localhost/#!/group/1. The problem is that when I refresh the page I don't get the initial page anymore (mine is a single page app)
How can I hack navigate() so that it keeps the hashtag?
Ok, This was easy, I had pushState enabled. Disable pushState and you'll have back the hash

Resources