Integrate Help button use case in catalog app.

[santosh-pingle]

Is your feature request related to a problem? Please describe. As Help button feature will be part of sdc module, it will be good to integrate same in any one of the existing screen of the catalog app.

@shelaghm Can you please suggest use case in catalog app where help button can be shown.

#1528

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

Would you like to work on the issue? Please state if this issue should be assigned to you or who you think could help to solve this issue.

[shelaghm]

I suggest we add a new component in SDC Catalog app to show this use case.

• Icon added (shared on chat)
• See figma for specifics for the grey background box behind the help text. This shouldn't be a drawable, but rather a responsive background box.

[santosh-pingle]

looking into it.

[jingtang10]

@shelaghm @santosh-pingle This is slightly different from what I had in mind as "components". For me, the component tab loosely corresponds to the different types of questions and how they are rendered depending on the item control extension: http://build.fhir.org/valueset-questionnaire-item-control.html.

So strictly speaking, I think this can be in a separaate tab, perhaps a "Misc" tab next to components, layouts, behavior. That tab can then be also used to showcase things like instruction text, flyover, etc etc. However, I do feel that's a little bit over the top.

I'm probably ok with this in the component list - but is there anyway for us to separate this from the other components which are widgets? Change the name to something like "Misc: Help text" or have sub headings in the list of components and have this in a seperate section?

[shelaghm]

@jingtang10 I hear your concern.

Those are some good ideas. As usual I mocked it up so we can see what the different options can look like. Option 1: place misc components below the item control components and add a subheader. I think this works. The term components is general enough that I think we can place features like help or instructions inside. Option 2: Many of the misc components relate to questionnaire layout, so could put the layout relevant ones here? I think this is a bit more confusing than option 1. Option 3: New tab! I think this can work, but the mental model what people expect to find inside 'other' or 'misc' is less obvious. Unless we can think of a better name for these components that we imagine would be grouped in this section

What do you think @jingtang10?

[jingtang10]

amazing. thanks @shelaghm.

likewise i prefer one. let's call the existing components "widgets"? so under "components" we have "widgets" and "misc"?

[shelaghm]

@jingtang10 Sounds good.

@santosh-pingle this is ready for you to implement in the catalog app. We're going for option 1 with two sections. Top section is called widgets which has most of the existing widgets. Bottom section is called Misc which contains things like Help, Instructions etc.

[santosh-pingle]

@shelaghm Is it possible to share the figma link to check the top and bottom margin for the header section widgets and Misc componnets for above screenshots?

As of now I am adding 32dp as top margin and 8dp as bottom margin from the text Misc components

[shelaghm]

@santosh-pingle I will share figma link with you. For widgets, since the top bar adds a lot of white space, change 32dp to 24dp. change 8dp -> 12dp 32dp as top margin looks good on misc components. change 8dp -> 12dp so there's a bit more breathing room.