I have page with three columns,details of each of the columns are as follows(in the attached image)
![Image showing column desc for the jspx page1
The use case is :I want to display one of the jsff's in the second &one in the third column based upon the tree node selected.
The approach i used is to generate a contextual event on tree node click with payload and a subscriber for the same for second and third column ,Now while trying to use the router to render the content conditionally,i'm failing .
The router gets invoked only for the time page loads and second time the control does not even go the router ,can anyone tell me what is that I'm missing here to achieve the use case.
Jdev version :11.1.1.7.1
Thanks.
Contextual events are done in the view so once the event hit the taskflow, your router will already been evaluated and your contextual event gets passed on to the current view.
It doesn't make the TF to initialize again.
Something you could do, it when the events triggers inside the TF view, you need to fire an action which points to the router.
So in your event handler you just navigate to your router.
Have a look at this one for navigation: https://blogs.oracle.com/jdevotnharvest/entry/how-to_navigate_in_bounded_task_flows
If you tree is in the parent jspx page you don't really need contextual events to manipulate taskflows. Just pass required data as taskflow's parameter and set Refresh property to IfNeeded for your taskflow binding to rerun your taskflow when its parameters changed.
If your tree also resides in taskflow and its sibling taskflow for details view then you indeed need contextual event, that should be catched at the parent jspx page (or taskflow) and then follow approach I've described earler with only change that parameter will come not from tree directly, but from payload of event.
Related
I used react-infinite-scroll-component it's working just fine.
However, I want to avoid making the user lose his scroll position when he leaves the page and clicks back?
Also please put on consideration Firefox and Safari.
Not 100% sure because I haven't used it - but since no one else has chimed in... the docs say the component has a prop named key that is described as:
the key for the current data set being shown, used when the same
component can show different data sets at different times,
default=undefined
Also, it has a prop named onScroll that is described as:
a function that will listen to the scroll event on the scrolling
container. Note that the scroll event is throttled, so you may not
receive as many events as you would expect.
... which I suspect one of the arguments of which will tell you which keys it loaded / scrolled through.
So my approach would be to use componentWillUnmount to save the last key it loaded into a parent property (or Redux store if you're using Redux)... and when the component loads, if the key exists in the parent (or Redux store if you're using Redux) then pass it that key.
What is the best way to switch to a different view when user navigates to a different url. In angular there is ng-view that takes care of this and inserts corresponding templates and in ember its all route based.
Is it better to just hide other views elements on routing using css or destroying other views and inserting current view?
EDIT
It would be great if someone could give an example how to re-render the view on navigating back to it again and restoring its previous state.
Eg.
if you have a check-box in a view that user can select to add some item to the cart , but in the middle he/she moves to some other url and then comes back, that check-box should be checked.
I would have a main content view with subviews and call remove on it, which is responsible for cleaning up any subviews too (calling remove on them first and going up the hierarchy tree). The concept of subviews doesn't come for free with backbone but isn't hard to implement. And finally attach a new content view.
This ensures you can cleanup and the browser is using a consistent amount of resources.
I would abstract this into some kind of layout view which has a content subview and a function like setContent(view) which handles the remove of any existing content view and the attach of the new one.
Personally I would have a router with sub routers in modules, e.g. a main router which finds a route starting with "checkout" and passes it over to a sub router in the checkout module which is responsible for attaching a new content view.
In Backbone the implementation is up to you which is both good and bad, depending on how nice you do it ;)
Always remove the view as opposed to just hiding it. If you don't remove (and unbind) your views properly, all bindings, handlers and references to models/DOM elements will linger around.
Depending on the size of your app, you can have a module that handles layouts (as suggested by dominic-tobias), or have a method on the router that takes care of this for you. At its most basic, this method (let's call it _switchView) takes a view and holds onto an instance of the currentView. Upon view change, it removes the current view, sets the new view to the current view and then renders it to the DOM.
Something like this:
_switchView(view) {
this.currentView && this.currentView.remove();
this.currentView = view;
this.$rootEl.html(view.render().$el);
}
Adding the view to dom id main-wrapper one router calls the view.Page loads one by one because of the sub view added in within main-wrapper. Need to know something similar to smooth loading the dom with fade in effect or shows the page once the dom is loaded.
Another approach you can take is hold off on adding the view to the main-wrapper until all subviews are created. Create a document fragment (default behavior if "el" is not defined). Once your view and its descendent views are all created in document fragment, then add it to the main-wrapper div. This way all of your content are shown at the same time instead of one view at a time.
Either use jQuery's onReady event or the native window.onload event. In both cases you register a callback function that then kicks of the initialization of the respective Backbone views.
I have a view where i have 3 links(routers which have methods triggering a View bound event).
Normally based on the link i click i reduce from the main collection a subset and render it in another VIEW.
But suppose i have clicked on a link say '....#/remaining' and then i click again on the same link, the event bound is not triggered.
But when i click on any other link and click back on the desired link, everything works!
Is this a Backbone feature/defect, if so what are the alternatives to work around this?
Thanks in Advance.
I think this is because you're doing the reduce in the Router. When you're already on #remaining, your route handler won't execute because there's no route change at all.
Instead of that, you could use a View UI event on the link to manipulate the collection, so it will always be called no matter if you're already on that route or not.
You could also use events as a communication method between your app's components: your data, your views, and so on.
Hope it helps, I didn't put any code because you didn't either. :)
I have a page X where I set a page property "type=myValue" using a drop down in page properties.
What I need is that when I create child page under page X, the child page should get the same property set for itself. This property should be disabled for end users to edit.
Can this be done without going through a workflow ? I need this to be set as soon as the page is created. ! Maybe some ext-js function on the child page template ?
Since you do not want to create a workflow, there are 2 other ways which are available through which this functionality can be achieved.
Creating an event handler that listens to Node Added event
Creating your custom servlet that handles the page creation activity by overriding the handler(CQ.wcm.SiteAdmin.createPage) for the Create Page button instead of the default command.
For quick reference, you can find details of implementing the event handler here.