Hi, wanting a checklist of items that may contain clickable links I used labels with markdown text in dcc.Checklist which didn’t work, of course. The definition below served my purpose but I don’t dare to think of the need to define callbacks for finding which items are currently selected. Can anyone think of a better solution?
def checklist_markdown(options) -> dbc.Col:
r''' Return html.Col() for the list of each entry of `options` mapped to
an enumerating number,
a checkbox, and
a label
Parameters:
options=[
{
'label': "<markdown text representing the item in the list>",
'id' : "<identifier to be used in callbacks>",
'value': "<value to check for in callbacks>"
},
...
]
'''
def list_item(start,total,value,label,identifier):
r'''Return `html.Ol` object with couting starting at `number` that only contains
one `dbc.Row` element containing
- a one-element `dcc.Checklist` with property `id=identifier` set to `value` when clicked
- a `dbc.Row` element that contains a `dcc.Markdown` element to process `label`
Parameters:
start ... to start counting in the ordered list at
total number of all items in the list
label markdown text representing the item in the list
identifier ... to be used in callbacks
value ... to check for in callbacks
'''
format_str = "{:" + str(len(str(total))) + "d}"
logger.info(f'{checklist_markdown.__name__}.{list_item.__name__}: {format_str=},')
label_number = dbc.Col(
dcc.Markdown(format_str.format(start)),
width="auto",
)
# logger.info
print(f'{checklist_markdown.__name__}.{list_item.__name__}: using format code "{format_str=}" for displaying {start=}')
html_checkbox = dbc.Col(
dcc.Checklist(
id=identifier,
options=[ { 'label': ' ', 'value': value } ],
),
width=1,
)
label_markdown = dbc.Col(
dcc.Markdown(label),
width=8,
)
children = dbc.Row([label_number, html_checkbox, label_markdown])
html_list_item = html.Ol(children, start = str(start))
return html_list_item
total = len(options)
return dbc.Col(
[list_item(i+1, total, options[i]['value'], options[i]['label'], options[i]['id']) for i in range(total)],
width={"offset": 1}
)