[UX] Adjustments and Updates to widgets on Questionnaire - SDC

[f-odhiambo]

Describe the enhancement

Screenshot 1

1. Header properties

• Should have a close button instead of back button when the form is scrolled,
• the header should have a dropdown shadow

2. Bottom button and container

• button container should have drop shadow if there’s more content down the list
• the buttons have round edges in design and color of buttons is different - see action colors here

3. Questions

• the questions font weights and size is different from designs. We use big font in these forms for
• For required questions, we shouldn’t use “*”, instead if a question is optional that’s when we will indicate the “(optional)” badge/text

4. Spacing

-The sapcing between the question and the body has been updated from 24px to 16px.

• And the space between questions should be 32px

5. Select Options/Answers

• the design properties of these components are different from the original designs.
• text is smaller
• padding not the same as in design
• icons used are different
• colors used are different
• spacing between items in the components different from design

Adjusted Designs

Screenshot 2

1. Header navigation - Use close button and not back button
2. Spacing - space between input label and the text field is more than in design
3. Input field label

• text field labels are bolder in the screenshot, design proposed regular
• the optional fields should have tag “(optional)” and required fields should have none

4. Input field. - input field borders have different color from design
5. Save button

• input field borders have different color from design
• and the corner raduis

Adjusted Design

Screenshot 3

1. Header Navigation

• Use close button and not back button
• top header navigation should have drop shadow on scroll

2. Save button

• input field borders have different color from design
• and the corner raduis
• the container should have dropdown shadow in the upward direction when there’s content below it, and just a border line at the top if no content below it i.e at end of the list

[FikriMilano]

The SDK allows us to override the QuestionnaireItem widget's style or dimension.

The catch is that dimens may be used not only by the component we want to change but also by other components.

e.g. say we want to change the margin top for widgets, in some parts of the SDK, padding_default is used as a top margin for widgets, but it is also used for check box view padding; if we override that dimens property, it will affect both, which we don't want to happen.

NOTE: I don't know why they use padding_default as margin top, it feels wrong.

For overriding styles, here's one example of the requirement we can implement on FHIR Core.

the questions font weights and size is different from designs. We use big font in these forms for

Here's one example of the requirement we can't implement on FHIR Core, need to do this in SDK.

For required questions, we shouldn’t use “*”, instead if a question is optional that’s when we will indicate the “(optional)” badge/text

[FikriMilano]

For the * or optional there is currently an open discussion here w @shelaghm
google/android-fhir#544 (comment)

[dubdabasoduba]

The SDK allows us to override the QuestionnaireItem widget's style or dimension.

The catch is that dimens may be used not only by the component we want to change but also by other components.

e.g. say we want to change the margin top for widgets, in some parts of the SDK, padding_default is used as a top margin for widgets, but it is also used for check box view padding; if we override that dimens property, it will affect both, which we don't want to happen.

NOTE: I don't know why they use padding_default as margin top, it feels wrong.

For overriding styles, here's one example of the requirement we can implement on FHIR Core.

the questions font weights and size is different from designs. We use big font in these forms for

Here's one example of the requirement we can't implement on FHIR Core, need to do this in SDK.

For required questions, we shouldn’t use “*”, instead if a question is optional that’s when we will indicate the “(optional)” badge/text

@FikriMilano are we overriding this by updating the styles.xml on FHIR Core? Just making sure we will not be adding anything that might increase the complexity of keeping up with the SDK.

[FikriMilano]

@dubdabasoduba yeah, styles.xml

[FikriMilano]

@f-odhiambo
Analyzed these, whether the requirements needs to be implemented on FHIRCore or SDK or even both.

SS 1

1. Header properties

   • Should have a close button instead of back button when the form is scrolled [FHIRCORE]
   • The header should have a dropdown shadow [FHIRCORE]

2. Bottom button and container

   • Button container should have drop shadow if there’s more content down the list [SDK] [FHIRCORE] Enable bottom container style and behavior customization google/android-fhir#1859
   • The buttons have round edges in design and color of buttons is different - see action colors here [FHIRCORE]

3. Questions

   • The questions font weights and size is different from designs. We use big font in these forms for [FHIRCORE]
   • For required questions, we shouldn’t use “*”, instead if a question is optional that’s when we will indicate the “(optional)” badge/text [SDK] Show asterisk in flyover text if question text is not present and questionnaire item is required. google/android-fhir#1762

4. Spacing

   • The spacing between the question and the body has been updated from 24px to 16px. [SDK] [FHIRCORE] Improve overriding dimens google/android-fhir#1852
   • And the space between questions should be 32px [SDK] [FHIRCORE] Improve overriding dimens google/android-fhir#1852

5. Select Options/Answers

   • The design properties of these components are different from the original designs.
   • Text is smaller [FHIRCORE]
   • Padding not the same as in design [FHIRCORE]
   • Icons used are different [FHIRCORE]
   • Colors used are different [FHIRCORE]
   • Spacing between items in the components different from design [SDK] [FHIRCORE] Improve overriding dimens google/android-fhir#1852

SS 2

1. Header navigation

   • Use close button and not back button [FHIRCORE]

2. Spacing

   • Space between input label and the text field is more than in design [SDK] [FHIRCORE] Improve overriding dimens google/android-fhir#1852

3. Input field label

   • Text field labels are bolder in the screenshot, design proposed regular [FHIRCORE]
   • The optional fields should have tag “(optional)” and required fields should have none [SDK] Show asterisk in flyover text if question text is not present and questionnaire item is required. google/android-fhir#1762

4. Input field

   • Input field borders have different color from design [FHIRCORE]

5. Save button

   • Input field borders have different color from design [FHIRCORE]
   • And the corner radius [FHIRCORE]

SS 3

1. Header Navigation

   • Use close button and not back button [FHIRCORE]
   • Top header navigation should have drop shadow on scroll [FHIRCORE]

2. Save button

   • And the corner radius [FHIRCORE]
   • The container should have dropdown shadow in the upward direction when there’s content below it, and just a border line at the top if no content below it i.e at end of the list [SDK] [FHIRCORE] Enable bottom container style and behavior customization google/android-fhir#1859

[shelaghm]

@FikriMilano Thanks for looping me in. I see there's a couple of SDK padding issues, I'm hopeful that we can make these changes in the SDK. Can you file an issue on the SDK github with what the ideal padding would be and tag me in it? Thanks!

[FikriMilano]

@shelaghm thanks for commenting!

I will surely file an issue on the SDK and tag you.

[FikriMilano]

@f-odhiambo @dubdabasoduba is this still low priority? or do we need to get this merged soon?

[FikriMilano]

Blocked by google/android-fhir#1852

[f-odhiambo]

@FikriMilano This is now unblocked

[FikriMilano]

Good reminder @f-odhiambo

[f-odhiambo]

@HenryRae to review and share an update on the widget styling for this ticket

[HenryRae]

@FikriMilano @Rkareko

1. Paginated forms can have text buttons "back", "next" and "save/done"(any copy defined) at the last paginated form. See example here

2. Non-paginated forms should have use a primary rectangular block button with background color. See example here which fills the whole container

Summary: Use text buttons on paginated forms, and rectangular buttons with background color on non-paginated forms