IM Dashboard

Elements in IM Dashboard?

Initiatives Dashboard can contain:

• Dashboard Tabs, which contain
  
• Widgets (also called Sections or Blocks), which contain
  
• Section (or Widget or Block) tabs, which contain
  
• Customizable HTML, CSS, and JS forming the widget content.

Manage Dashboard Tabs

To manage dashboard tabs:

1. Add a dashboard tab:
   1. Click + new.
      
2. Rename a dashboard tab:
   1. Click to select the dashboard tab.
   2. Click  button.
   3. Type the new tab name.
   4. Click Close.
3. Delete a dashboard tab:
   1. Click to select the dashboard tab.
   2. Click the delete X button.
   3. Click Yes to confirm.

Manage Widgets

To manage widgets (sections):

1. Add a widget:
   1. Click + Add new widget.
      
2. Rename the widget:
   1. Click the pen-shaped settings   button.
      
   2. Type the Widget name.
   3. Click Save & Close.
3. Delete a widget:
   1. Click the delete X button.
   2. Click Yes to confirm.

Manage Section (Widget) Tabs

To manage Section (Widget) tabs:

1. Add a Section tab:
   1. Click the add + button:
      • When no tabs have been added, the add tab button is beside the settings buttons.
        
      • When tabs have been added, the add tab button is next to the tabs.
2. Rename a Section tab:
   1. Click to select the Section tab.
   2. Click the pen-shaped settings  button.
      
   3. Type the tab name in Widget name.
   4. Click Save & Close.
3. Delete a Section tab:
   1. Click to select the Section tab.
   2. Click the delete X button.
   3. Click Yes to confirm.

Manage Widget (Section, or Block) HTML, CSS, and JS and other content

To manage widget content:

1. Click to select the widget’s Section tab.
2. Click the pen-shaped settings  button
   

3. Type the HTML, which is responsible for page structure.
4. Type the CSS, which is responsible for page styling.
5. Type the JS, which is responsible for dynamic page content. AngularJS:
   • Is a Javascript framework which extends HTML attributes with Directives and binds data to HTML with Expressions.
   • Is distributed as a JavaScript file, and is added to our dynamic web pages automatically.
   • Extends HTML with ng-directives:
     • The ng-app directive defines an AngularJS application.
     • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
     • The ng-bind directive binds application data to the HTML view.
     • For more see https://www.w3schools.com/angular/default.asp.
6. Select a Data Source.
7. Click Save & Close.

Use Cases And Sample Scripts For IM Dashboard

Here are some example use cases that can be satisfied by the use of IM Dashboard:

• As a user, I want to see a single page with my upcoming Releases and Release Management tools.
• As a user, I want to see a single page with my upcoming Releases and the weather report.