I'm making various asynchronous http calls in my reactjs app. Errors from the server are streamlined and I would like to show an error dialog box in react regardless of the current page. I'm currently using the alert but I really would like a styled modal error box.
How do I detect the current page and inject the modal box and display it?
Thanks!
I think you should create the dialog dynamically. It means that you will create and mount the Dialog component right after the error appears. You can refer this approach from ant.design team. https://github.com/ant-design/ant-design/blob/master/components/modal/confirm.tsx
Related
I have an app where the user can download a photo. After downloading it, I want to display a small message saying "Download successful". Initially I wanted to show Modal from https://reactnative.dev/docs/modal but then I wanted this info to disappear either in 5 sec, or if the user taps outside of the modal. So I thought I should wrap my Modal inside an Animated component https://reactnative.dev/docs/animations
Am I on the right track? Is this the way to show a user friendly message - wrapping modal inside animated. Or there is another component which I can use?
I think it will be better if you use SnackBar for such purposes.
You can use any snackbar library in your project. Your wrap it around with your project, Then whenever you need to throw information message or error message you just called the hook for that snackbar. Also it will automatically disappear after showing the message. you won't need to take care of seconds.
notistack package : https://www.npmjs.com/package/notistack
You can also checkout the Material UI Alerts.
I created a modal using reactstrap and while opening the modal it blurs the background and coming to the front, but after creating build and running using express it does not blur the background and does not comes forward. Why is the react and how can I resolve it. I tried looking for different solutions but I was unable to find anything corresponding to it.
Code for reference : Modal Page
Let me know if anyone needs any further information.
***you can use material-UI Modal. ***
FineUploader is great! But I have such a problem: I use React Bootstrap as my UI framework. I need upload button, but after user selects some image file, they need to deal with the image first in a modal dialog window of React Bootstrap, perhaps rotate it, or scale it, or crop it, etc. And when user clicks "Finish" button, then the image should be uploaded to the Node.js server, and display progress bar in the modal dialog body. After the server has received all of the file, then the modal dialog should be closed.
I read through the code of FindUploader, but can't find what I need. FineUploader do have FineUploaderBasic class, with it I can pass the upload button element. But I can't turn the FineUploaderBasic object into FineUploader object, and initialize the template when the modal dialog open. I can't just make the template invisible first, and display it when the modal open. Because React Bootstrap won't add modal into the DOM before user opens the modal.
So should I define a new method to turn a FineUploaderBasic object into a FineUploader object? Or is there any other way to make it?
Background:
I am using backbone.js & Twitter Bootstrap in my client-end page.
On clicking the logout button on header, a confirmation dialog should open.
The question is that
should I use router such as /logout to change to logoutView ?
If click No in the dialog, how could I show the main content with data before the dialog is opened.
Thanks!
Yes, you can use a router and you should.
First thing to know, is you have to render application's layout before dispatching any route, because the layout is rendered and needed for every action, so it's independant, right ?
Second you create a "logout" route in your router and give it the "#logout" hash, then in your "logout" action you open the modal.
Don't use router for such thing. Just fire the modal directly because:
On changing the router, you are gonna push that to the History. Hitting the browser's back button shouldn't really open a modal window.
URLs should be crafted in a way to be bookmarked. You don't want a URL that would open a popup or a modal window!
It's much simpler just to start the modal than to create a variable to hold the previous view and to fall back to it when clicking No
I have build client-side apps using different MVC frameworks like AngularJS and Backbone.js. Every time I faced the same situation you are talking about and found that the easiest and most accurate way is to just show the modal.
UPDATE
Please watch this. This is Jeremy Ashkenas the author of backbone.js stating exactly your situation about how should URLs be used and weather if they should be used to open a pop up or not.
Need to show a popup message in home page only for the first time a user logs into salesforce....
its more like a splash page.
it can be a jquery popup as well..
can i do it using a visualforce page ??? if yes, please give ur suggestions
can we do it using the sidebar component in salesforce ???
I thought of showing it using a sidebar component by keeping a custom field in user object...everytime he logs in i will check the custom field and the show the popup...since this popup will be shown only for the first time is there anyother better solution instead of querying the user object evertime..
thanks.
You can use window.open method of Javascript and for the sidebar provide your scroll option.
If you want to get fancy to have customized look you can just use jquery modal with some style on document ready.
We can use cookie to store if this is the first time or salesforce user object can tell you this is the first time