Develop Reference

React Routing - How to load pop up using Routes

What I have:
1. Login Component
2. Register Component
In Login Component, there is a link called register. It routes it to Register page. The code is simple:
<Link to='/register' className='links align-left'>Register</Link>
I want to show the register component in a popup instead. I know, I can use a Dialog Component and show the register component in that dialog. Easy, but what I don't understand is how I can set my routing so it shows the login window behind, and loads the registration component in the popup. Lemme explain with an example. See how trello board works in following screenshot. The url is https://trello.com/b/i1QoQatf/
Now when I click an item, it shows me a pop up, like in following screenshot. Please note the URL right now is https://trello.com/c/QisVDEgX/639-sort-all-dropdowns-alphaetically
Now my confusion is, how can I achieve the same for my Login and Register component. If I load my routing like this:
<Route path='/register' component={RegisterComponent} />
It will call the render method of Register Component, and then only load the Register Component. How I can route it to Register Component, and still use Login in the background. Any help please?

I think to achieve this your RegisterComponent will have to render login component and a register popup.
Within your render function you will return where RegisterPopup is your registration form rendered in popup (let's assume react modal)
<React.Fragment>
<LoginComponent/>
<RegisterPopup/>
</React.Fragment>

Adding my solution here so people will understand the concept of routing.
This is actually pretty easy, if you are using NextJS. In NextJS, we need to use a server (like express) for routing. NextJS router is very strong and give loads of flexibility. Also, NextJS Link tag is as powerful. Following is the explanation on how to achieve the url routing without loading the page.
In general, you can reach to a page two ways. 1. By clicking a link/button (for example Register Now) 2. By pasting the URL directly in browser. Let's say, I have two URLs:
https://example.com/login
https://example.com/register
Now, what I want to achieve is, when I click the "Register Now" link in my Login page, it should route my page to /register but still show Login page in the background, and Registration form in popup. But remember, I want to achieve this by making sure the Login component doesn't load twice.
With NextJS, following will be the way to do it:
We will be creating one next js page called account.js
For routing to our login page, the link for login screen will be something like following:
<Link href={{pathname: '/account', query: { mode: 'login' }}} as {'/login}>
<a>Login</a>
</Link>
The link page will route us to accounts page.
If you noticed, the link tag is not a normal href. The above link tag means, "we want to go to account page, but show url as "/login", and when we render account page, send query {mode: 'login'} to the account pages' router object.
In the render function of account page, we can make a decision in run time easily on the basis of router's query object.
render() {
const mode = this.props.router.query.mode;
return (
<div>
<LoginComponent></LoginComponent>
{/* the following line will open the register component in a popup */}
{mode === 'registration' && <PopUp><RegisterComponent></RegisterComponent></PopUp>}
</div>
)
}
In login component, we will add the registration link like following:
<Link href={{pathname: '/account', query: { mode: 'registration' }}} as={`/`}>
<a>Register Now</a>
</Link>
In above example, all we did was created a page called accounts.js. We made sure that when we route to Login window, we route it to accounts page, but we send mode: 'login'. When we click on register link, we are loading the same page - accounts.js but with a different mode: 'registration'. The render function will open the register component in popup because mode is === 'registration'. In url, it will show the address as '/register'
Please note: That is just an example code for reference, It is by no means a tested code so please bear that in mind.

Issue with styled-components in "custom" single page application

I'm currently working on an old project, which has its "own way" of doing a single page application (does Ajax calls to an MVC application, gets the view, replaces the view client-side, appends styles and lots of other stuff!!), and although not ideal, currently I'm stuck with it!
I am trying to integrate an existing React application into this site, and what I'm doing is to use create-react-app and then build to create the bundles, and in the application, in the view begin returned from the server for a specific page, I'm putting script and link tags, pointing to my bundle files. It's worth noting that this server view is a partial ASP.NET MVC view, so my script and link tags are somehow part of the body.
I'm also using styled-components in my React application.
Now, here's the problem: when I first load the page I mentioned, my script is loaded, and I can see all my components being styled properly, but when I navigate in the existing custom SPA application, at some point, styles related to styled-components are messed up, and the only way to get them back is to reload the page.
I was inspecting the page, and I saw that styled-components is doing things with a custom link created in the head, and I see data-styled-components attribute being populated with custom class names as my components are loaded, but when the problem arises, in Chrome Developer Tools, I see that the link tag flashes as if it's changed, but it stays the same.
I have attached a GIF of the tag:
- It starts with the initial page load
- I navigate away and come back and I see more classes being appended
- I repeat the step, and I only see that it flashes
I know the post is already long, but any help is deeply appreciated. Is it possible that, with the current infrastructure, it has something to do with the fact that whenever I come back to the page, a script tag is sent from the server pointing to my React bundle?

Thanks to Max Stoiber for answering in this GitHub issue:
The reason for this behavior is exactly what I mentioned at the end of the question: every time the page is loaded, a script tag is sent from the server, containing the bundle, which in turn causes a new instance of styled-components to be created; this is not supported in styled-components, and that was the issue

Ember Where to place data for common code like notification, user profile on navbar

I have writing a common navigation for my ember application. I have place my outlet tag inside navigation in application.hbs. Now I want to pass some dynamic data to my navbar, how should I do it. I see there is nothing as ApplicationController in latest versions of ember. So Where should I place my data for all such things.

there might be a file called controller/application.js

How do I run JavaScript code in salesforce standard pages in latest SFDC version?

My requirement is that I need to execute some javascript code in all standard SFDC pages so that I can capture some information and log it into a server. There are ways before to embed a HTML/VF page in side bar and messages & alerts
components. But nothing seems to be working as I have tested all the approaches in latest salesforce dev environment.
I know there is already a post on this but I am asking again because the post is quite old and I would like to know if there is any feasibility to achieve in new SFDC version. If writing custom visual force page for every standard page, then it is a difficult thing to do and I would like to avoid it with a easiest solution.
Can any one please suggest a solution.
Old post: https://salesforce.stackexchange.com/questions/38918/end-of-javascript-sidebar-workarounds

For inserting code directly into any Salesforce page you need to use a Home Page Component (Setup > Customize > Home > Home Page Components).
Create a New Custom Component, Type = HTML Area. In the editor, check the "Show HTML" checkbox in the upper right. You can then put in arbitrary HTML and JavaScript and it can traverse the DOM.
If you just want your code on a single page, create a "Wide (Right) Column" component and add it to your page layout.
If you want the code to run on every* page in SFDC, then you'll want to put it into a "Narrow (Left) Column" (often referred to as the sidebar) component, check the Setup > Customize > User Interface > Show Custom Sidebar Components on All Pages checkbox, and finally select it in Setup > Customize > Home > Home Page Layouts > your layout.
Home Page Components don't need to have any visible UI.
Chatter pages don't have the sidebar, so this won't work there. The Service Cloud Console also doesn't show the sidebar and has no equivalent, so you can't do this there either.

In Aurelia, how do I populate a modal (with a view and binding) that lives in the main application layout (app) from a view by invoking the router?

For the purposes of this example, I will use some hypothetical names:
app - The master view and viewmodels app.js and app.html of my application
projects - A view which is navigated to by using the router in app.
projects-new - A view which will populate a modal.
The designer on my team has a bootstrap-modal sitting in app. On projects (route: /projects), when the user clicks a button, this is what we want:
Router navigation should be invoked. The URL should now read: /projects/new
projects loads and binds projects-new to the modal in app
The modal opens.
The user either cancels (closes the modal) or fills out the form and clicks "save"
The result of the user's action is available in projects - so maybe an event object which contains the user's action as well as the model which was bound to projects-new (if they saved) is sent from app where the modal exists, to projects by means of the aurelia-event-aggregator.
I started down the route of using the aurelia-event-aggregator to communicate between app and projects but I stopped when I realized I have no idea how the binding is going to work.
I think another acceptable solution would be to create a modal component which provides this functionality, but not placing it in app, but stylistically it makes sense to be higher up in the DOM tree. Is there any way to essentially do this? Have a component in a view which somehow hooks into the DOM higher up in the tree? For instance:
<html>
<head><!-- Header stuff here --></head>
<body>
<app>
<stuff></stuff>
<!-- This is where the view is rendered -->
<router-view></router-view>
<!-- This is where the modal component would theoretically attach from projects view-->
<modal></modal>
</app>
</body>
</html>