suppose I want to have a data provider element for my user, like
<user-data-provider user-data="{{data}}"></user-data-provider>
which sends an ajax request and gets the logged in user.
Suppose I want to access my user data in different pages, and I add this tag to wherever I need, but the problem is, every time the browser sees this tag, makes an ajax again and I have to wait until data is fetched!
I know I can make a variable in my main page and pass it along child pages, but that seems like overkill to me !
how can I persist user data across different pages and part of my app?
thank you in advance
There are different ways to do this.
You can use use a monostate pattern
You can have one instance of your user-data-provider element in your root element or index.html and use iron-signals to transmit the data to all other elements that want to consume it
You can use iron-meta to have global state
Use an external state management framework (i.e. redux). There is a polymer wrapper for it: polymer-redux
I would recommend using an external state mangement framework such as redux.
Some of the solutions are shown here:
Polymer 1.0 Global Variables
I used pouchdb for my data store, and used polymer's predefined elements to work with it
now every time that I need data, I just use that component
Related
I recently came across a feature that Salesforce Applications have, i.e. when we log out, the tabs opened during the session are preserved and are displayed again when we log back in at a later point of time.
I would like to implement something similar in my web application where I would like to retain the dynamically created DOM elements so that if I refresh the page or logout, those elements still are displayed unless the end user decides to delete/close/destroy those elements.
Has anyone implemented anything that sounds familiar? If yes, what would be the ideal way to go about it?
Appreciate the help!
I have a webapplication that holds users and adresses as well as various different values. I have implemented a review function as a helper if you go through your data on an infrequent basis. It marks each value as reviewed or not. As this feature is only a helper and a review flag or timestamp is not needed and implemented in the DB, I save an array of data as a JSON string locally using localstorage.
This is enough for my case. You could do the same for your datamodell. You can of course also save this data per user on a separate table in the db. Consider something like: id, userid, featurename, etc.. with this generic layout you can save the state for each feature of your app, be it a tab, a modal, a setting or whatever.
Of course, you need a (preferably JS) function that gets these settings and then can recreate the DOM elements or fetch them via AJAX. You need as well a function that sends an AJAX request to save the information that a feature/window/tab has been opened/closed/etc.
A lot of work for a "nice feature". Might not be a top priority on your bucketlist, but definitly enhances your user experience.
I refresh the page or logout, those elements still are displayed
unless the end user decides to delete/close/destroy those elements.
That can only be possible if before refresh/logout those dynamically created elements are stored.
That can be possible by either storing the value in database or using local/session storage.
Values of the dynamically generated elements can be stored in localStorage like
localStorage.set('someKeyName' ,'value of dynamically generated Elements in string format')
Then after refresh retrieve the values and create those elements and append it to dom
I have been using JQuery and AngularJS. One requirement I had was to show/hide divs and other widgets based on the login user role. I implemented the solution as below:-
On page load, get role of logged in user and store as a global variable in javascript
Show complete page
Hide divs using simple if statements based on security role
Is this the best way? Isn't there some framework or library for this? Doesn't AngularJS have anything to help?
Btw I understand that server side security is a must in spite of controlling what widgets login user can see in browser.
You could look at something like Angular Schema Forms. This takes a JSON object and will render it out using templates as HTML.
Another approach would be to use a template for each widget and then check the role before retrieving the template. If the template isn't retrieved then your custom tags will remain empty and have no content.
if isAuthorized
get template
else
do nothing or remove the element (your call)
The benefit of the first is that your markup is generated from server side data and thus has the extra benefit of being more secure. The second will work as well however.
Do note that you can change ANYTHING in javascript including global variable and javascript code in client side, so your server CANNOT TRUST THE CLIENT.
It's fine if you want to show/hide div based on the global variable, but your server should NEVER use that global variable to determine user permission. And for the div's that are hidden, you should NOT populate them with data from DB, so even when client change the CSS, they can't see data that is not permitted. Not to mention they can always inspect the network to see what is inside the JSON returned.
Usually you don't need to store as global variable, though. If your user does proper authentication, you should verify his identity for every transaction (every ajax request) and return only relevant content. In Angular view you can do ng-if when data exists only.
For various reasons I will not go into, I have successfully wrapped the ITHit Ajax File browser inside of an Angular Controller, which itself is loaded and wrapped in an Angular-UI-Router UI-View.
All of the settings are configured through preceding service calls (to support a cloud environment with shifty urls), and I've even gotten through all of my CORS (Cross Origin Request) issues, and we've wired in a custom Oath2 implementation on the DAV server. All of this is successfully working with the ITHit File Browser as a pretty centerpiece for our content-browsing implementation.
As of now, when I navigate certain areas, the Angular-ui-router tweaks the Url, the view responds, and the Angular Controller wrapping ITHit responds to the view change, and (without reloading the view) re-fetches the appropriate DAV url with available IT Hit commands ( e.g. SetSelectedFolderAsync )
Here's my (hopefully simple) challenge: when I navigate to certain areas - Angular-UI-router simply reloads the containing UI-View with new content, but when I return - the ITHit Ajax File Browser does not redraw.
Here are some guidelines to my challenge (ignore-able if you offer something I can work with):
I'd prefer to avoid having to "hide" the ITHit container (because
it's irrelevant and I don't want to have to manage keeping it up to
date as state changes in the view. These changes affect DAV paths). Also I don't want to worry about unnecessary network traffic.
I'd really like to let Angular-UI-Router do its thing with the
ui-view in which the browser is resting.
I'd like to keep
whatever calls need to be made invokable to the Angular Controller
(it's managing authentication, path resolution, and contextual
settings config - which change as users navigate).
Everything (well most important things) generated by the ITHit solution is
stored in a Singleton ('DavBrowserService') - so when I return to
the file-browser view, I have everything stored from the initial
instantiation including:
an instance of ITHit Object
the produced instance of the ITHit.Loader
an instance of the previously produced AjaxFileBrowser.Controller Object (ITHit.oNS.Controller)
an instance of the previously produced WebDavSession Object ( ITHit.oNS.WebDavSession)
With the above in place - I'm hoping that I can simply re-wire these instances back on to the now-returned dom-node ('afb-content-div').
Any help is MUCH appreciated!
UPDATE: The below "answer" while appearing to be functional - indeed was NOT. However, I have worked around this issue by grabbing the DOM instance and storing it memory when the user navigates away, and re-attaching it after the user has navigated back to the appropriate area. This way all of the ITHit Magic is still tied to the right DOM node, and I don't have to worry about the partial re-instantiation weirdness. Seems to be pretty solid now.
I figured it out!!! It looks like if I re-instantiate the controller by calling:
var controllerInstance = new ITHit.oNS.Controller( originalSettingsObj );
Everything rewires magically! I've wrapped the above code with some detection for whether the 'afb-content-div' HTML DOM node has children.
After much digging in the code, it looks like this is the argument object returned to as a parameter to ITHitLoader.oninit callback (From the AjaxFileBrowserLoader instance).
Thanks for playing!
I have a SPA webapp that calls a webservice to gather 'X' amount of json objects ~(1 - 30+). I then use this data for multiple changing slides (all data is not displayed in the 1st slide).
I am using Node/Express/Angular/Jade.
How should I stage these slides when I gather the original data from the webservice (can only call the service once because $ constraints)? I would like the back button/urls to work as well. So, should I completely render out the data and use client side JS to hide/show the dom elements based on button clicks (incorporating messy hash bangs and JS methods to track location/flow). Or is there a sexier more efficient way? Should I store my data in the cache and pull from it (using my angularjs ng-view, note: changing my ng-view will be a pain... it would be ideal to have a ng-view within a ng-view in this particular situation, even though that doesnt exist) based on the slide? Or is there another way?
Thank you for your help, let me know if you need further explanation.
For mapping URLs to your angularjs pages, I would suggest using ui-router. You may or may not need ui-router for this particular problem. But, generally, it will help tremendously in organizing the structure of your site.
For the other questions:
I would store your results (which was retrieved from the service) in a $rootScope variable. The page index of your slides will be a parameter in your URL. Based on the value of this parameter, your controller can decide which page content it will display.
I pass a variable from the views.py file to multiple javascript template and want to refresh that variable every time I click on certain parts of the window. Loading the variable from views to the template is simple enough, but I don't know how to pass that variable back to the views then send it back to update the templates.
You would have to do that via Ajax. It's the only way you would be able to execute a server-side view and hand back data, most likely JSON, that could be used to update a JavaScript variable.
If you're looking for a way to automatically update the DOM when changes in client-side data occur, I highly recommend Knockout.js.