eAPD icon indicating copy to clipboard operation
eAPD copied to clipboard

[Design Issue] Editing the fields in the “create new APD” flow

Open beparticular opened this issue 2 years ago • 10 comments

In #3687 we designed the page/fields that will create a new APD when there are multiple types of APDs available. We have decided that most fields on this page CAN be edited, even if there is content in the APD. The exception to that rule is the "APD Type". The APD type cannot be edited once an APD has been created. The user would have to start a new APD to change the APD type. This prevent data loss if the fields in each type of APD are not the same.

To design this properly we need to do the following:

  1. Editing these fields would be accessed through a header grouping within the APD (where the title is editable now). For the new designs - make it clear that this grouping of information is editable - not just the title line Screen Shot 2022-07-06 at 12.52.10 PM.png

  2. Make All of the fields editable except “what type of APD are you creating”. This is the reference point for the fields that exist on this page for design to use (this is not the Figma link for the designs on this ticket): https://www.figma.com/file/hJpKHKU6fz5J0Z7fisSwa2/eAPD-MMIS-2022?node-id=93%3A5981

  3. Make it clear that the APD type field is not editable and help the user understand why and what would be next for them.

  4. Consider - how will this affect the current ability to edit an APD title on existing APDs that didn't have the create new APD page? Is there enough information in the system for this addition to cause issues with existing APDs. To ponder: is it valuable to migrate information and allow editing on existing APDs. (This question remains unanswered at this time, but work can begin on this ticket without this answer.)

Figma Link for this design: TBD

This task is done when…

  • [ ] any acceptance criteria (not process oriented, requirements of feature)
  • [x] designs are created, taking into consideration validation, multiple FFY, multiple entries, long entries, weird entries, and/or the export view if applicable
  • [x] 508 visual, content, and UX considerations and/or recommendations are reviewed
  • [x] designs are shared
  • [ ] designs are approved by product
  • [ ] if there is a long discussion, a summary of changes for dev will be added to the last comment before transfer
  • [ ] a list of changes to be made if this is improving an existing feature

Test Cases: General:

Given When Then
APD Type field user focuses on the field, does not make a selection, and leaves the field This field is required and cannot be blank. Should have inline validation with the error message: Select an APD Type
APD Name field user focuses on the field, does not enter a name, and leaves the field This field is required and cannot be blank. Should have inline validation with the error message: Provide an APD Name.
Is this APD an Update? field user focuses on the field, does not make a selection, and leaves the field This field is required and cannot be blank. Should have inline validation with the error message: Indicate whether this APD is an update.
Medicaid Business Areas field user focuses on the field, does not make a selection, and leaves the field This field is required and cannot be blank. Should have inline validation with the error message: Select at least one Medicaid Business Area.
create APD page At least one field is left blank Create an APD button should be unclickable

When creating a new APD:

Given When Then
APD Dashboard user clicks the Create New button Should redirect the user to the new create APD page
Create APD page user chooses to create a HITECH APD page should not include Medicaid Business Areas
Create APD page user chooses to create an MMIS APD page should include Medicaid Business Areas
A filled out create APD page user clicks the Create APD button Page should redirect to the APD overview page - APD overview page should have all the correct information. (title and APD type) - APD dashboard should have the correct title.
create APD page user clicks the Cancel button Should close the page, redirect to the APD dashboard and no APD should be added to the dashboard.

When editing an existing APD - Note: Still undecided whether old APDs will get this feature:

Given When Then
APD overview page user clicks the Edit button next to the APD title (location of this button might change) Should redirect the user to the create new APD page, with the correct values in each field. Correct values are: title, APD type, and Medicaid business areas.
Create new APD page Editing an existing APD The funding type should not be changeable
Create new APD page of an existing APD Changing the title and clicking save(?)* Title should change in the APD overview and APD dashboard
Create new APD page of an existing APD Changing the Medicaid Business Areas and clicking save(?)* These should save, note: only way to check these is if you go back into the create and APD page. They are not saved in the builder yet
Create new APD page of an existing APD Making a change, but clicking cancel The change should not be saved

* - Does the language of the button change when creating a new APD vs editing an existing APD?

Not related to the create new APD page:

  • APD Overview page has changed! Please make sure it matches the Figma

beparticular avatar Jul 06 '22 16:07 beparticular

@jeromeleecms @akuas What would y'all think of making these edits part of the APD Overview page?

beparticular avatar Jul 21 '22 14:07 beparticular

Open to it - if users don't have to leave the page to make the changes, that would be nice. But need a little more details about how you are thinking this might flow...

jeromeleecms avatar Jul 21 '22 15:07 jeromeleecms

@beparticular Content wise, it would make sense. Im also curious about how that would flow as well but we could talk about it during our 1 on 1

akuas avatar Jul 25 '22 11:07 akuas

Design sync notes as of July 28 2022

4179 - Edit new APD

  • Create is the same as designed now, a page before the APD
  • “Edit” becomes not as important a word with the changes we’ve discussed
  • After “create new APD” button is clicked the APD is created and the fields just filled out live in the APD with the APD type disabled
  • Drop the user on the current MMIS APD overview sub nav (*if the interaction makes sense once we get to making the visuals)
  • The fields just filled out become part of the APD overview, with a nav (currently APD set up?) and a sub nav (priorities and scope) or two (TBD)
  • Nav button at the bottom is continue in our regular pattern

