Page Comparison

...

UI Description

1. Implementation Card Tab Layout:

   • The

   content

   • Implementation Card Tab is

   selected,

   • showcasing the meta data on the left side, and the

   Primary and Secondary sections will show what Implementation Cards have the Focus area as a Primary or Secondary Focus Area.

2. Primary Focus Area

   1. This area will show all of the Implementation Cards that have the specific Focus Area, as a Primary Focus Area.

      1. Users will be able to edit and/or preview each Implementation Card

      2. If there are no Implementation Cards that have the Focus Area as a Primary, the following text will be displayed “No implementation cards linked.”.

3. Secondary Focus Area

   This area will show all of the Implementation Cards that have the specific Focus Area, as a Secondary Focus Area.

   Users will be able to edit and/or preview each Implementation Card

   • Implementation cards linked to the Focus Area will be displayed within their own section.

4. Section Management

   • If you are viewing a Focus Area that already has implementation cards linked to it, each implementation card should have its own section where a user can preview or edit the Implementation card

     • Each Focus Area section should have the following fields

       • Title of Implementation Card

       • Short Description of Implementation Card

       • Preview Button to preview the Implementation Card in HTML

       • Edit Button the will open the Implementation Card Builder and the user will be able to Edit the Implementation Card they selected.

   • If there are no Implementation Cards that have the Focus Area

   as a Secondary

   • attached, the following text will be displayed “No implementation cards linked.”.

(Note: This tab is only for seeing all of the associated Implementation Cards to the Focus Area, as well as Previewing/Editing the Implementation Cards. The user will not be able to add a link to an implementation card from this tab. The user will have to create the link within the implementation card builder to the Focus Area)

User Interaction and Validation Notes

• Implementation Card Section Management:

  • All Implementation Cards linked to the Focus Area should be populated with their own sections.

    • Key Areas of each section:

      • Title of Implementation Card

      • Short Description of Implementation Card

      • Preview Button

      • Edit Button

  • Previewing Implementation Card:

...

When a user clicks the ‘Preview’ button on the Implementation card, they will be given a view of the implementation card as an end user would see. Exactly how you would preview an Implementation Card within the Implementation Card Builder.

...

• • Each Implementation Card section should have a preview button where a user is able to view the Implementation Card in HTML as a user would. When closing the Implementation Card I should be navigated back the the Implementation Card tab of the Focus Area Builder.

  • Editing Implementation Card:

...

• • Each Implementation Card section should have an edit button where a user can edit the Implementation Card within the Implementation Card Builder

...

• • . Clicking the edit button will open the Implementation Card

...

• • Builder for the selected Card and the user should be able to

...

• • make any change to the Implementation Card

...

• • .

...

• • When a user clicks save and closes the Implementation Card Builder

...

• • they

...

• • should be

...

• • navigated back to the Implementation Card Tab of the Focus Area Builder.

...

• • NOTE: If a user

...

• • changed the Focus Area field while editing the Implementation Card,

...

• • the Implementation Card would no longer be displayed in the Focus Area you were in.