Focus Areas Implementation Card Tab | Goals & Interventions

Owned by Mary DelPiano
Last updated: May 28, 2024 by Andrew Estrada
2 min read

Overview

This tab will allow the user to view the implementation cards associated with the Focus Areas.

Figma: https://www.figma.com/design/hq6VjWO99WfQaSzXswgVIY/Authoring?node-id=4609-13078&t=O171mDsTqNuy0p8P-0

Feature:

UI Description

  1. Implementation Card Tab:

    • The Implementation Card Tab is showcasing the meta data on the left side, and the Implementation cards linked to the Focus Area will be displayed within their own section.

  2. 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 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: 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.