I have a dropdown which will a client list. Based on what i select in the dropdown i want to open a new tab for that particular client. Is there any way to do it?
I tried window.open(), while it works but it appends URl to http://localhost:3000/[object%20Object]. I dont what object to get appended in the URL. TIA
The window.open() method accepts a URL, so passing a component/javascript in the way that you require is not possible.
Consider setting up a route, say /popup-tableau that exclusively renders the <Tableau /> component, and then call:
window.open('/popup-tableau')
The idea here is that your application will open the new window, and a second instance of your application will be started (inside the new window), and directed to the route /popup-tableau which will display the <Tableau /> component in the way you require.
Related
I would love to implement the following behavior:
User comes to a screen at /list URL that stores its state in search params (e.g. a paginated list -> /list?page=2)
When the user clicks one of the list items, the URL changes to /list/1 and a modal opens. The list itself stays on page no. 2.
A modal itself stores some of its state in search params as well (e.g. /list/1?tab=first).
When the modal is closed, the user returns back to /list?page=2
I started with nested routes on a codesandbox, but I can't wrap my head around this.
What would be a good way to approach this?
If a user goes to a page that requires a context beyond what's on the url, I'd like to redirect them elsewhere. The use case is:
/todos/list - this page shows the user their list of todos. It contains links to:
/todos/edit?id=1 - this page allows the user to view/edit details about a particular todo.
If a user were to go directly to /todos/edit (with no id), I'd like to redirect them to /todos/list. I have tried doing this via navigate('list') conditionally in the constructor. This does update the browser url correctly, but it doesn't render the /todos/list page. Is this possible to do? Or is this not possible to do the para below?
I understand the more common url would be /todos/edit/1 so that reach router would handle my issue w/out me needing to deal with it. However, I'm just using this as an example of a piece of information required to render the page that isn't necessarily part of the the url path.
of course as soon as I type the question in stackoverflow, I find the answer is in the docs right in front of my face:
https://reach.tech/router/api/Redirect
I have the need to be able to render any of the pages in my AEM model.json dynamically regardless of the current URL in a SPA React app.
My AEM model.json structure has pages following the /<country>/<language>/rest/of/path format, but I want to be able to strip the country/language and just use the rest of the URL path.
I am able to do this when I initialize the ManagerModel with a the desired path like this:
const path = `/path/to/<my_model>.model.json`
/* initialize the ModelManager with the path to the model.json */
ModelManager.initialize({ path })
/*
grab the desired section of the model and render by calling ReactDOM.render
By doing this I am able to render the section of the model that maps /us/en/user-account` for
example, and render the correct content even though the current browser path is `/`
*/
ModelManager.getData(`/us/en/<page_to_load>`).then(render)
When I handle navigation with history.push (I use react-router), I want to be able to render another page following the same logic. By default, having executed ModelManager.getData("/us/en/<page_to_load>"), every page that I navigate to then renders that same portion of the model.
To fix this, I have tried many variations of ModelManager.getData() calls with no success. The only thing that I have been able to have any success with is dynamically passing the path to the next page to render to a callback function that is defined on the index.js level and passed down as a prop to App.js. The callback triggers another ReactDOM.render call and loads the page correctly regardless of what the actual URL path is. That code looks something like this:
<App
reRender={(path) => {
/* manipulate the path so that it properly maps to the correct AEM model data */
const updatedPath = `/us/en/${path}`
/*
this works, but causes another ReactDOM.render call every time that the current page is
changed
*/
ModelManager.getData(updatedPath).then(render)
}}
/>
There are also cases where the page that has been navigated to doesn't have a corresponding path in the modelStore mapping. I am able to handle that like this:
const pathToInsert = `/<country>/<language>/${window.location.pathname}.model.json`
ModelManager.modelStore.insertData(pathToInsert)
ModelManager.getData(pathToInsert).then(render)
/*
I have been having issues with this, but can get the newly inserted model to load properly by
re-routing back to the current path from the current path
*/
this.props.history.push(window.location.pathname)
I have read and re-read the documentation here and I am unable to figure out the correct way to do what I want to do. The above solutions work for the most part, but are pretty hacky and I would like to find out the proper way to accomplish this. Any help is greatly appreciated!
Yes, I found a work around solution. The AEM library can't handle this requirement out of the box unfortunately. My solution was to make a wrapper for my App component. In that wrapper I initialize the model manager, clone the data and store it in local stage. Then you can conditionally modify the model and pass it along as a prop to your App component. If you have a good understanding of how AEM model data is mapped you should be able to figure out a way to display what you want. You can also fetch and insert models into your master model's ":children" prop (think that is the field name, have not looked in a while).
I have a panel on the left hand side of my app.
On the right side, the admin can select a 'User Name'. Once the User Name is selected, i need to get categories of the selected user. From the displayed categories, I can chose one for which it will display all the items.
User Name > categories > items
I also want my url to change accordingly like localhost/users/categories/items
The left side will not change at all in this process, hence I do not want to re-render it. At present I have three pages, with the navigation configured.
Actually I want to place some animations on the right side as an option is clicked. The alternative i found was to define onClick and change the component with some animation - but this kind of does not allow me to change the url.
What is the best way to handle this?
I am using next-js in my react application.
The alternative i found was to define onClick and change the component with some animation...
That's a correct approach.
...but this kind of does not allow me to change the url.
You can user browser's history to manipulate url without page reload.
For instance
const state = {};
const pageTitle = 'My Item';
const url = 'users/categories/items';
history.pushState(state, pageTitle, url);
If you have <a href's /> in your page, you might want to override their behaviour too, otherwise they'll trigger a page reload as well.
I am using admin-on-rest in my React app and wonder how is possible to make a custom page containing Show (or another detail component) with specified resource Id (for example: I want my app to fetch only resource with id = 1)
I don't know if this is canonical or the intended way to do things but you can supply both basePath and record as props to the ShowButton and EditButton components.
You can use this to redirect your user basically anywhere.
It should be possible (using some switch case or dependent input addon) to also add these props to the ListButton in the Show and Edit view and redirect your user back to the originating ListView.
Here is documentation to supply actions to the List view.
https://marmelab.com/admin-on-rest/List.html#actions