So I'm new to Dash, with experience in Shiny, and am having a bit of trouble configuring a dropdown menu. So I have 3 tabs in Dash and the behavior I currently have is the creation of a dropdown menu when a user clicks on the medicaid tab. I don't want this dropdown to appear for the other two tabs, hence why it is in my callback function. This dropdown (e.g. state dropdown) then gives the user a list of states.
My issue really lies in how to get the input value from the state dropdown since it is in the callback function...
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from dash.dependencies import Input, Output
import plotly.graph_objs as go
app = dash.Dash(__name__)
df = pd.read_csv("Timely and Effective Care - Hospital.csv", engine='python', sep=None)
app.layout = html.Div(children=[
# tab selection menu dynamically created
html.Div([
dcc.Tabs(
id='menu-tabs',
value='tab-1',
className='custom-tabs-container',
children=[
dcc.Tab(
label='Medicaid',
value='medicaid',
),
dcc.Tab(
label='Commercial',
value='commercial',
),
dcc.Tab(
label='Uninsured',
value='uninsured'
),
]),
html.Div(id='state-dropdown'),
html.Div(id='sample')
])
], className='wrapper')
#app.callback(Output('state-dropdown', 'children'),
[Input('menu-tabs', 'value')])
def render_dropdown(tab):
if tab == 'medicaid':
return html.Div(children=[dcc.Dropdown(id='states',
options=[{'label': i, 'value':i}
for i in df['State'].unique()]
)])
What I want is another dropdown to be created within the medicaid tab...after a user selects a state from the first dropdown, the second dropdown should only list hospitals within the state selected from the first dropdown.
Hospital names are under the hospital column in df.
Dash does not like components being added after building the layout (ex. inside a callback), which makes this approach tough. I suggest looking at this page and following the tab "Content as Tab Children" approach. This will let you keep at least the basic form of the dropdowns in the layout (including the all-important IDs), and then use the callback to populate the values.
At that point, the callback should be much easier, because it only needs to update the options prop of the callback component which already exists.
Related
So I have an application with a dashboard and a main page that has a header. Both of them have a react-bootstrap-typeahead input to perform the same action - a search to open something on a map.
What I would like to achieve is:
when the user search something on the dashboard, the main page opens with the search result and on the header, the search input there shows what was searched on the other component.
on the other hand, when the user search something on the search input on the main page header, and then goes back to the dashboard, the dashboard search input should be prefilled with the value previously searched on the main page.
What I have tried so far:
So when the user picks a search item result, that string is saved on the application state using redux. I also clear it manually when the user clicks on the clear search button. The RBT component is defined to use this variable, as in:
<AsyncTypeahead defaultInputValue={props.currentSearchValue} ... />
This seams to work on the first time, i.e. when the user has not interacted with the other input yet. For example, with the application on a fresh state (just loaded) if on the dashboard I pick a search item, when going to the main page because that search input has not been touched yet. Then, when I pick a search item on the main page and go back to the dashboard, I wouldn't see it because setting defaultInputValue is not enough, as that input is not in its default state anymore.
Any tips? I have been running in circles so far. Tried the key/setKey workaround as described in another answer, but that wasn't enough to cover the case described on the previous paragraph. I also tried comparing the input value to the recorded value, but naturally when starting to typing with the input field the values would be different and therefore I cannot trigger a component reload based on that.
Thanks in advance.
Unless I'm missing something about your use case, the selected prop should do what you need. You can save the selected item(s) in your redux store and populate the typeahead with the value on the given page.
// Get the initial value from the store. This should be an array.
const typeaheadSelections = useSelector(...);
<Typeahead
...
onChange={(selected) => {
// Update the value in the store when the selection changes.
dispatch({
type: 'set-typeahead',
value: selected,
});
}}
selected={typeaheadSelections}
/>
I have an ant design table. One of its columns is something like this:
which contains three icons and one "AutoComplete" component showing some names. In editing mode, I have put all these four components ( 3 icons and one autocomplete) in a "Form.Item" tag. But the autocomplete component does not work properly in editing mode.( I mean when it is clicked for edit, the name inside it is cleared and the new selected name will not put in autocomplete input). But when I remove the three icons from the code, the autocomplete works fine.
Why this happens? can any body help on this?
As far as I know Form.Item need to have one child element because he implicitly pass to child value and onChange props. You probalby can create wrapper for your Autocomplete component, something like following (it's just idea):
function Autocomplete (props) {
return (
<div>
<Icon1/>
<Icon2/>
<Icon3/>
<AntdAutocomplete value={props.value} onChange={props.onChange}/>
<div/>
);
}
In my Access dB, I have a Form ("frmSearch") with a Subform ("subFrmData") that references a query ("qryDynamicData").
The Main Form has 6 drop downs that filter the data table in the Subform. The combo boxes are cascading so that once you select one, the entries that appear in the remaining combo boxes are only those entries in the query that correlate to the first selection. The goal is to keep making the data in the Subform data table shorter and shorter. Here are the fields in the combo boxes:
Region
Account Executive
Manager
Engineer
Stage
Project Number ("ProjectSLCT")
When the user filters down to where the list of projects they are looking at is small enough, they use the final combo box ("Project Number") to select an entry from the table. Doing this brings up another form ("MPC_ProjectNotes") as a pop-up form where they can keep track of project specifics. The event looks like this:
DoCmd.OpenForm "MPC_ProjectNotes", , , "Project_Number= '" & Me.ProjectSLCT.Value & "'"
I want to create a Next Record button on the "MPC_ProjectNotes" form that would in effect allow them to run through the steps of selecting the next item in the ProjectSLCT dropdown and thereby relaunching the MPC_ProjectNotes form with the next item from the combo box (and from the datasheet in "subFrmData") without having to close the MPC_ProjectNotes form and adjust the combo box.
Any thoughts? I don't really even know what to google to get myself pointed in the right direction on this. It seems "Next Buttons" aren't generally setup to work across forms.
Ok, here is what I would suggest:
In place of launching form MPC_ProjectNotes to ONE reocrd?
Why not launch the form with the SAME criteria and list as your combo box ProjectSLCT.
Now, we would of course land in the first reocrd of ProjectSLCT. but that's probably ok!
Now say if ProjectSLCT was NOT on the first record? Then we would simple have to add one extra step: move the form to the right record.
So, the logic is this:
Launch the 2nd form to the same "list" as the combo box.
Move the 2nd form to the SAME item currently selected in the combo box.
Now, you don't even have to write a next/previous button, but can simple display the built in navigation buttons. Since the form is LIMITED to the same list, then regular navigation in that form will work and work without you having to write any code!
So someplace in your first form, you EVENTUALLY wind up with this:
combobox data source = select * from tblWhoKnows where (CRITERA GOES HERE!!!).
So, now we simple launch the 2nd form with this:
DoCmd.OpenForm "MPC_ProjectNotes", , , (CRITERA GOES HERE!!!)
Now the form is loaded with the SAME list. We just this extra line of code to move/jump the form to the current selected row in the combo.
forms("MPC_ProjectNotes").RecordSet.FindFirst "Project_Number= '" & Me.ProjectSLCT.Value & "'"
So we open the form to the "list", and then jump to the corrent combo box selected. The result is a form that you can navagate teh combo list, but we jump/started out on the same combox selected item from that list in the form.
So the code will look something like this:
DoCmd.OpenForm "MPC_ProjectNotes", , , (CRITERA GOES HERE!!!)
Forms("MPC_ProjectNotes").RecordSet.FindFirst "Project_Number= '" & Me.ProjectSLCT.Value & "'"
You will of course "change" the above "CRITERA" to the SAME criteria you used in your code to fill out the last combo box.
Case:
I have an array of answers which I want to show in the view as radio inputs. When one of the answers is already answered it must be [checked] and if it's [checked] a textarea shows, so far so good.
Next I want to check another radio input and I want the current selected to be deselected and its textarea hidden, then the new selected radio input should be [checked] and it's textarea should show.
I use the FormBuilder and FormArray and have following issues.
I can't use index without intrapolation, I see many examples where the index is used without.
If I select another radio input, first my data disappears and it's not checked and on the second click it get's checked but now both are checked.
- I don't have access to the checked event, I can show it in the view with {{tempVar.checked}} as you can see above, if I use a template variable #tempVar, but I don't have access to it in the textarea below *ngIf="tempVar.checked". If I do use it in the ngIf I get the following error
Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
Questions:
Is this the right approach?
An example of a Reactive Dynamic form with FormBuilder and FormArray with Radio inputs
Here is my code
https://gist.github.com/webwizart/121c85a0f316f47977cc0c99455af7bf
I would think using the tags should be reserved for unique identifiers? I wouldn't be surprised if dom renderer will update all elements with the same id.
Not sure if this will help, but you could use an answer view model instead (containing the same data) but that also has a 'checked' property
This way you can be sure that it will behave as you would expect.
e.g.: (in your component.ts)
let answers = this.question.Question.PossibleAnswers
.map(a =>
{ return Object.assign({}, a, { checked: false });
}
);
then in html you use: 'answer.checked' instead of 'radio.checked'
ps: also you could use ng-container instead of span, so you don't have an extra DOM imprint in your html
I've created a simple form containing two selectbox elements. I also have a button which dynamically adds these selectboxes at the user's discretion. The selectbox options will be quite long, so I've applied the jQuery Chosen plugin to be more useful.
Everything works fine until a new element is dynamically added using jQuery clone. I am unable to select any options in my new element selectboxes, and they also carry the prior results.
In searching the forum, others have 'reset' Chosen after a selection, by calling: $("#form_field").trigger("liszt:updated"); . I tried this as well, but it will just clear all the selections (which I don't want) and continue to freeze the dropdown action.
Anyone have experience with using Chosen (or any other autocomplete-type selectbox enhancement) with dynamic elements?
Found a solution that works - albeit without using the Chosen plugin.
I changed my dynamically created form elements by replacing the selectboxes with input fields tied to a basic jQueryUI autocomplete plugin. Here is a link to their implementation : http://jqueryui.com/autocomplete/#default.
The main difference is that the select "options" in this case, were listed as the source from which the box would look for autocomplete options. My list was 70 items long, so the initial setup took some time.
The jQuery text was generically as follows:
$("input#search").autocomplete({
source: [item1, item2, item3, item 4, ... item5]);