...
UI Description
Implementation Card Tab Layout:
The
Implementation Card Tab is
showcasing the meta data on the left side, and the
Primary Focus Area
This area will show all of the Implementation Cards that have the specific Focus Area, as a Primary Focus Area.
Each implementation card will have their own area, containing the Title and Short Description of the Implementation Card.
Each Primary Implementation Card will allow the user to edit and preview each Implementation Card.
If there are no Implementation Cards that have the Focus Area as a Primary, the following text will be displayed “No implementation cards linked.”.
Secondary Focus Area
This area will show all of the Implementation Cards that have the specific Focus Area, as a Secondary Focus Area.
Each Secondary implementation card will have their own area, containing the Title and Short Description of the Implementation Card.
Each Secondary Implementation Card will allow the user to edit and preview each Implementation CardImplementation cards linked to the Focus Area will be displayed within their own section.
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:
...
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.