akuas avatar Jul 29 '22 13:07 akuas

Current designs in progress https://www.figma.com/file/hJpKHKU6fz5J0Z7fisSwa2/eAPD-MMIS-2022?node-id=414%3A10804

akuas avatar Jul 29 '22 13:07 akuas

I have updated the updates the designs below. This new design makes the older Create New APD designs obsolete because we are introducing the FFY and a slightly different flow to the page. Once users create a new page, the page will transition to APD Overview and the previous APD will now be called State Priorities and Scope. Since the last design sync, we have decided not to have the Create a New APD and older APD Overview as sub-nav under an unnamed APD Introduction. They will be separate pages with the the new APD Overview (with the Create New APD content) being the first page on the side nav. Also, the reasoning behind putting the FFY earlier is that it did not fit with the sorts of questions that were on the old APD Overview page and it makes sense to group it with other fields that establish an APD. Current Designs for Create a New APD Flow

akuas avatar Aug 05 '22 15:08 akuas

@mirano-darren @beparticular Does the design reflect what we discussed?

akuas avatar Aug 05 '22 15:08 akuas

Look good to me! Question about frame 188. For the APD Introduction's subsections, where exactly does the APD Setup end and the APD Overview begin?

Also, does this header only appear once after you first create the APD? If you leave and come back should it still be there? image

mirano-darren avatar Aug 08 '22 14:08 mirano-darren

@mirano-darren As noted on the annotation, each will be a top level nav as shown in Frame 189 @akuas can you update Frame 188 to make sure it matches what we discussed last week?

If you leave and come back that alert should not still be on the page.

beparticular avatar Aug 08 '22 14:08 beparticular

Everything looks fine based on what we discussed.

jeromeleecms avatar Aug 30 '22 18:08 jeromeleecms

Updated Closing Notes as of September 20, 2022 Final Designs

  1. The page is called “Create a New Advanced Planning Document (APD)” when you are creating the APD. The page is called “APD Overview,” once an APD is created and when you return to the page. It appears on top of the side nav and will be the first page folks see after creating an APD.
  2. Validation in Create a New Advanced Planning Document required all fields to be complete before continuing like a subform. Validation in APD Overview behaves like other pages in the builder and will be triggered by the admin check.
  3. State Priorities and Scope is the old MMIS APD Overview without FFY.
  4. The page starts off with a progressive disclosure, meaning we will only show the “What type of APD are you creating?” field and branch following fields, according to their selection
  5. What type of APD are you creating?
    1. Alert disappears once they have created the APD
    2. If users want to change their selection after creating an APD, they would have to start a new APD.
    3. Changing from the HITECH IAPD to MMIS IAPD field selection would change your view (available fields).
    4. Both options come with a tooltip. When you hover over the tooltip it will define HITECH IAPD and MMIS IAPD acroymn.
    5. This field is in its intermediate state. When MMIS PAPD, OAPD and E&E are available, we will break up the field by funding source (HITECH, MMIS & E&E) and APD type (planning, implementation, and operations).
    6. Selecting HITECH IAPD opens up the APD name, FFY, and Update Type fields.
    7. Selecting MMIS IAPD makes APD name, FFY, Is this APD an update (Update Type if you select yes) and Medicaid Business Areas available.
  6. APD Name: Puts name on header like before when you create an APD and can be revised from the header or on this page after creating an APD
  7. FFY: Moved from old APD Overview
    1. Validation is the same with the page level validation.
    2. Two FFY selected as a default. Typically, we don’t pre-select options but the APD and export breaks if you dont have FFY, so it’s important to keep a selection.
  8. Is this an update: Available for MMIS only.
    1. Will be used to gather data on what types of APD folks are creating. ‘Yes’ option expands to provide ‘Update Type,’ which is required if you select yes for ‘Is this an update.’
  9. Medicaid Business Area: The Medicaid MES Certification Repository will direct you to the CMS Certification GitHub: https://cmsgov.github.io/CMCS-DSG-DSS-Certification/ . This list is subject to change so we will need a way to keep it updated. Eligibility and Enrollment is removed from the list. We may bring it back when E&E is available. MES Business areas are like meta tags like APD updates, at the moment. For MVP, it will not trigger a change in help text and fields in the same way the Funding Source/APD type field will be. So, the business areas can be changed after creating a new APD. Also we don't need to add mes business areas for HITECH because it is automatically HIT.
  10. Cancel will direct you back to the dashboard and delete progress of this form. (this is the same as the subforms). The ‘cancel’ button disappears in APD Overview (once you have created an APD and are returning to the page)
  11. The Create an APD button is disabled until you complete the form. It will have a tooltip indicating that all fields are required to create an apd when hovered over in its disabled state.

akuas avatar Sep 20 '22 15:09 akuas

This is done.

jeromeleecms avatar Oct 05 '22 17:10 jeromeleecms