IM Dashboard

Initiative Management (IM) Dashboard is the customizable front end of the Initiative Management module.

Developers should see Use Cases And Sample Scripts For 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 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 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.
   
   
   For help with creating widgets, contact Plutora Support.
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 Close.