React router has very cool feature: if you have a list of items (Instagram for example) and if you click on one item, content opens in modal/overlay but if you copy-paste the link to new tab/window or share the link with a friend for example, it opens in its own page.
I would love to use this feature but I need to find a custom solution..
My posts are very data heavy
I've split posts data into 2 tables in database
1st is very lightweight containing essential data: 4-5 columns
2nd table is very heave, ~30 columns
When user uses search filter, list updates only with data from 1st table
If user clicks on post, it will open in a modal/overlay
I will recycle the data I already have (from 1st table) and also get rest of the data from 2nd table
However, when user shares the link or opens it in new tab/page, data from 1st table is not present. I would need to integrate a conditional logic:
If post opens in list view (modal/overlay), only get additinal 2nd table data
If it's opened in a new tab/window in its own page, get all the data, 1st table included
How could I integrate this with React router? Has anyone already tried it? This would also allow to use different layout/components when user opens item in page view. Is there a way to check it?
Or is there a flaw in my logic? I imagine list would update very fast because it doesn't require huge amount of data and also would modal/overlay because it recycles some of the data.
I read all the docs, also searched online - didn't find anything.
Modals in react router are great. I've used the pinterest example and adapted it to my own needs.
Ensure you do your check on state.modal===true in a master layout component to give you the modal styling.
you'll need to check if table 1 stuff is present in your state and dispatch an action to trigger the async call in componentDidMount. You should be fetching table 2 in all scenarios.
Related
We have a web app composed of several pages containing links of data retrieved from database. Upon clicking one link[data], the user should be directed to another page. For navigation between pages, we have used breadcrumb. The breadcrumb is stored in redux store. Currently, when the user tries to ctrl+click or open link in new tab, we managed to use single store across multiple tabs. Hence, if the user opens 3 separate links [data] in new tabs, the updates made on the breadcrumb affect previously opened tabs when these tabs/pages are refreshed. For example:
In homepage, I have these links:
Data_1
Data_2
Data_3
Current breadcrumb in the homepage is like this:
HomePage/
Once the user opens Data_1 in new tab, the expected breadcrumb in the new tab is:
HomePage/Data_1/
Similarly, if the user tries to open Data_2 and Data_3, in new tabs, the breadcrumbs should appear as follows for tab 1 and tab 2, respectively:
HomePage/Data_2/
HomePage/Data_3/
In the current implementation, I managed to update the state of breadcrumb whenever new links are opened such that breadcrumb[0] would be equivalent to HomePage while breadcrumb[1] was initially Data_1, then became Data_2, and lastly Data_3. Hence, the last value of breadcrumb[1] is Data_3 since that's the last opened link. My problem is that whenever the user refreshes previously opened tabs/pages corresponding to Data_1 and Data_2, since they are all using a single store and breadcrumb[1] has been changed to Data_3, the breadcrumbs in Data_1 and Data_2 pages also become Data_3.
In this case, I can just think of using multiple stores since I perceive that it could be the only solution given my use case. Meanwhile, I can't find any sufficient documentation online regarding using multiple stores in redux. Maybe I can pass the store to the next page in params...? something like that
Can someone please help. Thanks in advance.
To emulate per-tab same site persistency, I would, right before the page is about to be refreshed (window.beforeunload or similar)
1 - Write to localStorage about my breadcrumb
2 - Refresh
3 - Read from localStorage about my breadcrumb to initialize myself properly (so the data here SHOULD be mine because i just wrote it)
4 - remove breadcrumb information from localStorage (to prevent other tabs from reading it)
Now, you still have the case where the user just closes the tab, so you would have stale data about the breadcrumb in your localStorage. You can add a little expiration mechanism (you might consider that data in the localStorage older than 10 seconds is stale and just pretend it isn't here and delete it at step 3.) Cookies would work pretty much the same, with a built-in expiration mechanism.
I was asked to develop a multi-step form in React. The form contains 30 fields to be filled and it should be displayed in 3 steps of 10 fields each.
The first 2 steps have "Save" and "Next step" options to save the current work or continue with the next step.
The final step has "Save" and "Finish form" options, both of them will save the form in the database (through a web service).
Something like this:
The project is made on React, using Mobx for the state management, and I'm new to react. My question here is... how should i manage the states and the stores?
Should i have a single Store (FormStore) with the 30 fields and pass it to each component through the props and they will fill each field?
Is there any way i can have a single store (like a singleton) and each component fills its fields there?
I have to manage the fields information in memory untill the Save button is hit. And if when the Save button is hit, i need to save just the filled fields.
Any kind of guide will be appreciated.
If this form data is not changed anywhere else in your application, you can use a single store for all. I cannot think of any disadvantage given that it is relatively small.
You would want to split it if the answers could be put in different categories and different categories would be mutated by different functionalities of your app.
Dears
good day
I need your help for the following case:
The activity nature of the client is very dynamic
Need to have a dynamic form (he wants to create many form every day by himself in runtime). And add some components in the runtime.
He doesn't have a standard form so he need every day to create new form
For example he can make today a form with group of input text and group of check box and table and tomorrow he need to make a new form with input text and radio and table also etc..,.
In addition he needs to achieve and save it into database to use it and retrieve it later , and he wants to save every form with its UI contents which he created in runtime to be able to view it later on the jsf page.
So he want to save created form contains data into database
And also he wants to arrange the component on the page by his own way
And I putted this case in OTN :
https://community.oracle.com/message/14356236#14356236
How could I do it?
Regards
You can find a series of blog posts of Andrejus, right here:
http://andrejusb.blogspot.co.uk/2015/09/adf-12c-dynamic-forms-with-adf-bc-ui.html
I am trying to create a incident log in safesfore. The key aspect is that everything can be added on the same page reducing the amount of clicks that have to be made. There are 6 fields i have created:
Date Opened, Date closed, incident, reported to, reported by and notes.
I was wondering if there is a way to create an "add new" button that will create another row of the fields i have just lised. The idea being that the page does not refresh it is all done in real time.
Many thanks
You'll need a custom Visualforce page implementation.
There are 2 ways to do it
1) Building a list of records on apex and iterate over that list displaying the fields on the front end (vf page apex:repeat)-- Then when the button "add new" is clicked you'll append an empty record to the list and re-render the apex:repeat to reflect the changes.
This is good because you don't need a lot of boilerplate code since the records with be binded with the backend. However, the rerendering can lead to some performance issues in my experience.
2) Build a custom Javascript implementation, where you have an in memory collection and using DOM manipulation add/remove rows of the list. When the user saves the data from memory must be sent using JSON and a VF Remoting method can perform the JSON parsing and saving the rows.
Both are valid, the first is good to avoid boilerplate but the second is much faster (but you need to write some boilerplate).
OK, I'm very new to AngularJS. I'm converting a rather rough-app (that I've been writing for a couple of days) from using mostly jQuery over to using Angular. [ I discovered Angular "mid-stream", while researching how to alleviate all the bookmark and back-button headaches I was running into.]
On my main page, I have a table of search results. (If the user arrives without passing any parameters, a default search is called to build the table. And, of course, they can use a search form on that page to show themselves a different set of results.)
Now, when the user clicks on a table item, I want that table to more or less "become" a drop-down menu on the Item Details page that can be used to navigate from one table item to the next. (The list will usually be less than 20 items long at any given time.) Same data, same sort order, just in a different control.
Rather than build that "Child" page so that (in addition to making Ajax calls to pull up the item details) it runs the exact same query AGAIN and then builds a drop-down out of it... I thought perhaps there was some more-efficient way to do it.
Perhaps, pass the entire object of objects from the search results on to the Details controller? (I would somehow have to also pass an id for whichever item the user actually clicked on for details as well.)
[With jQuery, I had been building both the drop-down and the table of results on the same page...and then just use show() and hide() to alternate which one I was displaying. And I would fetch the Item Details data and populate/show hidden details divs whenever a table row or drop-down option was selected.]
First I think you should use some kind of routing, maybe this can be helpful
https://github.com/angular-ui/ui-router
And second one, if you want to access same object with multiple controllers, you should use factory with your object, and all you need is to inject that factory into your controllers, and you will have access to the same object from multiple controllers. Here is the short tutorial, it's very easy to understand:
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
And third option, but it's not nice, is to emit or broadcast event and send object from one controller, and in another one you can put a listener for that event, here you can find more information:
http://www.theroks.com/angularjs-communication-controllers/
http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/