Material UI next simple dialog add new contact - reactjs

I am using the material-ui next branch and using the following example as reference for building a dialog.
https://material-ui-next.com/demos/dialogs/
https://codesandbox.io/s/7rq8nl11x
I wanted to know the best way to let the user enter a new contact as per material guidelines ie how to handle the UI for click of add contact button present in the bottom of the dialog. Would it be to hide this dialog and show a new dialog instead which shows a form letting the user enter a new contact.
I'm mostly looking for suggestions on design.

There's a lot of good information on the material design guidelines and best practices for managing components in React.
With that said, a good solution for your situation is to handle all the account management within the one modal. Here's an idea for a structure that's very similar to what Google does:
DialogContainer as the parent component to handle logic and contain the next two components.
AccountList to render each user as well as the 'add account' button.
AccountCreation component that renders the input to add another account.

Related

What type to use to create a half page in reactjs

I am working on a software project that will allow the user to create a chat. My application will have a chat button which when clicked by the user will trigger the display of a rising half page spanning the screen in length and which can be topped, like this:, Here I take a example on the vscode console and the circled button is the button I would like to create at the top of the window to allow overriding it. My main concern is that I don't know how to create this type of page and when I search the web I see tutorials for creating modal windows and courses for getting started in reactjs. I'm brand new to reactjs and hope to get help from more experienced members of the community.
Thank you for reading my question and I look forward to your responses.

What is the correct way to control when/if to show tooltip in mobile app using react native?

I am writing a mobile app and when the user sees some screens of the app for the first time, I would like to show a tooltip, explaining some of the functionality.
For instance, the user navigates to the profile page, and I show a tooltip on the add icon, saying something like "you can add a photo here".
Obviously I dont want to show this tooltip every time the user navigates to the profile page, so what is the correct way of doing so? Is it via redux? Keeping some state like "tooltipWasShown"?
Or should I write a custom hook? Something which checks if the tooltip was shown? (this should happen again via redux I guess)
I dont think it is a unique problem, but I couldn't find any blog posts/examples of what is the way to implement it. Any suggestions are welcome!
You will need to use Async Storage for the save data about tutorial, if user reload app redux will be empty. Or will add isFirstEnter field to user in DB and then check this field

Trigger scroll to roll down to bottom automatically in Mendix Native Mobile App

I’m working on a Native Mobile App, which is being built inside the Mendix Platform. And I'm trying to figure out how to trigger a scroll-to-bottom behavior automatically.
My situation is:
I have a form with a lot of fields, and some with conditional visibility. Which means that they will appear if the user selects some specific options, in radio-buttons.
But some of them will be out of the visible area when the user clicks the related radio-button, and the field becomes visible (as it is located at the bottom of the form).
I trying to find a way to force the scroll to the bottom when these new fields become visible (from the user click in radio-button above).
Any suggestion on how to achieve this?
In the Mendix market place there is a native widget that seems to be able to do what you need to achieve: https://marketplace.mendix.com/link/component/116738
The last update was in May this year for Mendix 9.1 and there is a version for Mendix 8.17 as well.
Hope this provides a solution.

Best practice for modal popup information page

I have an app where I want to click a button and up pops a modal information page, with text and diagrams. Each information page will have react/js since the content is dynamic. I have about 30 different information pages that I want to create and 30 different buttons to trigger each page.
What is the best way of doing this? Do I create 30 different files with the html for each modal popup and do it that way?
I am using Material UI. Not sure which modal option I should be using. They have Dialog, Drawer, Menu or Popover. Or perhaps another method is better.
I figure this must be a common requirement so hopefully I can find the best practice.

Can a salesforce custom button have some javascript in it?

What is the current way to do a custom button with some js in it?
We are building a custom button that needs to be able to read from the current contact (email address, phone, mailing address), and run a few lines of js. (We also need to create a call record.)
But how/where is this done in salesforce these days?
This page doesn't point me anywhere:
https://help.salesforce.com/apex/HTViewHelpDoc?id=customize_enterprise.htm
And this explanation of the new method in Lightning isn't clear where the js lives:
https://developer.salesforce.com/forums/?id=906F0000000BWr4IAG
Where is the needed example/doc?
If you are using buttons on custom visualforce page there are no any problems with defining custom JS function for it. For example, if you use <apex:commandButton/> you can use such attributes as onclick, onkeydown, onkeyup and other. See more information in documentation.
If you are using buttons on object layouts, you can create custom button and chose executing of JS as a behavior, see attached screenshot.
If you mean some other cases, please, describe it.

Resources