Data Model: Timeline Content

The data model for the timeline content is formatted into an array.

The main title of the sections for the timeline content have the following properties:

• title (string)
• checkmark (boolean)
• itemExpand (boolean)
• dot (boolean)
• children (array)

The children of each section determines the content for that section. The children have the following properties:

• title (string)
• checkmark (boolean)
• children (array)

For the main section titles, the itemExpand boolean is so that the user can expand that section. The dot is for the blue dot on the left of each title. The checkmark boolean is always false for the title.

For the children, the very last children of the content (meaning that that item has an empty array for the children property) is the to do items for the timeline. The checkmark boolean is always true for the last children.

Example:

public list = [
    {
      title: 'Getting Out',
      checkmark: false,
      itemExpand: false,
      dot: true,
      children: [
        {
          title: 'Understanding the process of separating',
          checkmark: false,
          children: [
            {
              title: 'Find out your separation date',
              checkmark: true,
              children: []
            },
            {
              title: 'Complete Pre-Separation Counseling',
              checkmark: true,
              children: []
            }
          ]
        },
        {
          title: 'Completing my paperwork',
          checkmark: false,
          children: [
            {
              title: 'Prepare a criterion-based Individual Transition Plan (ITP)',
              checkmark: true,
              children: []
            },
            {
              title: 'Complete a Continuum of Military Service Opportunity Counseling (Required Active Component Only)',
              checkmark: true,
              children: []
            }
          ]
        }
      ]
    },
    {
      title: 'Starting Up',
      checkmark: false,
      itemExpand: false,
      dot: true,
      children: [
        {
          title: 'Find something to do',
          children: [
            {
              title: 'Go to Career Center',
              checkmark: true,
              children: []
            }
          ]
        },
        {
          title: 'Balancing finances',
          checkmark: false,
          children: [
            {
              title: 'Open a savings account',
              checkmark: true,
              children: []
            }
          ]
        }
      ]
    },
    {
      title: 'Reinventing myself',
      checkmark: false,
      itemExpand: false,
      dot: true,
      children: []
    }
  ];